closed resolvedI 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
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
Devin
Moderator
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
Nick
Moderator
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
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.
Nick
Moderator
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
Nick
Moderator
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
aimaqvonlobenstein
Member
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
Nick
Moderator
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
aimaqvonlobenstein
Member
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
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
Nick
Moderator
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
This topic has been closed to new replies.
Please start by registering an account for this forum here
Create a new thread and tell me what problems you are encountering and what you want to know.
There is no step 3 :)
We try to answer all questions within a day, monday-friday.
