Juicebox v1.5.1 Released!

dswift · 2012-06-03 17:26:59

dswift
Member
Offline

Registered: 2012-06-03
Posts: 1

Topic: Can Juicebox do this?

1. Sort images from metadata fields?

2. Display select metadata: captions, filenames et al?

3. Update a site on the fly by adding images to a folder/directory, without entire re-export?

I use Slideshow Pro Director which does the above. It renders lovely HTML5 but when it senses mobiles devices. Otherwise SSP uses Flash which is the reason I am looking for an alternative.

Its strongest feature: once I create a site (album, collection, whatever) I can add, delete and re-order images in the background.

I apologize if these questions are answered in FAQs and elsewhere. I spent a while searching.

Steven @ Juicebox · 2012-06-03 19:48:02

Steven @ Juicebox
Juicebox Support Team
Offline

Registered: 2012-04-24
Posts: 5,924

Re: Can Juicebox do this?

1. Sort images from metadata fields?

You could use a Flickr account as a source of images by using the following settings in your gallery's XML file:

useFlickr="TRUE"
flickrUserName="your_flickr_username"

Then, you could use the flickrSort Pro Option which gives you some control over the order in which the images are displayed.
The Juicebox Flickr options can be found here.

2. Display select metadata: captions, filenames et al?

It is not yet possible to extract metadata for use as the image's <title> or <caption>.
Currently, it is possible to use the image's File Name for the <title> and/or <caption> and, additionally, the linkURL for the <caption> (via JuiceboxBuilder's 'Images -> Titles' and 'Images -> Captions' drop-down options at the top).

3. Update a site on the fly by adding images to a folder/directory, without entire re-export?

If using Flickr as a source of images, you could upload new images to your Flickr account and they would be displayed in your Juicebox gallery next time it is viewed without having to modify any gallery files.
Alternatively, you could use the following PHP code as your gallery's XML file. It will read and display all images in a folder named 'images'.

<?php
header("Content-type: application/xml");
function GetDirArray($folder)
{
    $handle=opendir($folder);
    while ($file=readdir($handle))
    {
        if ($file!="." && $file!="..")
        {
            $ret[]=$file;
        }
    }
    closedir($handle);
    sort($ret);
    return $ret;
}
$gallery=GetDirArray('images');
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<juiceboxgallery galleryTitle="Juicebox Gallery">';
for ($i=0; $i<sizeof($gallery); $i++)
{
    echo '<image imageURL="images/'.$gallery[$i].'" thumbURL="images/'.$gallery[$i].'" linkURL="" linkTarget="">';
    echo '<title></title>';
    echo '<caption></caption>';
    echo '</image>';
}
echo '</juiceboxgallery>';
?>

Place the above code in a file named 'config.php', place the file in your gallery folder and add the following to your gallery's embedding code:

configUrl : 'config.php'

(You may wish to modify the code to handle thumbnails in a similar fashion.)
Each time you upload images to the 'images' folder, they will automatically be displayed in the gallery when the gallery is viewed.

emi · 2013-09-07 11:41:59

emi
Member
Offline

Registered: 2013-09-07
Posts: 3

Re: Can Juicebox do this?

I tried to do the exact same thing but with javascript and I could not get it to work? (Added my simplified code in this post, thanks biltema for public images.)
Tried to use configUrl : 'config.html' with

<script type="text/javascript">
    var text = '';
    text = text + '<?xml version="1.0" encoding="UTF-8"?>';
    text = text + '<juiceboxgallery>';
    text = text + ' <image imageURL="http://biltema.se/ProductImages/17/large/17-380_l.jpg" ';
    text = text + 'thumbURL="" ';
    text = text + 'linkURL="http://biltema.se/ProductImages/17/large/17-380_l.jpg" ';
    text = text + 'linkTarget="_blank"';
    text = text + 'sourcePath="http://biltema.se/ProductImages/17/large/17-380_l.jpg"> ';
    text = text + '<title></title>';
    text = text + '<caption></caption>';
    text = text + '</image>';
    text = text + '</juiceboxgallery>';
    document.write(text);
</script>

I tested this with xml only and it works fine.

<?xml version="1.0" encoding="UTF-8"?>

<juiceboxgallery>
  <image imageURL="http://biltema.se/ProductImages/17/large/17-380_l.jpg"
    thumbURL=""
    linkURL="http://biltema.se/ProductImages/17/large/17-380_l.jpg"
    linkTarget="_blank"
    sourcePath="http://biltema.se/ProductImages/17/large/17-380_l.jpg">
    <title></title>
    <caption></caption>
  </image>
</juiceboxgallery>

tried config.js also but with no success.

The code that does not work gives me juice box screen with spinning symbol.

Please help! :)

Steven @ Juicebox · 2013-09-07 14:27:38

Steven @ Juicebox
Juicebox Support Team
Offline

Registered: 2012-04-24
Posts: 5,924

Re: Can Juicebox do this?

This needs to be done using server-side scripting (e.g. PHP).
For example, when Juicebox uses a PHP file to dynamically generate the XML data for a gallery, the server processes the PHP file and all that Juicebox sees is the XML data output from the PHP file (not the PHP code).
When trying to perform something similar client-side, Juicebox will see the actual JavaScript code (not the XML data).

emi · 2013-09-07 15:05:06

emi
Member
Offline

Registered: 2013-09-07
Posts: 3

Re: Can Juicebox do this?

Ok, but is there an alternative way to PHP? For example to use Web API URL in configUrl?

Steven @ Juicebox · 2013-09-08 09:21:11

Steven @ Juicebox
Juicebox Support Team
Offline

Registered: 2012-04-24
Posts: 5,924

Re: Can Juicebox do this?

It should be possible to dynamically create an XML file for a Juicebox gallery using most server-side scripting languages as long as you can output the required XML data (though I have not personally tried using a Web API URL as a configUrl).
Perhaps someone else reading this thread has already tried this and can comment.
If you want to try this for yourself, perhaps this web article will help: Getting the Result of ASP.NET Web API in XML Format

emi · 2013-09-14 17:18:49

emi
Member
Offline

Registered: 2013-09-07
Posts: 3

Re: Can Juicebox do this?

It works with Web API :)
Here is my simple test:

public class jbController : ApiController
    {
        // GET api/<controller>
        public HttpResponseMessage Get()
        {
            String s = "";
            s += "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
            s += "<juiceboxgallery>";
            s += "<image imageURL=\"http://biltema.se/ProductImages/17/large/17-380_l.jpg\"";
            s += " thumbURL=\"\"";
            s += " linkURL=\"http://biltema.se/ProductImages/17/large/17-380_l.jpg\"";
            s += " linkTarget=\"_blank\"";
            s += " sourcePath=\"http://biltema.se/ProductImages/17/large/17-380_l.jpg\">";
            s += "<title></title>";
            s += "<caption></caption>";
            s += "</image>";
            s += "<image imageURL=\"http://biltema.se/ProductImages/25/large/25-0490_l.jpg\"";
            s += " thumbURL=\"\"";
            s += " linkURL=\"http://biltema.se/ProductImages/25/large/25-0490_l.jpg\"";
            s += " linkTarget=\"_blank\"";
            s += " sourcePath=\"http://biltema.se/ProductImages/25/large/25-0490_l.jpg\">";
            s += "<title></title>";
            s += "<caption></caption>";
            s += "</image>";
            s += "</juiceboxgallery>";

            return new HttpResponseMessage() { Content = new StringContent(s, Encoding.UTF8, "application/xml") };
        }
    }

And here is the configuration:

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

Thanks for all the help!

Steven @ Juicebox · 2013-09-14 18:59:14

Steven @ Juicebox
Juicebox Support Team
Offline

Registered: 2012-04-24
Posts: 5,924

Re: Can Juicebox do this?

That's great!
Thank you for posting back and sharing your code.

chrisw · 2015-05-12 18:30:25

chrisw
Member
Offline

Registered: 2015-04-29
Posts: 6

Re: Can Juicebox do this?

For anyone who's using ASP.NET MVC, I thought I'd share my code that I used to build the xml response.

I added this to my regular MVC controller and returned an ActionResult. I would have used WebAPI, but my API controllers return only JSON by design. JuiceBox requires xml.

I learned from Emi's post above, but I use LinqToXml's XElement and XDocument to build the xml which is generally safer as far as creating valid xml.

List<XElement> elements = new List<XElement>();
            foreach (var photo in listing.Photos)
            {
                XElement xElement = new XElement("image", 
                    new XAttribute("imageURL", photo.Url), 
                    new XAttribute("thumbURL", photo.ThumbnailUrl), 
                    new XAttribute("linkURL", photo.Url), 
                    new XAttribute("linkTarget", "_blank"));                
                
                if (!string.IsNullOrEmpty(photo.Caption))
                    xElement.Add(new XElement("caption", photo.Caption));
                
                elements.Add(xElement);
            }

            using (MemoryStream stream = new MemoryStream())
            {
                XDocument xDocument = new XDocument(
                        new XElement("juiceboxgallery", new XAttribute("galleryTitle", listing.Headline), elements));

                xDocument.Declaration = new XDeclaration("1.0", "utf-8", "true");
                xDocument.Save(stream);
                stream.Seek(0, SeekOrigin.Begin);
                var response = Encoding.UTF8.GetString(stream.ToArray());
                Response.ContentType = "application/xml";             
                return Content(response);
            }

Steven @ Juicebox · 2015-05-12 20:07:56

Steven @ Juicebox
Juicebox Support Team
Offline

Registered: 2012-04-24
Posts: 5,924

Re: Can Juicebox do this?

@chrisw

Many thanks for sharing your code!

nhartman · 2015-06-23 16:02:05

nhartman
Member
Offline

From: Toledo, OH
Registered: 2015-06-23
Posts: 1

Re: Can Juicebox do this?

So i've been lurking around looking for a solution to be able to use Juicebox but i'm not sure if i can. We need to be able to interject the image URL's externally via javascript or something.. we have a structure of images based off of SKU and an image count So if the image URL's are generated how could they be put in the a "ConfigURL" or just be used straight from the java script.

Our solution is within Channeladvisor and would produce the image URL's like this.. or how ever..

<script type="text/javascript">

myThumbs = new Array ("%%SELECTCASE(LENGTH({{USMBBASE}})>0,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{USMBBASE}},"_01.jpg"), CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_01.jpg"))%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=2,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_02.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=2, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_02.jpg"),{{IMG-COUNT}} >=2,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_02.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=4,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_04.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=4, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_04.jpg"),{{IMG-COUNT}} >=4,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_04.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=5,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_05.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=5, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_05.jpg"),{{IMG-COUNT}} >=5,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_05.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=6,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_06.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=6, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_06.jpg"),{{IMG-COUNT}} >=6,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_06.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=7,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_07.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=7, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_07.jpg"),{{IMG-COUNT}} >=7,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_07.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=8,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_08.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=8, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_08.jpg"),{{IMG-COUNT}} >=8,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_08.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=9,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_09.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=9, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_09.jpg"),{{IMG-COUNT}} >=9,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_09.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=10,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_10.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=10, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_10.jpg"),{{IMG-COUNT}} >=10,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_10.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=11,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_11.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=11, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_11.jpg"),{{IMG-COUNT}} >=11,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_11.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=12,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_12.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=12, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_12.jpg"),{{IMG-COUNT}} >=12,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_12.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=13,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_13.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=13, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_13.jpg"),{{IMG-COUNT}} >=13,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_13.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=14,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_14.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=14, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_14.jpg"),{{IMG-COUNT}} >=14,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_14.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=15,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_15.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=15, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_15.jpg"),{{IMG-COUNT}} >=15,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_15.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=16,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_16.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=16, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_16.jpg"),{{IMG-COUNT}} >=16,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_16.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=17,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_17.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=17, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_17.jpg"),{{IMG-COUNT}} >=17,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_17.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=18,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_18.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=18, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_18.jpg"),{{IMG-COUNT}} >=18,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_18.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=19,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_19.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=19, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_19.jpg"),{{IMG-COUNT}} >=19,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_19.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=20,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_20.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=20, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_20.jpg"),{{IMG-COUNT}} >=20,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_20.jpg"),"")%%");

myPix = new Array ("%%SELECTCASE(LENGTH({{USMBBASE}})>0,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{USMBBASE}},"_01.jpg"), CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_01.jpg"))%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=2,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_02.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=2, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_02.jpg"),{{IMG-COUNT}} >=2,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_02.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=4,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_04.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=4, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_04.jpg"),{{IMG-COUNT}} >=4,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_04.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=5,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_05.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=5, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_05.jpg"),{{IMG-COUNT}} >=5,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_05.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=6,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_06.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=6, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_06.jpg"),{{IMG-COUNT}} >=6,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_06.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=7,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_07.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=7, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_07.jpg"),{{IMG-COUNT}} >=7,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_07.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=8,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_08.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=8, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_08.jpg"),{{IMG-COUNT}} >=8,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_08.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=9,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_09.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=9, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_09.jpg"),{{IMG-COUNT}} >=9,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_09.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=10,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_10.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=10, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_10.jpg"),{{IMG-COUNT}} >=10,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_10.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=11,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_11.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=11, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_11.jpg"),{{IMG-COUNT}} >=11,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_11.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=12,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_12.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=12, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_12.jpg"),{{IMG-COUNT}} >=12,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_12.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=13,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_13.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=13, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_13.jpg"),{{IMG-COUNT}} >=13,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_13.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=14,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_14.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=14, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_14.jpg"),{{IMG-COUNT}} >=14,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_14.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=15,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_15.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=15, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_15.jpg"),{{IMG-COUNT}} >=15,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_15.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=16,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_16.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=16, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_16.jpg"),{{IMG-COUNT}} >=16,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_16.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=17,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_17.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=17, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_17.jpg"),{{IMG-COUNT}} >=17,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_17.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=18,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_18.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=18, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_18.jpg"),{{IMG-COUNT}} >=18,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_18.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=19,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_19.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=19, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_19.jpg"),{{IMG-COUNT}} >=19,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_19.jpg"),"")%%","%%SELECTCASE(LENGTH({{USMBBASE}})>0 AND {{IMG-COUNT}} >=20,CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{USMBBASE}},LENGTH({{USMBBASE}})-4),"_20.jpg"),Contains(TOLOWER({{IMGPARENT}}),"true") AND {{IMG-COUNT}} >=20, CONCATENATE("http://www.affordabletool.com/images/products_hires/",LEFT({{ITEMSKU}},LENGTH({{ITEMSKU}})-4),"_20.jpg"),{{IMG-COUNT}} >=20,CONCATENATE("http://www.affordabletool.com/images/products_hires/",{{ITEMSKU}},"_20.jpg"),"")%%");

</script>

These are business rules up to 20 images.. so for instance this SKU USMB-AYP-340BP-002 has an image count of 7 so these business rules would pull back this

<script type="text/javascript">

myThumbs = new Array ("http://www.affordabletool.com/images/products_hires/USMB-AYP-340BP-002_01.jpg","http://www.affordabletool.com/images/products_hires/USMB-AYP-340BP_02.jpg","http://www.affordabletool.com/images/products_hires/USMB-AYP-340BP_04.jpg","http://www.affordabletool.com/images/products_hires/USMB-AYP-340BP_05.jpg","http://www.affordabletool.com/images/products_hires/USMB-AYP-340BP_06.jpg","http://www.affordabletool.com/images/products_hires/USMB-AYP-340BP_07.jpg","","","","","","","","","","","","","");

myPix = new Array ("http://www.affordabletool.com/images/products_hires/USMB-AYP-340BP-002_01.jpg","http://www.affordabletool.com/images/products_hires/USMB-AYP-340BP_02.jpg","http://www.affordabletool.com/images/products_hires/USMB-AYP-340BP_04.jpg","http://www.affordabletool.com/images/products_hires/USMB-AYP-340BP_05.jpg","http://www.affordabletool.com/images/products_hires/USMB-AYP-340BP_06.jpg","http://www.affordabletool.com/images/products_hires/USMB-AYP-340BP_07.jpg","","","","","","","","","","","","","");

</script>

So i can mess with the business rules to interject < > or what ever but from there how could i get it to work with Juicebox with one instance of the jbcore and the config would be in the script..

any advice would be great! thanks!

Steven @ Juicebox · 2015-06-23 21:37:00

Steven @ Juicebox
Juicebox Support Team
Offline

Registered: 2012-04-24
Posts: 5,924

Re: Can Juicebox do this?

The image data must be in the required <image> tag format (using imageURL and thumbURL attributes) in an XML file.
It is not possible to provide the image data to Juicebox via JavaScript in the embedding page.
Please see Step #4 ('Edit config.xml') in the Manually Creating a Gallery support section for a sample <image> tag.
You could, however, use a server-side scripting language (such as PHP) to extract data from a custom source and build the XML file dynamically (see the example in my first post above).

Juicebox v1.5.1 Released!

Can Juicebox do this?

Posts: 12

1 Topic by dswift 2012-06-03 17:26:59

Topic: Can Juicebox do this?

2 Reply by Steven @ Juicebox 2012-06-03 19:48:02

Re: Can Juicebox do this?

3 Reply by emi 2013-09-07 11:41:59

Re: Can Juicebox do this?

4 Reply by Steven @ Juicebox 2013-09-07 14:27:38

Re: Can Juicebox do this?

5 Reply by emi 2013-09-07 15:05:06

Re: Can Juicebox do this?

6 Reply by Steven @ Juicebox 2013-09-08 09:21:11

Re: Can Juicebox do this?

7 Reply by emi 2013-09-14 17:18:49

Re: Can Juicebox do this?

8 Reply by Steven @ Juicebox 2013-09-14 18:59:14

Re: Can Juicebox do this?

9 Reply by chrisw 2015-05-12 18:30:25

Re: Can Juicebox do this?

10 Reply by Steven @ Juicebox 2015-05-12 20:07:56

Re: Can Juicebox do this?

11 Reply by nhartman 2015-06-23 16:02:05

Re: Can Juicebox do this?

12 Reply by Steven @ Juicebox 2015-06-23 21:37:00

Re: Can Juicebox do this?

Posts: 12