• Registered: 2012-09-13
  • Posts: 8

Topic: Use custom ID instead of index

I need each image in the gallery to have a specific URL (so that we can use it for Facebook Like and Twitter), and I know I can use this config:

enableDirectLinks

However, I want to be able to customize the image ID.  The reason is that new images will be inserted into the gallery constantly and I want to put newer images in the beginning.  This means using "index" as the ID will be a problem because everything will shift when new images are added.

Can you help me out here?  We plan on purchasing the Pro version if we can get this to work.

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Use custom ID instead of index

One method to achieve this might be to reverse the image numbering so that #1 always refers to the first image added to the gallery, which will always be displayed last in your gallery.
You could use JavaScript to get the image number from a query string in the URL, check the total number of images in the gallery using the getImageCount(): int Juicebox API method and then use the showImage( index: int ) method to display the relevant image:
Index Of Image To Be Displayed = Total Image Count - Image Number From URL + 1

  • Registered: 2012-09-13
  • Posts: 8

Re: Use custom ID instead of index

Thanks Steven! We did end up with a solution as specified by my colleague here (http://juicebox.net/forum/viewtopic.php?id=285).

One thing that would be extremely helpful is if we can add our own custom nodes to the config.xml and have those accessible from the juicebox code.  That way we could pass in additional meta data.

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Use custom ID instead of index

Adding custom nodes to the XML file may break Juicebox as it will not be expecting new tags or attributes to be introduced.
Even if the new nodes did not break the gallery, they would not be accessible via the Juicebox API as Juicebox would not know anything about them. You would have to parse the XML file manually using DOM techniques to extract the information you require.

  • Registered: 2012-09-13
  • Posts: 8

Re: Use custom ID instead of index

Steven, my point is that it would be great for you guys to implement some way of allowing us to pass additional data in the config.xml. 

Basically, you guys could create allow for a <meta> node and we can pass anything we need in there.  We could serialize an array in there if we need to pass more than one thing and on the javascript side, we'd be able to unserialize and use the information.

I think that would be an extremely helpful update.

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Use custom ID instead of index

I hope you do not mind me asking you to please post feature requests in this forum thread.
It keeps them all together and ensures that they are not overlooked.
Also, other users may see your feature request and be inspired to post saying that they, too, would like such a feature to be included in a future version.
With enough interest, there is more likelihood that a feature would be implemented in a future release.
Thank you.

  • Felix
  • Juicebox Support Team
  • Offline
  • Registered: 2012-04-24
  • Posts: 173

Re: Use custom ID instead of index

You should be able to add your own tags within the juicebox image tags with no problem. How you generate and read those tags would be up to you. Currently the Juicebox API getImageInfo() function will not return extra tags, but it should be fairly straightforward to access those through javascript.

  • Registered: 2012-09-13
  • Posts: 8

Re: Use custom ID instead of index

Steven, you mentioned the possibility of reversing the image numbering.  How exactly would you do this?  It seems #1 is always assigned to the first image, so even if I put the most recent image first, it would be given #1.  Any help would be great!

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Use custom ID instead of index

Try the following as your gallery's 'index.html' page.
In a gallery with 12 images, the URL: index.html?id=12 will display the first image, index.html?id=11 will display the second image, etc. and index.html?id=1 will display the last image.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Juicebox-Pro Gallery</title>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="description" content="This is a Juicebox-Pro Gallery. Get yours at www.juicebox.net" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script src="jbcore/juicebox.js"></script>
        <script src="jquery-1.8.1.min.js"></script>
        <script type="text/javascript">
            var jb, imageCount;
            $(document).ready(function () {
                jb = new juicebox({
                    containerId : 'juicebox-container'
                });
                jb.onInitComplete = function() {
                    imageCount = jb.getImageCount();
                    if (location.search) {
                        var queryString = unescape(location.search), queryArray = {}, re = new RegExp("([^?=&]+)(?:=([^&]*))?", "g"), queryComponent, queryInteger;
                        while (queryComponent = re.exec(queryString)) {
                            queryArray[queryComponent[1]] = queryComponent[2];
                        }
                        queryInteger = parseInt(queryArray["id"]);
                        if (!isNaN(queryInteger) && queryInteger > 0 && queryInteger <= imageCount) {
                            jb.showImage(imageCount - queryInteger + 1);
                        }
                    }
                };
            });
        </script>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>