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.