Topic: Build galleries dynamically/JSON [SOLVED]

Hi, sorry for what may be a noob question.  I just bought Pro today because I liked the demo.  I didn't even try out Lite before I bought.

I was looking at the Embedding Guide pages and was confused by some of the terms such as JuiceBoxBuilder, etc.

I plan to use this for a real-estate web site, and I'll have no access to the image files that will be displayed.  Customers upload them, and then I'll get a list of files and captions to display through a JSON web service.  As you can imagine this is all dynamic pages, so I won't be using any pre-processing software like JuiceBoxBuilder etc.

Will JuiceBox work for me or is it aimed at a different use case?

Re: Build galleries dynamically/JSON [SOLVED]

... was confused by some of the terms such as JuiceBoxBuilder

Just to clarify, JuiceboxBuilder is the desktop application which comes with Juicebox to allow you to create and edit galleries on your computer. More information about JuiceboxBuilder can be found here.

As long as you know the location of the images, then you can build the gallery manually following the instructions here. Step #4 is where you would enter each image URL and caption.
Rather than start from scratch with the sample 'web' folder, you could create a gallery using JuiceboxBuilder-Pro (with a couple of sample images) to customize the gallery as you like (using the configuration options on the 'Customize' tab) and then just edit the 'config.xml' file afterwards to change the <image> data.

If you know that all the images for a gallery are going to be in a certain folder, then you could use a server-side scripting language (such as PHP) to dynamically create the required XML file. An example of how this could be achieved can be found in this forum thread.

I do not know how you will be receiving the data but if it is always in the same format, then you could perhaps write a PHP script to convert what you are given into the correct format for a Juicbeox gallery's XML file.

I hope this points you in the right direction.

Re: Build galleries dynamically/JSON [SOLVED]

Steven wrote:

If you know that all the images for a gallery are going to be in a certain folder, then you could use a server-side scripting language (such as PHP) to dynamically create the required XML file. An example of how this could be achieved can be found in this forum thread.

Thanks.  That link is gold.  It describes virtually identically what I need to do.  Although all of my images aren't in the same folder, I do have control over the web service so I can supply the information necessary to generate a list of full image URLs (not relative) in order to create the xml.

Now in the future if you could support reading JSON instead of or in addition to XML, then this would be terrific.

Re: Build galleries dynamically/JSON [SOLVED]

I'm glad I was able to point you in the right direction.
Incidentally, you could also use DOM techniques to build up a gallery's XML file rather than just echoing the required output. Either would work fine.
If you plan to use PHP and want to use DOM techniques, then the following should get you started. You'll need to create loops for setting configuration options (as attributes to the opening <juiceboxgallery> tag) and for iterating over images (and also extract the relevant data from your source) but this should give you the required structure for a Juicebox gallery's XML file.

<?php
header('Content-Type: application/xml');

$dom_doc = new DOMDocument('1.0', 'UTF-8');
$dom_doc->formatOutput = true;

$settings_tag = $dom_doc->createElement('juiceboxgallery');

// Do this for each configuration option (loop)
// Need to define $key, $value
$settings_tag->setAttribute($key, $value);

// Do this for each image (loop)
// Need to define $image_url, $thumbnail_url, $link_url, $link_target, $image_title, $image_caption
$image_element = $dom_doc->createElement('image');
$image_element->setAttribute('imageURL', $image_url);
$image_element->setAttribute('thumbURL', $thumbnail_url);
$image_element->setAttribute('linkURL', $link_url);
$image_element->setAttribute('linkTarget', $link_target);
$title_element = $dom_doc->createElement('title');
$title_text = $dom_doc->createCDATASection($image_title);
$title_element->appendChild($title_text);
$image_element->appendChild($title_element);
$caption_element = $dom_doc->createElement('caption');
$caption_text = $dom_doc->createCDATASection($image_caption);
$caption_element->appendChild($caption_text);
$image_element->appendChild($caption_element);
$settings_tag->appendChild($image_element);

$dom_doc->appendChild($settings_tag);

echo $dom_doc->saveXML();
?>

Now in the future if you could support reading JSON instead of or in addition to XML, then this would be terrific.

I do not know how likely this is to be implemented but I would certainly encourage you to post suggestions for future versions in the Feature Requests thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers. Thank you.

Re: Build galleries dynamically/JSON [SOLVED]

Hi,

I built a web service method that serves up the xml response, similar to the question thread that you pointed me to.

I configured the JavaScript configuration to call this url in a very simple configuration that looks like so:

    new juicebox({
        debugMode: true,
        containerid: 'juicebox-container',
        configUrl: '/listings/getimages/1'
        
    });

In the debugger, I can see that the web page calls into the xml response page, which returns xml as expected.  When I manually capture the xml info a config.xml file and place it on the server and remove the configUrl setting, then the web page displays images.  So, the format of the xml must be correct.  But something isn't working as expected, because the page isn't showing images when it tries to load them dynamically through the configUrl setting.

A demo of my main page is located at https://wineryandvineyard.com/listings/view/1.  You can verify the configuration in the page source.

The xml image service is located at https://wineryandvineyard.com/listings/getimages/1

If you hit the xml page you can see that it returns a correctly formatted response using the content-type application/xml.

Appreciate any ideas you have on how to solve this.

Re: Build galleries dynamically/JSON [SOLVED]

I notice that you have taken the 'juicebox.js' file outside the 'jbcore' folder.
Juicebox needs all the files within the 'jbcore' folder to work correctly (and no files within the 'jbcore' folder should be renamed or moved).
Upload the complete 'jbcore' folder to your web server and load the 'juicebox.js' file from inside the 'jbcore' folder.
This should hopefully solve your problem.

Re: Build galleries dynamically/JSON [SOLVED]

Thanks Steven, appreciate the help.  That got it working perfectly.

Re: Build galleries dynamically/JSON [SOLVED]

That's good to hear.
Thanks for posting back to let me know.