Topic: Options Available in Hyperlink to Gallery Image?

Steven (et al.?):

For a non-embedded gallery, with enableDirectLinks at its default FALSE value, it's possible to start viewing at a certain image. For instance, as you note at http://www.juicebox.net/support/config_options/ , you can use a link such as http://www.mysite.com/mygallery/#12 to go directly to the twelfth image.

My question: is there a way to also temporarily set some of the options in a hyperlink, along the lines of, say, http://www.mysite.com/mygallery/#12?sho … Load=FALSE ?

For instance, if I want to direct someone to a just one particular image in one of my galleries, I provide a link such as http://www.mysite.com/mygallery/#12. For general viewership, I have showThumbsOnLoad=TRUE, but in this ad hoc case I'd just as soon not have the thumbnails appear (unless the navigation icon is clicked, i.e., the reverse of my default on-load setup). Anything like this possible in a URL?

Cheers,

Bill P.

Re: Options Available in Hyperlink to Gallery Image?

Set debugMode="TRUE" in your gallery's XML file and you can then set configuration options in the query string of a gallery's URL as noted here, e.g.: http://www.example.com/gallery/index.html#12?showThumbsOnLoad=FALSE
Configuration options set in a query string will override those set in a gallery's embedding code or XML file.

Re: Options Available in Hyperlink to Gallery Image?

Ah, I missed that -- thanks, Steven.

Are there any other side effects to setting debugmode? I searched that page, and couldn't find any other mention of it.

Bill

Re: Options Available in Hyperlink to Gallery Image?

The only side-effect is that it will allow users to manually configure the gallery you created (overwriting the configuration options you have carefully chosen and set) by using their own configuration options in the query string of a URL that they can construct and enter into their browser's address bar. However, unless visitors to your web site are familiar with Juicebox-Pro and wish to manually configure the gallery that is displayed before them, this is highly unlikely to happen.

An alternative solution (without setting debugMode="TRUE") would be to set a session cookie when the user clicks on the link to the gallery and, in the web page containing the gallery, the cookie would be read and its value would be used as the value for the showThumbsOnLoad configuration option (in the gallery's embedding code).

Here is an example:

Use the following code as a page with a couple of links to the same gallery (call the page 'main.html').

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Juicebox-Pro Gallery</title>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <script src="cookie.js"></script>
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
    </head>
    <body>
        <div id="links">
            <a href="index.html#12">Link without cookie set</a>
            <br />
            <a href="index.html#12" onclick="createCookie('showThumbsOnLoad', 'false'); return true;">Link <i>with</i> cookie set</a>
        </div>
    </body>
</html>

Use the following code as a gallery's 'index.html' page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Juicebox-Pro Gallery</title>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <script src="cookie.js"></script>
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
    </head>
    <body>
        <!--START JUICEBOX EMBED-->
        <script src="jbcore/juicebox.js"></script>
        <script>
            var value = "true";
            if (document.cookie.length > 0) {
                var index = document.cookie.indexOf("showThumbsOnLoad");
                if (index !== -1) {
                    var temp = readCookie("showThumbsOnLoad");
                    if (temp !== null) {
                        value = temp;
                    }
                }
                eraseCookie("showThumbsOnLoad");
            }
            new juicebox({
                containerId: 'juicebox-container',
                showThumbsOnLoad: value
            });
        </script>
        <div id="juicebox-container"></div>
        <!--END JUICEBOX EMBED-->
    </body>
</html>

Put the following code into a file named 'cookie.js'. (This is the JavaScript code which handles creating, reading and deleting the cookie.)

function createCookie(name, value) {
    document.cookie = name + "=" + escape(value) + "; path=/";
}

function readCookie(name) {
    var re = new RegExp("(?:^|;)\\s?" + name + "=(.*?)(?:;|$)", "i"), result = document.cookie.match(re), output = null;
    if (result !== null)
    {
        output = unescape(result[1]);
    }
    return output;
}

function eraseCookie(name) {
    var d = new Date();
    document.cookie = name + "=; path=/; expires=" + d.toUTCString();
}

Now put all the files into a sample gallery folder and open 'main.html' in a browser to see it in action.

Re: Options Available in Hyperlink to Gallery Image?

Thanks for the code snippet. Just setting debugmode seems fine to me; after all, if the viewer can click on icons to change the behavior, I don't mind his or her changing the behavior via a URL.

Thanks for your time and effort, Steven.

Cheers,

Bill P.