Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #7874

    Hi everyone, I’m having some issues getting this theme to work with Next GEN Gallery (NGGallery) 1.9.0. When I insert a gallery shortcode, the gallery appears and works properly on Desktop clients and iPad, however the full size gallery images will not load on iPhone.

    How do I fix this? I have tried disabling the NGGallery style sheets and have not had any success. I have over 150 Image Galleries with 900+ photos and I would like to use Next GEN Gallery.

    Here is a sample page that I am working on:, if you open it on your iPhone, you will experience the same issue.


    Has anyone figured out why the gallery is not displaying properly on iPhone? The strange part is that it displays galleries properly on one of my Portfolio posts:, but does not display properly on all of the other posts:

    I am also running into the same issue if I use the built in wordpress gallery’s as well. Any ideas what would be causing the issue? I’m running a fresh wordpress install (v3.3.1).



    I reported your issue to Kriesi because I can’t reproduce the error (I don’t own an i-phone,etc.).



    Nice looking homepage!

    I wonder were you got hold of the “telephone.png” you use on your frontpage?

    / John


    Hey Dude, I think I may have tracked down some things that cause the issue. .jpg images that I created in Google Picasa seem to cause issues. .jpg images that I created in Photoshop RAW Image Viewer seem to work fine.

    The issue might also be related to the image size, I think images constrained to 640×480 seem to work better than images constrained to 800×600. I’m going to try to do further troubleshooting with the image size to see if that really makes a difference.

    Thanks for forwarding this on to Kriesi.


    It looks like the issue is caused by exporting my images from Google Picasa. What is strange is that all of my old images work perfectly with my old WordPress site, however when using the Propulsion theme, they break. Here is a sample of the files that I am using:

    – Picasa JPG Export (breaks in iPhone):

    – Photoshop JPG Export (works on iPhone):

    – Comparison of file properties, could the resolution be the property that is breaking this?


    Strange – maybe try to regenerate the thumbnails with:


    Hey Dude, the regenerate images doesn’t have an impact on the gallery since it is running through NextGen Gallery. I just uploaded a gallery of images using the WordPress gallery and the iPhone can’t open it either.

    I am currently using the Twicet theme ( with the same images using NextGen Gallery and everything has worked perfectly on desktop and the iPhone.

    Does Kriesi have any ideas? It’s kind of frustrating to purchase a theme that is designed for mobile use, yet the gallery feature doesn’t load the images on an iPhone. Can you please escalate this?

    Thanks Dude


    After many days of troubleshooting, I have found the issue and I think it is a bug that could use a fix (hopefully it’s an easy fix). When viewing a image in a WordPress Gallery or Next Gen Gallery that has a long title, ALT tag or description defined, this will cause the height of the PrettyPhoto pop-up window to exceed a certain size. When the designated size is exceeded, the iPhone will not load the photo in portrait or landscape mode. The symptom you will see is the “loading” animation and Safari on iOS basically freezes.

    To get around this, I have to do three things:

    1.) Disable the image title: To do this, add: show_title: false to line 835 of js/avia.js which loads the PrettyPhoto application. My revised line looks like this:

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

    2.) Keep image descriptions as short as possible. I found keeping them under ~68 characters seemed to help, but if I have a long word that is forced to go to a new line, 68 characters may be too long. If you choose not to disable the title as described in step 1, then your description must be even shorter since you only have a predetermined amount of pixels to use between the title, image and description before it breaks.

    Is it possible to implement a patch that would truncate long titles and descriptions when displaying images on smaller devices? When displaying images on larger devices (e.g. iPad, Desktop), this is not an issue since the since you have a larger amount of screen real estate available to you.

    Thanks in advance for your help.


    I’m not sure if there’s a clever solution. The main problem is to detect all mobile devices. I know that there’re some scripts out there but I’m not sure how reliable they are. Then you could use a snippet like:

    alt: jQuery(this).attr("alt").substring(0,58)+"...";

    to shorten all image alt tags.


    Thanks for the tip Dude, I can appreciate the complexity of detecting the device. Where would I place that jQuery string? Is there some way I could make the modification (including the modifications I made) using a Child Theme instead of messing with the Framework code?


    I’d place it somewhere in js/avia.js (bottom or top). Make sure that you call this function inside a document ready function:

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

The topic ‘Gallery images will not load on iPhone’ is closed to new replies.