• Registered: 2015-08-17
  • Posts: 9

Topic: Get Thumbs on a New Page

I have juicebox embedded on my webpage and I'm having an issue with the thumbs on the responsive view. I am allowing the gallery to respond to the screen size, but I have all juicebox icons hidden so I can use my own custom icons. So far I have been able to attach juicebox events to my custom icons - Example : Play button icon, jb.toggleAutoPlay() - However I'm not able to show the thumbs page when I'm clicking on the Thumbs icon. On the demo I saw on your live site the thumbs button opened a responsive view of a page with multiple rows of thumb images depending on screen size. I'm not sure which event I need in order to get that display. I've tried showThumbPage(), but that isn't working. I'm contemplating just building my own custom page to show the thumbs, but I need to know how to get the thumbs. Is there a script call I can use to get the thumbnail images so I can load those on a custom page? Thanks!

here is my config:
    resizeOnImport="false"
    fotomotoStoreId="My Store ID"
    captionBackColor="rgba(51,51,51,0.5)"
    captionPosition="BELOW_IMAGE"
    showExpandButton="false"
    showOpenButton="false"
    maxThumbColumns="3"
    textColor="rgba(255,255,255,1)"
    textShadowColor="rgba(0,0,0,0)"
    backgroundColor="rgba(51,51,51,1)"
    imageShadowColor="rgba(0,0,0,0)"
    imageShadowBlur="20"
    imagePadding="10"
    maxCaptionHeight="100"
    imageTransitionType="SLIDE"
    galleryFontFace="Georgia,serif"
    imageVAlign="TOP"
    imageHAlign="CENTER"
    thumbsPosition="RIGHT"
    maxThumbRows="4"
    galleryTitlePosition="TOP"
    buttonBarPosition="NONE"
    buttonBarBackColor="rgba(238,238,238,0.5)"
    buttonBarIconColor="rgba(0,0,0,1)"
    buttonBarIconHoverColor="rgba(51,51,51,1)"
    thumbsVAlign="TOP"
    galleryWidth="1024"
    showThumbsButton="false"
    showAutoPlayButton="true"
    showNavButtons="true"
    showImageNav="HOVER"
    thumbShadowColor="rgba(0,0,0,0)"
    navButtonIconColor="rgba(255,255,255,1)"
    navButtonBackColor="rgba(51,51,51,0)"
    showAutoPlayStatus="false"
    goNextOnAutoPlay="true"
    enableLooping="true"
    enableDirectLinks="true"
    displayTime="3"
    navButtonIconHoverColor="rgba(153,153,153,1)"
    topAreaHeight="10"
    imageNavPadding="10"
    showSmallPagingText="false"
    thumbsHAlign="CENTER"
    thumbSelectedFrameWidth="2"
    showSmallThumbsButton="true"
    indexPageName="hawkeyes.html"
    imageScaleMode="SCALE"
    showImageNumber="false"
    captionHAlign="LEFT"
    thumbNavPosition="BOTTOM"
    buttonBarHAlign="RIGHT"
    showInfoButton="false"
    useFullscreenExpand="false"
    thumbWidth="90"
    thumbHeight="90"

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

Re: Get Thumbs on a New Page

On the demo I saw on your live site the thumbs button opened a responsive view of a page with multiple rows of thumb images depending on screen size. I'm not sure which event I need in order to get that display.

You can use the toggleThumbs() API method to toggle the thumbnails on and off. (Check the source of the API demo in your browser to see the code that is used.)
If you set both showThumbsOnLoad and showSmallThumbsOnLoad to either TRUE or FALSE, then you will know the status of the thumbnails when the gallery is loaded and you should be able to keep track of whether or not they are currently visible and whether or not you need to toggle them.

  • Registered: 2015-08-17
  • Posts: 9

Re: Get Thumbs on a New Page

Applying these settings didn't get me the desired result. Is there an API call that will allow me to get just the thumb images? Essentially from my main photo gallery page I want to click on my custom thumbs image and open a new page that will show the thumbnail images. So I need a way to get the thumb image urls. Is that possible?

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

Re: Get Thumbs on a New Page

There is no API method which will display a separate page of thumbnail images unless your gallery is being displayed in Small Screen Mode where toggleThumbs() will switch between the thumbnail page and the main image page. Try setting screenMode="SMALL" to see if this is more what you are after.

So I need a way to get the thumb image urls.

If you want to get a list of all thumbURL entries in a gallery, this can be done as follows.

<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
    var jb = new juicebox({
        containerId: "juicebox-container",
        galleryHeight: "400",
        galleryWidth: "600"
    });
    var thumbs = [];
    jb.onInitComplete = function() {
        var total = jb.getImageCount(), info, thumb;
        for (var i = 1; i <= total; i++) {
            info = jb.getImageInfo(i);
            thumb = info.thumbURL;
            thumbs.push(thumb);
        }
    };
</script>

All the thumbURL entries are stored in an array (named 'thumbs' in the example above) and you can use this information as you like. For example, you could iterate over the array and display all the thumbnails using <img> tags (using the information in the array as the 'src' attributes).