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