Mobile Lightbox « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Angular

Mobile Lightbox

8 posts from 4 voices

Started 1 year ago by propagandalabs
Latest reply from Kriesi
This topic is closed
This topic is resolved

Tags:

propagandalabs
Member

Lightbox mobile behaves horribly: on first tap a slide opens to a much smaller image (confusing to user), then the user has to click the lightbox expand "X" button (top right) that looks exactly like the close "X" (confusing), then it opens the same size image as was in the original slide??? Pointless and confusing to humans.

How do we:
A) Bypass the first-level mobile lightbox image size, kill that expand "X" and go straight to its largest image available?
B) Entirely turn off lightbox just for mobile?

Posted 1 year ago #

Dude
Dude

Hey,
all options of the lightbox are listed here: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/
I think in this case you can only use "allow_resize: false" to deactivate the resizing function. Open up js/avia.js and replace following line:

elements.prettyPhoto({ social_tools:'',slideshow: 5000, deeplinking: false, overlay_gallery:false, default_width: ww, default_height: wh });

with:

elements.prettyPhoto({ social_tools:'',slideshow: 5000, deeplinking: false, allow_resize: false, overlay_gallery:false, default_width: ww, default_height: wh });

You can also try to remove the default_width/height parameters from this line.

2) You can try to identify mobile browsers with following code.

if (jQuery(window).width() <  768){
  jQuery('body').addClass("mobile");
}

I'd add the code to js/avia.js after following line:

jQuery(document).ready(function(){

Then you need to change the lightbox activation code in js/avia.js from:

//activates the prettyphoto lightbox
	if(jQuery.fn.avia_activate_lightbox)
	jQuery('body').avia_activate_lightbox();

	//activates the hover effect for image links
	if(jQuery.fn.avia_activate_hover_effect)
	jQuery('body').avia_activate_hover_effect();

to:

//activates the prettyphoto lightbox
	if(jQuery.fn.avia_activate_lightbox)
	jQuery('body').not('mobile').avia_activate_lightbox();

	//activates the hover effect for image links
	if(jQuery.fn.avia_activate_hover_effect)
	jQuery('body').not('mobile').avia_activate_hover_effect();

Posted 1 year ago #

propagandalabs
Member

Haven't tried but thanks for the fast response!

Posted 1 year ago #
mambo-mayer
Member

1. I tried (question b) but nothing changed. what did i do wrong?

2. i have a big main slideshow on my start page. when it comes to the mobile version i would prefer no slideshow since it becomes as small as the thumbs. how can i make the main slideshow disapear only for the mobile version?

Posted 1 year ago #
Dude
Dude

Hi!

Can you post a link please?

Regards,
Peter

Posted 1 year ago #
mambo-mayer
Member

hi,
here it is:

http://www.monomayer.com

cheers

Posted 1 year ago #
Dude
Dude

Hey!

I asked Kriesi to look into it because we got some requests like this one and I'd like to have a "clean" solution here.

Regards,
Peter

Posted 1 year ago #
Kriesi
Key Master

Hey Guys! I have already contacted the author of the lightbox, since this is not a theme but ratehr a lightbox issue, having problems with the responsive meta tags that control the mobile device layout. I will keep you posted on updates ;)

Cheers
Kriesi

Edit: Just received an answer from Stéphane, the creator of the lightbox:

Good news for you, I do plan on making it work on mobile devices.

I am currently working on a new version which is a complete code rewrite to make prettyPhoto compatible in HTML5 / CSS3. You can see the current codebase here: https://github.com/scaron/prettyphoto/tree/4.0

The code itself is stable, it supports all the feature the old version supported. It's only missing a pretty theme and I need to finish the mobile support implementation.

As of right now, I do not know of any solution to support mobile on the older version. I really had to rewrite prettyPhoto to be able to handle such cases.

I'll let you know once it's done.

This means once the new lightbox has a skin and is fully tested we will update the theme to make them work fine on mobile devices!

Posted 1 year ago #