closed not a support question
easy-carpet
Member
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
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
Nick
Moderator
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
easy-carpet
Member
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
Nick
Moderator
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
Nick
Moderator
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
easy-carpet
Member
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
Nick
Moderator
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
Nick
Moderator
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
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.
