• Registered: 2018-09-27
  • Posts: 1

Topic: Set a PHP or JavaScript variable when loading a specific picture

Hi,

I would like to set a simple variable when the person browsing through the gallery reaches a particular picture - ideally, I would like to set $flag=False whenever they are looking at pictures before picture number 10, and set $flag=True whenever they are looking at 10, 11, 12 etc.

My goal is to use JavaScript and Ajax to show/hide other parts of my page that has a Juicebox gallery embedded in it - I have all that worked out, just need to be able to pass a variable to my JavaScript block.

Thanks!
A.

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

Re: Set a PHP or JavaScript variable when loading a specific picture

You can use the Juicebox-Pro JavaScript API to determine the image that is currently being viewed and you can then take action accordingly.
Here's an example which will set a JavaScript variable (and display an alert) the first time that an image in position #10 or above is viewed.

<script src="jbcore/juicebox.js"></script>
<script>

    var jb = new juicebox({
        containerId: 'juicebox-container'
    });

    var flag = false;

    jb.onImageChange = function(e) {
        if (flag === false && e.id >= 10) {
            alert('Image #10 or above has been viewed.');
            flag = true;
        }
    };

</script>
<div id="juicebox-container"></div>

I hope this points you in the right direction.