1 Topic by cornelioos (edited by cornelioos 2016-02-26 17:00:41)

  • Registered: 2016-02-26
  • Posts: 1

Topic: Way to naviagate through open photos in a pop out or separate window?

I would like to be able to click on a photo in a gallery and once it opens to it's actual full size be able to click arrow keys and have it go to the next image - no thumb bars, just clicking through the images. Is there a way to do this?

So if I use 'show expanded' setting, it expands in the same tab/window and I can navigate through the images in their full view using arrow keys or navigation buttons. How do I quickly get back to initial gallery page without having to click back through the history of what I've viewed. 'Open image' lets me open in another tab but I can't navigate through to the next image.

I would like the gallery to work like this: click on any image in gallery and the image opens where you can see the entire product, preferrably in a popout window but separate tab is ok as long as I then can click and see the next product and so on. And then be able to close that window and return quickly to initial gallery page. If using the expanded view clicking the back button or arrow goes back through all viewings before returning to gallery.

I hope this makes sense - I've seen it used all the time but not sure if juicebox does this?

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

Re: Way to naviagate through open photos in a pop out or separate window?

So if I use 'show expanded' setting, it expands in the same tab/window

... preferrably in a popout window but separate tab is ok as long as I then can click and see the next product and so on.

When a gallery is expanded (via the Splash Page or the Expand Button on the Button Bar), the gallery will always expand in the same tab regardless of whether expandInNewPage="TRUE" (when the gallery will be displayed on a page of its own) or expandInNewPage="FALSE" (when the gallery will be expanded on top of the embedding page). This behavior cannot be changed. (A gallery cannot be expanded in a new tab or window.)

click on any image in gallery and the image opens where you can see the entire product

If you set screenMode="SMALL", the gallery will be displayed in Small Screen Mode on all devices and in all browsers.
In Small Screen Mode, the user will be presented with a grid of thumbnails from which a main image can be selected. The user can return to the thumbnail page via the Thumbnail Button (showSmallThumbsButton="TRUE").
Here is an example: http://www.juicebox.net/demos/pro/defau … Mode=SMALL

You could also choose to use the Splash Page and expand the gallery from a Splash Page (showSplashPage="ALWAYS").
Here is an example: http://www.juicebox.net/demos/pro/splash/

No matter what Screen Mode setting you use (AUTO, SMALL, LARGE), if the gallery is expanded, you can return to the unexpanded view via the Expand/Close Button (showExpandButton="TRUE").

You can also use the Back Button to redirect the user to whatever web page you like (from a normal or expanded gallery).
By default, the Back Button goes back one page in the browser's history but you can select a specific web page via the backButtonUrl. The backButtonUrl can be a relative path (relative to the page containing the gallery's embedding code) or an absolute path in the form http://www.example.com/index.html.
The Back Button in this demo gallery always goes directly to the demo gallery overview page: http://juicebox.net/demos/pro/full/

I hope these notes help and that you can configure a gallery to your liking using a combination of the available options: Screen Mode, Splash Page, Expand Button, Thumbnail Button, Back Button.

For reference, a list of all configuration options can be found here.