Topic: expand button generates new set of images

Hello and thanks for this great product. I just upgraded from v1.3.3 to v1.4.4.2 and unfortunately I see a different behavior using the expand button.

I use juicebox in embedded mode and I have configUrl set to load my php file to dynamically generate 8 images randomly from a file system for the gallery. In v1.3.3 the expand button worked as expected: the same 8 images are accessed in expand mode so the user can see the same expanded images. In v1.4.4.2 the expand button produces a new set of 8 images. When I return from expand mode I get the original 8 images. If I hit the expand button again, I again get 8 new images (different from the other 8 new images from the first time I used the expand button). So it seems that juicebox is now executing my configUrl file again when the expand button is pressed?

So that you can look at this I have temporarily enabled the correct features on my homepage, http://mountainhandbook.com. This behavior is identical in the latest Chrome (47.0.2526.106) and Firefox (42.0).

Any insight into this would be much appreciated. I searched your forums and didn't see anything relevant to this, which kind of surprised me.

Best regards.

Re: expand button generates new set of images

I have written a PHP script to select a certain number of images from a pool of many and display them in a random order but I have not been able to replicate the problem you describe.
The images displayed (and their order) change each time the gallery is displayed (just like your gallery) but the images retain their order when the gallery is expanded.
(I have also tried setting expandInNewPage to AUTO, TRUE and FALSE with the same results each time.)

From your own scenario, it certainly looks like Juicebox refers to the XML file (seeing a new set of images) when the gallery is expanded.

I think the problem may be due to web server cache settings.
If your browser has cached the XML file, then Juicebox should be able to refer to the cached version and display the same images in the expanded gallery as in the normal version.

However, if your web server does not allow browsers to cache files and forces browsers to fetch files from the server each time they are required, then Juicebox would have no option but to use a freshly-generated XML file with a new set of images when the gallery is expanded.

Please check your web server's Cache-Control headers. Allowing browsers to cache files may solve your problem.
Try adding the following code to an .htaccess file in your root directory (as long as you have an Apache web server).

<IfModule mod_headers.c>
    Header set Cache-Control "max-age=86400"
</IfModule>

Alternatively, try setting the header via PHP (at the top of your 'config.php' file) with the following code:

header("Cache-Control: max-age=86400");

I hope this helps.

Re: expand button generates new set of images

Steven, thanks for the prompt reply. This is just a quick reply that I'm working on it. I thought the issue could be caching but this is tricky stuff to get right. So I'm trying to figure out the right combination to get what I want since, yes, I can alter behavior with the header control - but this interacts also with the browser's cache clearing with page refresh, F5, etc.

I'm experimenting with all this now and will post again soon. The short answer is that this does indeed preserve the expand button images.

Re: expand button generates new set of images

Thank you for keeping me updated.
I'm glad I was able to at least point you in the right direction.
I hope you can find a combination of settings that gives you the balance and functionality that you are looking for.

Re: expand button generates new set of images

Hi Steven, here's a lot of description.

I decided to first try another approach. If caching were an issue I reasoned that if I could encompass more of the juicebox code with my custom code I would stand a better chance. So I eliminated the configURL option and, instead, used my php code to actually generate a real config.xml file and the juicebox declaration. My html file looks something like this (much simplified and only showing relavant code):

<script src="jb_gallery/jbcore/juicebox.js"></script>
<?php include("jb_gallery/config.php"); ?>  <!-- for v1.4.4.2 -->
<div id="jb_container"></div>

This version of config.php creates a new config.xml file every time (with random images from server side) and the following juicebox code:

<script>new juicebox({
    baseUrl : 'jb_gallery/',
    containerId : 'jb_container',
    galleryWidth: '350px',
    galleryHeight: '350px',
    backgroundColor: '#222222'
});</script>

This solution almost worked. The expand button worked just fine but when I repeatedly refreshed my browser page every once in a while the gallery didn’t display anything - it was just black and there was no rotating juicebox wheel. I suspect that there is some synchronization between the juicebox code and my server side calls that isn’t happening. Without further insight into this, such as a handshake condition between the juicebox code and my config.xml file generation, there doesn’t seem to be more that I can do in this direction.

You said that you could not replicate my problem with your random photo php generator code. But were you doing server side calls like me? I generate random photos via server side file system and data base access. When I was using 1.3.3 this worked perfectly: every time I refreshed the page I would get 8 new photos and every time I used the expand button I would expand those same 8 images. All browser settings were default and all sever side settings were default (no special cache instructions). If all I do is switch to 1.4.4.2 I get the aforementioned problem behavior with expand. What changed with juicebox?

I did play around with caching as this just may be the state of affairs with the newer editions of juicebox. With your code in my php file (using my original configURL option setting) the expand button works. If I continually refresh the page, occasionally I’ll get 8 new images; otherwise, it’s the same 8 images. Likewise I get this same behavior if I do “F5” or “Ctrl+F5”. In all cases expand works just fine but, ideally, I would like to get 8 new images consistently when I refresh like with 1.3.3.

Any ideas how I can make this work better? I do appreciate the help so let me know if you need more information.

Re: expand button generates new set of images

Without further insight into this, such as a handshake condition between the juicebox code and my config.xml file generation, there doesn’t seem to be more that I can do in this direction.

When using a PHP script as a configURL, Juicebox should not use the dynamic XML file until it is complete. As long as the PHP script is generated in a timely manner and is complete with no syntax errors, the gallery should display OK.
An incomplete dynamic XML file (perhaps due to a server timeout) may produce a blank area where the gallery should be.

But were you doing server side calls like me?

I just had a folder of 18 images on my server and had a PHP script randomize the order of them and then display the first 8. I did not use a database.

What changed with juicebox?

I suspect (but am not certain) that the problem may be a side-effect of the following fix from v1.4.3:

FIXED - Image order changes on expanding gallery when randomizeImages="TRUE"

(Please see the Version History for a full list of changes between versions.)
Prior to v1.4.3, if randomizeImages="TRUE", the image order would change when the gallery was expanded (whether browser caching was enabled or not). This was unwanted behavior which really had to be fixed.

I think you may need to have your web server allow browsers to cache files in order for your scenario to work correctly.
If your PHP script did not choose images from a pool of many but just randomized a complete set of images, then you could set randomizeImages="TRUE". I realise that this will not work with your scenario but I thought I should point it out in case it helps and somehow points you towards a suitable solution or workaround.

Re: expand button generates new set of images

FWIW I performed a bunch of experiments. My working baseline is enabling caching in my php file and using the configURL option. Results as described above: expand button works but images don't necessarily refresh with browser page refreshes.

1) I moved the caching enabling to .htaccess in my server root instead of the php file. Results were identical, no change.
2) I tried enabling the randomizeImages option just for the heck of it and, other than having the images being truly randomized, the results were identical. Again, no change.
3) Again just for the heck of it, I enabled randomizeImages but this time I disabled the caching in my php file. This time the expand button failed as before by generating new images.

So I think I'll continue using 1.4.4.2 with the caching option that you provided. If anyone of my forum users complains I can always go back to 1.3.3 but I doubt there will be an issue. Interesting problem but not a game changer - just wish it operated the same as 1.3.3.

Thanks for the suggestions and help Steven. It is appreciated!

Re: expand button generates new set of images

1) I moved the caching enabling to .htaccess in my server root instead of the php file. Results were identical, no change.

That's to be expected. They should both result in the same behavior (so at least there's some consistency and predictability there).

So I think I'll continue using 1.4.4.2 with the caching option that you provided.

This certainly seems to be the best solution (and the one that I would use myself).

If anyone of my forum users complains I can always go back to 1.3.3 but I doubt there will be an issue.

I agree. I think it's unlikely that anyone will notice or report any issues to you.
Worst case scenario, you could revert to v1.3.3 (as long as your gallery is not affected by any of the bugs which have been fixed since v1.3.3).

Thanks for the suggestions and help Steven. It is appreciated!

You're welcome.

Re: expand button generates new set of images

I just noticed this thread so I added this line to my code:

...
configUrl : 'config.php?nocache=' + new Date().getTime(),
...

Now I have everything working the way I want! Specifically, refreshing the browser's page displays new images. Correct me if I'm wrong, here's my understanding of what's happening.

(1) Adding the line

header("Cache-Control: max-age=86400");

to my config.php file allows it to be client-side cached so that it only gets referenced once - either by the juicebox js so the expand button works as advertised or, say, the browser's back button re-displays the same images.
(2) Adding the time stamp to a bogus variable being passed to my config.php file says that when the browser's refresh button is pressed, a new time stamp is generated and this kicks off a new server-side update reuest, effectively loading new images.

This all seems to play well with the juicebox js code. Do you think it'll work ok or do you think it's problematical? Note that I have tested this on the three major browsers Firefox, Chrome, and Explorer with the same correct behavior on each.

Re: expand button generates new set of images

Now I have everything working the way I want!

That's great!
I see no problem with your logic and I would expect this to work fine (as confirmed by your own tests).
I'm glad you've got it working as you like.
Thank you for sharing your solution!