• gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Topic: Back button from cookie?

This may be a dumb question, but I have my site in 2 languages and would like the Back Button to go to one of two separate pages depending on a cookie.  Is this possible (and any advice how best to achieve it would be welcome too!).

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

Re: Back button from cookie?

Juicebox-Pro accepts only one string for the backButtonUrl and it cannot be changed once the gallery has loaded.
However, you could set the backButtonUrl to run a JavaScript function (on the same page as the gallery's embedding code) by setting:

backButtonUrl="javascript: backButton();"

... and have the function look something like this:

<script>
    function backButton() {
        var value = readCookie('myCookie');
        if (value == 'french') {
            document.location.href = "http://www.example.com/fr/"
        } else {
            document.location.href = "http://www.example.com/"
        }
    }
</script>

You would need to have your own function to read your cookie (in the above example named 'readCookie').

3 Reply by gfs (edited by gfs 2013-07-22 09:45:07)

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Back button from cookie?

Thanks Steven!

I need this 'cookie back button' for a site which is specifically for iOS/Mobile and which does not use embedded code.  The site is accessed directly as JBox and the only 'branding' page is a separate html links page (which the back button goes to and hence my conundrum ... how to go to the appropriate language links page).

Is there some way to apply the function directly into the JBox pages?  (The cookie would be set on the links page).

(You can take a look at the site here : mobile.grantsymon.com)

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

Re: Back button from cookie?

You would need to include the backButtonUrl="javascript: backButton();" setting in each of your gallery's 'config.xml' files and include the JavaScript code I posted (modified to suit your own needs) in the <head> section of each of your gallery's 'index.html' pages.

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Back button from cookie?

Steven,

is this something I could do more easily by editing the files inside the Juicebox package?

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

Re: Back button from cookie?

No. The 'juicebox.js' file is obfuscated and cannot be modified.

Here is a working example where the value of the cookie is actually the URL you would like the Back Button to open.

Paste the following code into a JavaScript file named 'cookie.js' and place it in your gallery folder:

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 use the following code as your gallery's 'index.html' file.

<!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>
        <script>
            function backButton() {
                var value = readCookie('test');
                eraseCookie('test');
                document.location.href = value;
            }
        </script>
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
    </head>
    <body>
        <!--START JUICEBOX EMBED-->
        <script src="jbcore/juicebox.js"></script>
        <script>
            new juicebox({
                containerId : 'juicebox-container'
            });
        </script>
        <div id="juicebox-container"></div>
        <!--END JUICEBOX EMBED-->
    </body>
</html>

Use the following code as your main page (which sets the cookie) and place it in your gallery folder:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Back Button Cookie Test</title>
        <meta charset="utf-8" />
        <script src="cookie.js"></script>
    </head>
    <body>
        <div>
            <a href="index.html" onclick="javascript: createCookie('test', 'http://www.juicebox.net/'); return true;">Click here to open gallery and set cookie to open Juicebox home page.</a>
            <br />
            <a href="index.html" onclick="javascript: createCookie('test', 'http://www.simpleviewer.net/'); return true;">Click here to open gallery and set cookie to open SimpleViewer home page.</a>
        </div>
    </body>
</html>

Finally, set the following configuration options in your gallery's XML file:

backButtonUrl="javascript: backButton();"
backButtonPosition="TOP"