Topic: Considering using JuiceBox: PHP to implement Gallery

I am interested in using JuiceBox as my gallery on my website pages, particularly as it it supports multiple devices.  I have currently been using Colorbox, but that does not work very well with mobile devices.

I construct the page (from a user selection or search) containing the gallery I wish to display, with PHP and CURL access to a remote site to get the url of the images and associated Title and Caption info I wish to display.

Is there a SIMPLE guide to how this can be achieved ?

I am assuming I will have to create the appropriate javascript code, to your format and have your relevant include files on my server, where the webpages are written and executed.  The images as a result of a query can be in different directories.

Thanks

mcl

Re: Considering using JuiceBox: PHP to implement Gallery

You can certainly use a PHP file (instead of a static XML file) to dynamically generate a Juicebox gallery's XML file on-the-fly at the time the gallery is displayed/viewed.
An example of how this can be achieved can be found in the answer to Query #3 in this forum post.
Essentially, you would use a PHP file instead of a traditional static XML file and point your Juicebox gallery towards it using the configUrl configuration option.
Your PHP file would need to generate the XML code using the same structure as a standard 'config.xml' file (see the 'juicebox_lite_1.3.2/web/config.xml' file from the Juicebox-Lite download zip package for an example) but you could pull in images and captions from your chosen source by modifying the code as required.

Re: Considering using JuiceBox: PHP to implement Gallery

Thanks for the reply.

I am still a bit confused by this XML file logic.  I can understand what the contents are, but I am at a loss to see how the XML file is associated with the web page containing the gallery.  Will I have to generate a different XML file for every gallery used  and how do I name the files, or will I have to use some form of local storage or sessionID.

I think I better download "JuiceBox" and look at the code, to see how it all links together, as I had only tested your DEMO pages to see the results on different devices and most of your documentation, seems to be about generating a gallery in a directory.

As I said previously, the images that make up my gallery can come from different directories.

Thanks again.

mcl

Re: Considering using JuiceBox: PHP to implement Gallery

I can understand what the contents are, but I am at a loss to see how the XML file is associated with the web page containing the gallery.

how do I name the files

The web page containing the gallery will contain the gallery's embedding code (as found here).
You would use a configUrl within the embedding code to point towards your PHP file so that Juicebox can find it, e.g.:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
configUrl: 'path_to_php_file/config.php',
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Will I have to generate a different XML file for every gallery used

The XML file is where the list of images and captions is stored. Therefore, each gallery needs its own XML file (otherwise all galleries would display the same images and captions).
However, you could use the same PHP file to generate the XML data for different galleries by adding query string parameters to your configUrl to differentiate between galleries and so that the PHP file knows which gallery's information to gather, e.g.:

configUrl: 'path_to_php_file/config.php?id=12',

In the example above, you would get the 'id' within the PHP file (using $_GET['id']) and the PHP file would conditionally gather information from your chosen source depending on this value.

I think I better download "JuiceBox" and look at the code, to see how it all links together

This would be a good idea. The principle is the same for Juicebox-Lite as it is for Juicebox-Pro so download Juicebox-Lite and try it out for yourself.

most of your documentation, seems to be about generating a gallery in a directory

A gallery's files are usually all stored in the same directory for ease of use. Your gallery's files do not all need to be in the same directory but if you move them, then you may need to point towards them using configuration options such as configUrl, baseUrl and themeUrl. A list of these Embed Options can be found here.

the images that make up my gallery can come from different directories.

The images and thumbnails for the gallery can be anywhere on your web server and they are pointed to via the imageURL and thumbURL entries in the XML file (which would need to be determined by your PHP file).

This FAQ (and the links within it) may also help:
Can Juicebox handle a custom data source, for example RSS or Instagram?

Re: Considering using JuiceBox: PHP to implement Gallery

Steven,

Thanks for your reply - it was extremely helpful.

I have downloaded JuiceBox Lite and looked at its workings.  It would not run with Chrome locally, but Firefox was OK.

I am very confused and probably naive about the XML.  My basics in HTTP are also very limited.

If I have understood it at all.  You are generating some XML within the page and not as I thought creating a file.

All my HTML page is generated from a PHP script, so if I output an XML block as per your example with the image details, in my whole page script, the Juicebox script will find that XML and act accordingly with the images listed.

My PHP would do the following

Build basics of page
Get List of Images to be shown
add Script juicebox.js
Create overrides for CSS changes to any 'jb' elements
echo XML data block with list of images
add 'new juicebox' script at appropriate point in HTML file, along with any parameter settings.
Complete rest of page

I may not need to reference configURL or set it to "" and I can set baseURL to ""

If I have got the logic/flow right I will try to write some php, which will achieve the required result

Thanks again

mcl

Re: Considering using JuiceBox: PHP to implement Gallery

It would not run with Chrome locally, but Firefox was OK.

Please see this FAQ:
When I view my gallery locally in Google Chrome, I see the message "Juicebox does not display locally in Google Chrome". Why?

You will need to create a completely separate PHP file to generate the XML data for your gallery. This will have nothing to do with your other PHP file which creates your main HTML page and which will include your gallery's embedding code.

The PHP file which generates the XML data will be processed by the server and will output only the XML data required for the gallery. It is this file that you will need to point to within your gallery's embedding code with a configUrl (otherwise, Juicebox will not know where to find the PHP file).

Re: Considering using JuiceBox: PHP to implement Gallery

Steven,

Many thanks.

I think the mist has finally cleared.

I will need to create the gallery data for the XML in my original PHP and save that in some way (maybe a session variable) and then create a separate config.php to access that saved XML and pass it to the required gallery.

Is a session variable the best way of achieving this process  or is there some other mechanism you could suggest.

Thanks

mcl

Re: Considering using JuiceBox: PHP to implement Gallery

In all my posts above, I have recommended using a separate PHP file to generate the XML data (so that the code can be accessed and reused from different pages) using the following process:

Your 'original' PHP file would create your main web page including your gallery's embedding code. Within the embedding code you would point towards a different PHP file (using the configUrl configuration option) which would generate the XML data. Once processed by the server, the data output by this PHP file would look just like an XML file to a browser.
The PHP file which would generate the XML data would look something like the file in this forum post.

However, as you suggested, an alternative would be to use a session variable using the following process:

Have the XML data generated in your 'original' PHP file and save the data as a long string in a session variable.
Point towards a different PHP file (using the configUrl configuration option).
In this PHP file, you would simply output the contents of the session variable. The entire PHP file would look something like this:

<?php
header('Content-type: application/xml');
session_start();
echo $_SESSION['xmldata'];
?>

Both methods will work fine but you do need to have your XML data in a separate file (whether it is generated by the file itself or simply passed to the file in a session variable).
It would not be possible to generate the XML code in your 'original' PHP file (which generates the page containing the gallery's embedding code) and pass it directly to the gallery.

Re: Considering using JuiceBox: PHP to implement Gallery

Steven,

Another excellent reply - thank you for your patience.

My difficulty has been, in that I needed to create a different XML file, for every refresh of my main and sole page and I could not see how I could write all those different files to the site with the same name.

It is now clear I can achieve this with a dynamic generation of the XML file from a session variable, which is only applicable to that browser's session.

Your suggested php code is much simpler than I would have achieved.

Many, many thanks

mcl