Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #17263

    Hello,

    I have the same problem like the one mentioned in this thread:

    http://www.kriesi.at/support/topic/ipadiphone-links-not-working-on-portfolio-slider

    However the solution provided by Nick in his last post does not really work for Choices Theme. If you change the avia.js and custom.css as recommended you can ‘click’ the images on iPad but there’s a constant overlay on the picture

    #94761

    Hi,

    Unfortunately, I don’t have an iPad to test so I can’t be of much assistance. We have tagged Nick to this thread though.

    Regards,

    Mya

    #94762

    Hi,

    Sorry, I have ipad with ios5 still and I guess you have ios6.

    Did the solution from the other page do anything besides glue the overlay to the image? Right now, what needs to happen for everything to be perfect with the portfolio and ipad? Just the removal of the magnifying glass overlay? I am setting up some fixes, ready shortly, but I need your feedback to know if I am moving in the right direction.

    Thanks,

    Nick

    #94763

    Hi Nick,

    thanks for your reply. First of all, you’re right, I’m using IOS6.

    The solution from the other page is fine, except for the magnifying glass overlay – links are working but it looks damn ugly ;)

    If you have some updates, I’ll be happy to test them and give you feedback on it.

    Regards

    Jörn

    #94764

    Hi Jorn,

    Can you look at this page via the ios6, and select the grid option http://www.apple.com/html5/showcase/gallery/ . Do you see (a) hover when sliding over each of the images (image becomes a little bigger); (b) a single click on each image zooms it 500% while remaining images become blurred?

    Apple just discontinued Safari for Windows.. Maybe new Apple ceo is bill gate’s twin lol.

    Thanks,

    Nick

    #94765

    Hi Nick,

    i can not reproduce the hover effect (a) on iPhone or iPad, but I think thats kind of normal for those devices.

    The zoom (b), however, works like you described it.

    #94766

    Hey,

    Yes, that makes sense since there is no way to hover with your finger in the same sense that can be done with a mouse. But nonetheless a touchmove event is pretty much a mouse move that should be able to trigger

    For now, please look at these two, http://jsfiddle.net/Nick_Wordpress/mHAur/6/ http://jsfiddle.net/Nick_Wordpress/mHAur/7/ and see if this is any better? It only works here till the part when you made the click, thats what i would like to focus on.

    Thanks,

    Nick

    #94767

    Hi Nick,

    first link:

    there’s an overlay,

    when I click/touch the picture, the text box underneath the picture changes from grey to blue and the overlay still remains visible

    second link:

    no overlay

    when I click/touch the picture, the text box underneath the picture changes from grey to blue

    #94768

    Hi,

    Please take a look at another one as well. http://jsfiddle.net/Nick_Wordpress/mHAur/9/

    Will the second solution or this one work for you for the present, until Kriesi comes out with some mind blowing update?

    Thanks,

    Nick

    #94769

    Hi Nick,

    sorry for the delay. I was on vacation for a few days.

    Your last solution works better for me, because there is no remaining overlay.

    I could perfectly live with it, until a mind blowing comes out :)

    #94770

    Hi,

    Kriesi is putting out an update within a day. http://www.kriesi.at/support/topic/choices-videos-dont-play-on-mobile-devices-youtubevimeo-on-iphone-and-ipad

    I appreciate all your help and patience.

    Just for the future record my last feeble attempt that you said you can live with is below; which would replace the same function in avia.js …

    //
    
    // Hover effect activation
    //

    (function($) {
    $.fn.avia_activate_hover_effect = function(variables) {
    var defaults = {
    autolinkElements: 'a[rel^="prettyPhoto"], a[rel^="lightbox"], a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg], a[href$=".mov"] , a[href$=".swf"] , a[href*="vimeo.com"] , a[href*="youtube.com"], a.external-link, .avia_mega a, .dynamic_template_columns a, .slideshow a'
    };

    var options = $.extend(defaults, variables),
    css3 = $('html')
    .is('.csstransforms'),
    opacity_val = 0.8;

    return this.each(function() {
    if (css3) {
    opacity_val = 1;
    }

    $(options.autolinkElements, this)
    .not(".noLightbox a")
    .contents('img:not(.filtered-image)')
    .each(function() {
    var img = $(this),
    a = img.parent(),
    preload = img.parents('.preloading'),
    $newclass = 'lightbox_video',
    applied = false;

    if (a.attr('href')
    .match(/(jpg|gif|jpeg|png|tif)/)) {
    $newclass = 'lightbox_image';
    }

    if (a.is('.external-link') || !a.attr('href')
    .match(/(jpg|gif|jpeg|png|.tif|.mov|.swf|vimeo.com|youtube.com)/)) {
    $newclass = 'external_image';
    }

    if (a.is('a')) {
    if (img.is('.alignright')) {
    img.removeClass('alignright');
    a.addClass('alignright')
    }
    if (img.is('.alignleft')) {
    img.removeClass('alignleft');
    a.addClass('alignleft')
    }
    if (img.css('float') == 'left' || img.css('float') == 'right') {
    a.css({
    float: img.css('float')
    })
    }
    if (!a.css('position') || a.css('position') == 'static') {
    a.css({
    position: 'relative',
    display: 'inline-block'
    });
    }
    if (img.is('.aligncenter')) a.css({
    display: 'block'
    });
    if (img.is('.avia_mega img')) a.css({
    position: 'relative',
    display: 'inline-block'
    });
    if (img.css('left')) {
    a.css({
    left: img.css('left')
    });
    img.css('left', 0);
    }
    }
    if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/Android/i))) {

    var bg = $("<span class='image_overlay_effect2'><span class='image_overlay_effect_inside2'></span></span>")
    .appendTo(a);
    bg.css({
    display: 'block',
    zIndex: 5,
    opacity: 1
    });

    } else {

    var bg = $("<span class='image_overlay_effect'><span class='image_overlay_effect_inside'></span></span>")
    .appendTo(a);
    bg.css({
    display: 'block',
    zIndex: 5,
    opacity: 0
    });

    bg.hover(function() {
    if (applied == false && img.css('opacity') > 0.5) {
    bg.addClass($newclass);
    applied = true;
    }

    bg.stop()
    .animate({
    opacity: opacity_val
    }, 400);
    },

    function() {
    bg.stop()
    .animate({
    opacity: 0
    }, 400);
    });

    }

    });
    });
    };
    })(jQuery);

    Thanks,

    Nick

    #94771

    Hi Nick,

    thanks for all your support. You guys are awesome.

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘iPad – Links not working on Portfolio Pages’ is closed to new replies.