Topic: Embedded galleries in wordpress using infinite scroll jetpack plugin

Hello,

I am currently evaluating Juicebox on my Wordpress blog and I am very happy with your solution. I was ready to buy the pro version in order to remove the 50 photos limit, to be able to access additional options, to translate the "View gallery" in the splash mode and to support you also!

Unfortunately, I discovered an issue when using the infinite scroll Jetpack plugin coming from Wordpress/automattic team (See official page: http://wordpress.org/plugins/infinite-scroll/). If the embedded gallery in on the first page, everything is fine. If the embedded gallery is on another page, reached by scrolling down, the gallery is not loaded. It seems that we would have to use sort of callback from infinite scroll plugin to run your stuffs when the jetpack plugin is displaying new posts.

Note that I am not using your WP-juicebox wordpress plugin because my photos are not in the Wordpress media gallery or in Nextgen gallery (photos are outside of my wordpress blog). It may be possible that your plugin has the same issue but I did not check.

To give you an example:

  • You can see a working gallery in the first page of my blog: http://www.monpetitblog.net/ (post #5 when writting theses lines, called "Mise en ligne de la galerie du mois de novembre 2013")

  • Then a working gallery on page 3 of the blog when accessed directly: http://www.monpetitblog.net/page/3/ (post #6 when writting these lines, called "Mise en ligne de la galerie du mois de septembre 2013")

  • Then please try to start from the main page (http://www.monpetitblog.net) then scroll down in order to reach this "September" post and you will see that the gallery is not loaded when using infinite scroll approach.

A priori, we just need to use infinite scroll plugin triggered event, playing with few lines of basic Javascript/Jquery code. This part is documented in "JavaScript Events" section of the plugin support page (end of the http://jetpack.me/support/infinite-scroll/ page)  It should be easy for you but I do not know how to do it on my side.

Is it possible for you to look at this infinite scroll issue?

Let me know.

Thank you in advance.

Regards.

Re: Embedded galleries in wordpress using infinite scroll jetpack plugin

Your gallery's height is currently expressed as a percentage.
This will be a percentage of the gallery's parent container but, when the page is first loaded, the gallery's parent container is not visible and Juicebox may see its height as being 0px. 60% x 0px = 0px which may explain why the gallery is not displayed.

Instead, try expressing your gallery's height as a fixed pixel value (e.g. 600px) to see if this makes a difference.

If this does not help, then try also adding the gallery's height as inline CSS to the gallery container div, ie.:

<div id="juicebox-container" style="height: 600px;"></div>

... similar to the 'Using Percentage Heights' suggestion here.

Also, as you have multiple galleries which may be displayed on the same page, make sure you embed each gallery into a container with a unique id.

For example:

<script type="text/javascript" src="http://www.monpetitblog.net/galerie/2013_11_juice/jbcore/juicebox.js">

<script type="text/javascript">
new juicebox({
baseUrl : 'http://www.monpetitblog.net/galerie/path_to_gallery/',
containerId : "juicebox-container1",
galleryTitle: "Sept.'13",
galleryWidth: "100%",
galleryHeight: "600",
});
</script>
<div id="juicebox-container1" style="height: 600px;"></div>

<script type="text/javascript">
new juicebox({
baseUrl : 'http://www.monpetitblog.net/galerie/path_to_another_gallery/',
containerId : "juicebox-container2",
galleryTitle: "Sept.'13",
galleryWidth: "100%",
galleryHeight: "600",
});
</script>
<div id="juicebox-container2" style="height: 600px;"></div>

Incidentally, as you have WP-Juicebox activated, the 'juicebox.js' JavaScript file will be automatically loaded on your pages so there is no need to include the file in each and every gallery you manually embed.
(If you were to deactivate WP-Juicebox, you would need to include the file in each gallery's embedding code.)

3 (edited by biwiz.it 2013-12-24 09:54:57)

Re: Embedded galleries in wordpress using infinite scroll jetpack plugin

Steven,

Thank you very much for your responsiveness.

I replaced percentages with absolute values for gallery width and height, I added inline CSS and I still had the issue with the second gallery when scrolling down (empty post).

Everything seems better when I change the container ID in order to make them unique.

But I have several new issues you can observe on my blog:

  • Even if the september gallery (page 3) seems OK within the post when scrolling down from top, it shows the november one when expanding. Same behavior with Chrome and Firefox (in fact, only iPhones and iPad are working fine).

  • After a refresh of my web browser (=clearing history), when I expand then close the september gallery, I am sent back to the top of my blog (instead of the corresponding post, which is not so good) and I can't scroll at all (=window blocked, which is very bad). Same behavior with Chrome and Firefox.

  • After clearing history, when I first expand and close the november gallery, the september one is not well displayed in the post when scrolling down. Same behavior with Chrome and Firefox (iDevices are working fine).

  • With iDevices, when one of the new loaded post contains a gallery, it will send us to the top of the blog, while loading it.

  • With iPhone 3GS, once a gallery has been expanded, load of new posts is not working anymore (=no scrolling down anymore). I would say this issue is less important than the others.

Do you have any idea about these issues?

Thank you in advance.

Regards.

Re: Embedded galleries in wordpress using infinite scroll jetpack plugin

If you were using Juicebox-Pro, you could set expandInNewPage="TRUE" which would force the gallery to expand in a new page (instead of expanding it in the page into which it is embedded). This should avoid the problem of returning to the same point in your infinite scroll page. Please see here for more details.
Unfortunately, expandInNewPage is a Pro option only and is not available to Juicebox-Lite (the free version).

only my iPad is working fine

This is because, in Juicebox-Lite, expandInNewPage is set to AUTO and on iOS devices, expanded galleries are opened in a new page by default. (Please see the link above for details.)

Re: Embedded galleries in wordpress using infinite scroll jetpack plugin

Steven,

Thanks for your reply. I had this expandInNewPage workaround in mind for the first three points.

Do you have any idea for the next points, in particular:

  • With iDevices, when one of the new loaded post contains a gallery, it will send us to the top of the blog, while loading it.

It seems that a post containing a gallery, when loaded during a scroll, is firing a refresh of the page and as a consequence the web browser has to go at the beginning of that page.

Do you know how we could avoid this issue?

Thank you in advance.

Regards.

Re: Embedded galleries in wordpress using infinite scroll jetpack plugin

In order to solve the issues you are experiencing, perhaps you will need to delay the loading of the Juicebox galleries on the page until the gallery's parent containers are visible.
As you previously mentioned:

It seems that we would have to use sort of callback from infinite scroll plugin to run your stuffs when the jetpack plugin is displaying new posts.

If you could somehow hook into the Infinite Scroll plugin and run a custom JavaScript function when the appropriate containers are displayed on screen, you could either reassign dimensions to the gallery (using JavaScript and CSS) or use the Juicebox-Pro Pro API method showGallery() to try to force the gallery to be displayed. Please note that the Juicebox-Pro Pro API is available to Juicebox-Pro only (and not to Juicebox-Lite).

Even if the september gallery (page 3) seems OK within the post when scrolling down from top, it shows the november one when expanding. Same behavior with Chrome and Firefox (in fact, only iPhones and iPad are working fine).

Just for the record, I do not see this when viewing your web page for myself. Expanding the September gallery displays the September gallery (not the November gallery) in both Chrome and Firefox.

With iDevices, when one of the new loaded post contains a gallery, it will send us to the top of the blog, while loading it.

Juicebox itself does not fire a page refresh when a gallery is loaded so I am not sure what might be causing this.
Does this happen in Chrome on your iDevice(s) or just in Mobile Safari?
I notice that the code on your webpage does not validate correctly. Perhaps fixing the HTML errors on your web page will make a difference.
Try running your web page's URL through the W3C Markup Validation Service and fix the errors reported.
Even if this does not help, we can then eliminate HTML errors as a possible cause of the issues you are experiencing.

7 (edited by biwiz.it 2014-01-12 14:22:15)

Re: Embedded galleries in wordpress using infinite scroll jetpack plugin

Steven,

Thank you for your reply. All the warnings given by the W3C validation service are "Bad value xxxx for attribute rel on element a: The string xxxx is not a registered keyword or absolute URL.", which is a well-known non-issue coming from Wordpress core code.

It is good to know that Juicebox itself does not fire a page refresh. But when I remove the September gallery post, "back to top" issue does not happen anymore when reaching the page which contained that gallery. The issue is for all mobile devices (iPhones, Sony, etc...) and all web browsers. To make it weirder, it seems OK on iPad...

Regards.

Re: Embedded galleries in wordpress using infinite scroll jetpack plugin

The only oddity I see on your web page at the moment is that your embedding code (for your November gallery) is enclosed in CDATA tags and that the closing tag has its final > character escaped as &gt; in the following line:

// ]]&gt;</script></p>

It may (or may not) make a difference but try either replacing the line above with:

// ]]>
</script>
</p>

... or completely remove the CDATA tags around the JavaScript code.

The issue is for all mobile devices (iPhones, Sony, etc...) and all web browsers. To make it weirder, it seems OK on iPad...

Is it OK in both Chrome and Mobile Safari on the iPad? What iOS does your iPad run? Perhaps you can upgrade the version of iOS on your iPhone (if it is not already up-to-date) to see if this makes a difference. (By checking both Chrome and Mobile Safari in both an iPhone and an iPad and checking which version of iOS each device is running, you may at least be able to find a pattern within iOS devices.)

As you seem to be embedding your galleries manually (rather than using WP-Juicebox), then perhaps a workaround would be to upload your gallery folders to your web server and include links to them within your posts (rather than embed them directly in your posts).

9 (edited by biwiz.it 2014-01-12 23:02:19)

Re: Embedded galleries in wordpress using infinite scroll jetpack plugin

Thanks for the reply. I removed the "&gt;", then removed the CDATA tags but nothing changed.

Following your recommendation, I decided to use WP-Juicebox Wordpress plugin applied on a fake October gallery ("Mise en ligne de la galerie Juicebox du mois d’octobre 2013", page 2) by using some images from my NextGEN galleries. In the same time, I removed posts related to November and September galleries, to put embedded galleries out of the story. And the same behavior happens on mobile devices when reaching page 2 while scrolling down: page is refreshed and web browser goes to top.

For desktop, laptop and iPad 1 (iOS 5.1.1), it works fine (Safari or Chrome) but it is not OK for iPhone 3GS (iOS 6.1.3) or iPhone 5. I could update this one from iOS 6 to iOS 7 but I noticed same "refresh" behavior on other no-iOS mobile phones...

Note that for some trials, I deactivated all plugins but Jetpack (for infinite scroll) and WP-Juicebox so it means that something goes wrong when they are used together. Note also that my theme is Twenty Ten, a previous default theme delivered with Wordpress. Jetpack plugin is written by the Automattic guys and I am sure it worths trying to make your galleries work fine (via plugin or embedding methods) with their infinite scroll. I am so close to a perfect solution using Pro version that I still hope you will find another area of investigation...

Thank you in advance.

Regards.

Re: Embedded galleries in wordpress using infinite scroll jetpack plugin

I have been able to replicate the problem you describe and it seems to be directly related to the use of the Splash Page.

When a Juicebox gallery is displayed on a mobile device, Small Screen Mode is used and, by default, the Splash Page is displayed. This may not happen on an iPad with a larger screen (where Large Screen Mode may be used) which is perhaps why you do not see the problem on your iPad.
(For more information about Screen Modes, please see here.)

If I set showSplashPage="NEVER" (to prevent the Splash Page from being displayed) or screenMode="LARGE" (to display the Large Screen Mode version of the gallery which, by default, does not display the Splash Page), the infinite scroll page does not jump back up to the top.

I have contacted the developers regarding this issue and hopefully it can be fixed in a future version of Juicebox but in the meantime, a workaround would be to prevent the Splash Page from being displayed (by setting either showSplashPage="NEVER" or screenMode="LARGE").
Please note that both of these configuration options are available in Juicebox-Pro only and are not supported in Juicebox-Lite (the free version).

Re: Embedded galleries in wordpress using infinite scroll jetpack plugin

Thank you very much for your feedback! Another reason for me to buy the Pro version. Of course it will be a good thing to fix this splash mode issue.

Thanks again for your excellent juicebox-lite support.

12 (edited by biwiz.it 2014-01-15 23:16:09)

Re: Embedded galleries in wordpress using infinite scroll jetpack plugin

I am a Pro user now! ;-)

So I am able to create November (page 1), October (page 2) and September (page 3) galleries using expandInNewPage="TRUE" and showSplashPage="NEVER" options. Refresh does not happen anymore but I have some concerns about expandInNewPage...

  • What I can see is that the option does not allow us to open a new tab but the gallery will stay on the same page in some way. As a consequence, I still see a weird display of my September gallery post (main image is very little, with no thumbnails) after I opened November gallery first (from the corresponding post). Note that October post has a good display... To make it even more complex, this issue happens within Chrome and Safari but everything seems OK with Firefox (all are iMac version).

  • On iPad, after closing a gallery, I am often in a situation in which the infinite scroll won't work anymore within the page...

  • Is there any option to open the gallery in a new tab? Then closing the gallery would mean closing the tab, and the main website would appear again after that. I am sure it would make my issues disappear...

Thank you in advance.

Regards.

Re: Embedded galleries in wordpress using infinite scroll jetpack plugin

What I can see is that the option does not allow us to open a new tab but the gallery will stay on the same page in some way.

When using expandInNewPage="TRUE", Juicebox will open the expanded gallery using a new page (the 'full.html' page within the 'jbcore' folder) but within the same tab/window. It is not possible to expand the gallery in a different tab/window.
It looks like something on your web page (most likely some JavaScript) is preventing WebKit browsers (Chrome, Safari and Opera) from opening the gallery using the Fullscreen API, even though your gallery uses useFullscreenExpand="TRUE".
Unfortunately, your web page loads over 20 external JavaScript files and also contains several internal <script> sections so troubleshooting the page may be quite difficult and some trial and error may be required to find the cause of the problem.
I would start by deactivating all plugins to see if the gallery expands as expected and then reactivate your plugins one-by-one (checking the gallery each time) to see if you can find a conflicting plugin. (The problem may or may not be related to the Jetpack plugin.)

I still see a weird display of my September gallery post (main image is very little, with no thumbnails) after I opened November gallery first (from the corresponding post).

I have expanded your September gallery (after expanding and closing your November gallery) in Chrome 32 on my PC but I do not see the issue you describe (though the gallery does not use the Fullscreen API, as I noted above). Perhaps the problem is isolated to WebKit browsers on the Mac.
Try clearing your browser's cache before reloading your web page to ensure that your browser is fetching and using the most recent gallery files from your web server. If your galleries are set up identically (double-check the settings for each gallery), then I would expect them to display and function identically. If your browser is caching and using older gallery files, then this might explain the problem you are reporting.

I notice that when I go to my main page, the http://www.monpetitblog.net web address is replaced by http://www.monpetitblog.net/#1.

Your gallery uses Social Sharing (Facebook) and the # is required to give each image in your gallery a unique URL.

On iPad, after closing a gallery, I am often in a situation in which the infinite scroll won't work anymore within the page...

Again, this sounds like there may be some conflicting JavaScript on your web page causing this problem. (Although, this time, it sounds like it may be a direct conflict between Juicebox and the Jetpack plugin.)
Deactivating and reactivating your plugins might help locate the source of the problem.

Is there any option to open the gallery in a new tab?

A gallery cannot be expanded in a new tab/window but a possible solution would be to simply include links to your galleries in your WordPress posts. You could essentially create your own Splash Pages which would consist of an image (or just text) which link to 100% x 100% galleries in new tabs/windows by using the target attribute of the HTML <a> tag.
A text link to a gallery would look something like this:

<a href="/gallery/index.html" target="_blank">Click here to open gallery in new tab/window.</a>

You could then use the Back Button in your galleries to allow users to return to the original web page.