Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #9807

    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?



    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 });


    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){

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


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

    //activates the prettyphoto lightbox

    //activates the hover effect for image links


    //activates the prettyphoto lightbox

    //activates the hover effect for image links


    Haven’t tried but thanks for the fast response!


    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?



    Can you post a link please?





    here it is:





    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.




    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 ;)



    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!

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

The topic ‘Mobile Lightbox’ is closed to new replies.