1 Topic by gotty1 (edited by gotty1 2014-11-30 19:36:54)

  • Registered: 2014-11-30
  • Posts: 5

Topic: Adding per-picture comments/thread

I'm planning a section of one of my sites that will include a gallery of photos, and Juicebox seems the smoothest of the packages around. But there's one feature that will be essential, and that's the ability to receive comments and have a limited discussion on each individual photo (they're historical photos and we'll be looking for feedback as to where they were taken).

Basically what I want is to be able to embed Juicebox into a page, and have the relevant comments/thread come up when a picture is selected. I'm sure it can be done via jscript and the Juicebox API.

I've spent ages searching, but have so far not found any ideas via Google - so, before I go and reinvent the wheel, I wondered if anyone had done such a thing. I'm not looking for a ready-made solution, just some basic ideas.

Many thanks in advance.

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

Re: Adding per-picture comments/thread

The solution to your problem probably relies on knowing which image is currently being displayed (so that you can act upon it and display the relevant discussion elsewhere on the page).
You can do this using the Juicebox-Pro API as follows:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
// Give your 'juicebox' object a variable name (in this example 'jb') so that you can refer to it later
var jb = new juicebox({
    containerId: 'juicebox-container'
});
// onImageChange is fired each time a new image is selected
jb.onImageChange = function(e) {
    // e.id is the  index number of the current image being displayed (index starts at 1 for first image)
    var imageIndex = e.id;
    // First image is selected
    if (imageIndex == 1) {
        // Do something...
    }
    // Second image is selected
    if (imageIndex == 2) {
        // Do something else...
    }
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

I hope this helps to get you started on your project.