Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #16533

    I have removed the gloss.png overlay from the images and don’t want to display text under or on the images.

    I have the images linking to new pages which work fine when on a desktop, but the links will not work on an apple mobile device.

    Any help would be much appreciated.

    Adam

    http://www.greysix.com

    #91869

    Hi Adam,

    I’m going to tag the rest of the support team to have them test since I don’t have a iPhone or iPad.

    Regards,

    Mya

    #91870

    Thanks Mya,

    Keep me posted

    #91871

    Hi Adam,

    What about the links don’t work? Are they not selectable or when you click them nothing happens?

    As far as I know there isn’t anything within the theme that should effect the links only on apple devices so I’m not quite sure where to look for a solution.

    Regards,

    Devin

    #91872

    Hi,

    I checked on a friend’s ipad and indeed the links on the four images do not work.

    What exactly do you mean when you say you removed overlays and added links? In the template itself?

    Functionality wise , what are you trying to achieve? If all you want is to have 4 images, each linking to some page there is an easier way to go about it.

    Right now this is how your code looks for each image

    <div data-ajax-id="86" class="isotope-item post-entry post-entry-86 no_margin flex_column all_sort portfolio-entry-overview portfolio-loop-1 portfolio-parity-odd featured_sort film_sort motion_sort one_fourth portfolio-entry-no-description" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(248px, 0px, 0px); ">
    <div class="inner-entry">
    <div class="slideshow_container slide_container_small">
    <ul class="slideshow fade_slider" data-autorotation="false" data-autorotation-timer="5" data-transition="fade" style="height: 183px; ">
    <li data-animation="random" class="featured featured_container1 caption_right caption_right_framed caption_framed " style="visibility: visible; opacity: 1; z-index: 3; -webkit-transition: none; ">
    <div class="slideshow_media_wrap">
    <a href="http://greysix.com/work/herricks/" style="left: auto; ">
    <img src="http://greysix.com/wp-content/uploads/2012/09/herricks-image-284x211.jpg" title="herricks-image" alt="" data-imgw="284" data-imgh="211" style="left: 0px; -webkit-perspective: 1000; ">
    <span class="image_overlay_effect external_image" style="display: block; z-index: 5; opacity: 0.2; "><span class="image_overlay_effect_inside"></span></span>
    </a>
    </div>
    </li>
    </ul>
    </div>
    </div>
    <!-- end post-entry-->
    </div>

    I would try stripping it down further if your require none of the functionality of a sortable portfolio and removing this part below will most likely get things working on apple devices.

    <span class="image_overlay_effect external_image" style="display: block; z-index: 5; opacity: 0.2; "><span class="image_overlay_effect_inside"></span></span>

    The reason I ask what you had in mind about the four images, is because if you plan to keep them static, you can just use code similar to what’s below for each image, and once it’s styled it will look identical to what you currently are using while speeding up the site by removing unused functionality.

    <div class="image_one"><a href="/page/"><img src="img1.png"></a></div>

    Thanks,

    Nick

    #91873

    Hi guys, thanks for getting back in touch.

    I removed the gloss.png code in the base.css file.

    I want to keep the portfolios functionality of being able to be sorted. This works fine on the “our work” section of the website on an iPad/iphone but the links are still not working. The slider also works responsively on an ipad with swipe functions but still no link when selected.

    #91874

    Hi,

    Why not try this. Leave everything as it was originally, working on iPad and instead of greyscale overlays, have them come out completely transparent. To the end user it will look as if they are not even present, and everything will work in iPad. Because otherwise you would have to modify a lot of different jQuery and php just to get to the bottom of this.

    Thanks,

    Nick

    #91875

    Just checked the Themes demo on an ipad and it seems the links don’t actually work there too. If you don’t want titles on the images then the images alone wont link to a new page/post.

    #91876

    Hi,

    I just looked on ipad2/ios6/safari , at http://www.kriesi.at/themes/eunoia/ and everything works fine. However on your site , still can’t click.

    Take a look at this snapshot http://i48.tinypic.com/2hfovpz.png the left side is the demo side code and the right side is your code.

    All I can suggest is to please make sure you are using the latest version of your browser, and return to the original setup which works on ipad2. Unfortunately I don’t have a different version to test on besides that. Perhaps someone else has another approach to helping you with this.

    Thanks,

    Nick

    #91877

    Hi,

    we have the same problem with ipad 2 / iOS 6 / safari device on our site with the propulsion theme. If we tap an slideshow image to open the lightbox nothing happens. It works fine on desktop, Android devices und iOS 5 devices.

    You can test it here: http://www.avlberlin.com/portfolio/head-tennis-maria-vs-maria/

    We checked your Link http://www.kriesi.at/themes/eunoia/ same problem. Nothing happens if we tap on the image.

    May be there is a problem with hover effect and the tap or touch event.

    Thanks,

    Daniel

    #91878

    Hi,

    Sorry I don’t own an iPhone but ask a friend to check for me. I am going to get this to Kriesi immediately as well as do some limited testing myself, so please hang in there.

    [EDIT] –

    @aimaqvonlob Actually I do see something The Z-Index on the overlay is higher than it is on the lightbox and it should be the other way around.

    Try adding something like this to the Quick CSS in the back end of Propulsion > Theme Options > Styling

    Since I can’t see what I am doing, I am gonna give you 4 blocks to try out.

    Please add one, see if it helped on ipad, and if not, please remove it, and put the next block into Quick CSS, testing each block individually.

    #top .slideshow li {
    z-index: 9999 !important;
    }

    two

    .image_overlay_effect.lightbox_video {
    z-index: 9999 !important;
    }

    three

    .featured.featured_container1.caption_left.caption_left_framed.imageslide.slide_number_1 {
    z-index: 9999 !important;
    }

    four

    .image_overlay_effect_inside {
    z-index: 9999 !important;
    }

    Otherwise you can wait till Kriesi takes a look

    Thanks,

    Nick

    #91879

    Hi,

    after some tests we realize what the problem is. The span class=”image_overlay_effect element is not shown on mobil devices (no hover effect).

    Our solution:

    1. We check the user agent in avia.js file in the avia_activate_hover_effect function. If it’s an mobile device we set span element opacity:1 and deactivate the bg.hover function.

    2. We integrate the standard hover overlay image for the .image_overlay_effect_inside element in custom.css.

    At the end we have a desktop version with hover and a mobile version with an image on top.

    Best, Daniel

    #91880

    Daniel,

    Thanks for posting the solution.

    Nick

    #91881

    Hi Nick,

    I followed your steps to incorporate the extra code into custom.css and was able to get it to work on my iphone, but the site’s portfolio still would not load for ipad. Can you please advise?

    http://www.davidlee2012.com/about/fix-the-richmond/

    Thomas

    #91883

    Hi,

    Ok, please try this out. First, take out the code you used from the fixes that you said made things work on iphone, lets try this first.

    Please *make a backup copy* then open up avia.js located in the /js/ directory in the theme. We will be replacing the function which starts on line 1231 and begins with:

    //
    
    // Hover effect activation
    //

    and it ends on line 1307 *before* start of the next function *which we leave alone* and looks like:

    //
    
    // small js fixes for pixel perfection :)
    //

    So delete everything between lines 1231 – 1307 , and paste the code below in place of the block you just deleted on line 1231

    //
    
    // 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_container a, .related_entries_container 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_effect'><span class='image_overlay_effect_inside'></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.2});

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

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

    }

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

    And add to Quick CSS the following

    .lightbox_video .image_overlay_effect_inside {
    background-image:url("../images/layout/overlay-video.png");
    background-repeat:no-repeat;
    background-position:center center;
    }
    .lightbox_image .image_overlay_effect_inside {
    background-image:url("../images/layout/overlay-image.png");
    background-repeat:no-repeat;
    background-position:center center;
    }

    Let us know how it went.

    Thanks,

    Nick

    #91884

    Yes, everything works! thank you so much for all your help.

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

The topic ‘iPad/iPhone links not working on portfolio & slider’ is closed to new replies.