• Registered: 2012-11-25
  • Posts: 5

Topic: Blank first image

How do I make the viewer not show any image when it first loads?  I want to use API to display descriptive text above the thumbnails, then for this to to disappear when a thumbnail is clicked and the first image shows.  I think I've got the API covered for making the text box invisible, but can't see how to stop the first image automatically displaying when the gallery loads.  On SVPro, this was easy, as you just put in a first image number greater than the total in the gallery.  But that seems not to work in Juicebox - it just defaults to the first image.

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

Re: Blank first image

You could initially hide the main image by adding the following to the CSS of your main page into which the gallery is embedded:

.jb-dt-main-frame { visibility: hidden; }

... and then, using the API onImageChange(id) method and JavaScript, set the visibility to 'visible' when a thumbnail is clicked.

3 Reply by evacat (edited by evacat 2012-12-23 13:16:52)

  • Registered: 2012-11-25
  • Posts: 5

Re: Blank first image

Finally got around to trying this, but couldn't get it to work - the CSS was fine, but couldn't get it to change. I gave up on that and instead had a transparent slide for the first image (which isn't ideal).   Also, I couldn't get the API for making the text box invisible to work properly either - when I tried it, the text box disappears a couple of seconds after the gallery loads rather than when the image changes.

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

Re: Blank first image

I think the root of the problem is that you would need an API event to be fired just after an image has been displayed rather than just before (when the onImageChange() event is fired) in order to replace an image with text. Unfortunately, such an event does not exist.

Perhaps you could simply display the text on your page and ask the user to click on a link to display the gallery, replacing the text block with the gallery using JavaScript.

  • Registered: 2012-11-25
  • Posts: 5

Re: Blank first image

Oh dear, that's a pity, it was so easy to do in SVPro.  So what's the difference between OnInitComplete and OnImageChange then?  They appear to do exactly the same thing (they both fire as soon as the gallery/first picture is loaded).

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

Re: Blank first image

So what's the difference between OnInitComplete and OnImageChange then?

onInitComplete() fires only once when Juicebox has completed initialization and The API is available.
onImageChange() fires each and every time a new image is displayed (when the first image is displayed on loading the gallery, when the user changes the image manually and when the image is changed via AutoPlay).
For a full description of all Juicebox API methods and events, please see the Juicebox - API Support page.