• Registered: 2020-03-10
  • Posts: 4

Topic: How do I setup a top level thumbnail page

Hi

I'm trying to setup the first page of a gallery to be all thumbnails, clicking an image then takes you into a normal page.

From previous posts I can set up a page with just thumbnails by setting the screenmode to SMALL - but then each subsequent image in that gallery is displayed in small mode.

My pages are here - this is a reasonable first page:
http://www.allthisuselessbeauty.co.uk/g … ndex.html#

But after that I want pages to look like this:
http://www.allthisuselessbeauty.co.uk/g … als.html#1

How can I switch from one to the other?

Thanks

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

Re: How do I setup a top level thumbnail page

Unfortunately, it is not possible for a gallery to switch screen modes after it has been loaded.
A gallery uses only one set of configuration options (e.g. one value for screenMode) which are loaded when the gallery is initially displayed. Configuration options cannot be changed afterwards.

If you want to switch screen modes, then you would need to reload the gallery with the new screenMode value.

For your scenario, you would need to initially load the gallery in Small Screen Mode, override Juicebox's own thumbnail handling and, when a thumbnail is clicked, determine which thumbnail was clicked and reload the gallery in Large Screen Mode passing the correct image for use as the firstImageIndex value (so that the correct image is displayed when the gallery is reloaded in Large Screen Mode).

I have tried to do this myself but it gets very messy very quickly.
There are delay issues (a need to wait for thumbnails to be drawn before overriding their functionality) and the override needs to be performed each time a new thumbnail page is displayed.
I've been unable to get this working cleanly, otherwise I would post some code which you might have been able to use.

I'd recommend just setting screenMode to one of its official values (SMALL, LARGE, AUTO) and letting Juicebox run as intended.
It might not be exactly as you'd like it to be but it'll be a lot less hassle (and doesn't involve manual coding and overriding core Juicebox functionality).

Edit:
Here's the best I've been able to do.
Please note that it is not fully tested and such modifications (which override core Juicebox functionality), whilst you are free to try, are not officially supported. Also, please be aware that there is a short delay (500ms) before the override kicks in. As long as a user does not click a thumbnail within half a second of loading the page (or changing the thumbnail page), everything should hopefully be fine.
To see this example in action, just create a sample gallery with JuiceboxBuilder-Pro, replace the gallery's 'index.html' page with the code below and open the HTML file in a browser.
I hope that you can use this as a starting point and perhaps integrate it into your own web page.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var jb;
            function loadGallery(fii, sm) {
                jb = new juicebox({
                    containerId: "juicebox-container",
                    firstImageIndex: fii.toString(),
                    screenMode: sm,
                    showsmallthumbnav: 'TRUE'
                });
            }
            $(document).ready(function() {
                loadGallery(-1, 'SMALL');
                jb.onThumbPageChange = function() {
                    var mode = jb.getScreenMode();
                    if (mode === 'SMALL') {
                        window.setTimeout(function() {
                            $('.jb-idx-thumb').off('click');
                            $('.jb-idx-thumb').click(function() {
                                var index = $(this).attr('data-position');
                                var position = parseInt(index, 10);
                                var fii = position + 1;
                                loadGallery(fii, 'LARGE');
                            });
                        }, 500);    
                    }
                };
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>
  • Registered: 2020-03-10
  • Posts: 4

Re: How do I setup a top level thumbnail page

Thanks Steven... I think I saw in a previous post that I can get an array of thumbnail objects from a  juicebox object - so I could initiate a juicebox object in small mode without displaying it then build my own page from that array with URLs to the large pages. Does that sound feasible - I think thats slightly different to what you suggest.

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

Re: How do I setup a top level thumbnail page

I'm not sure where you saw that idea (can you provide a link to the post?) but it sounds quite complicated and my own suggestion above would almost certainly be easier to implement and might work OK for you.

You could certainly create your own index page of thumbnail images (however you like) and then link each thumbnail image to its corresponding main image in a Large Screen Mode gallery (either by passing an index number to be used as a firstImageIndex to a JavaScript function which would load the gallery or by setting enableDirectLinks="TRUE" and using a link to load the gallery page at the corresponding main image).

I'm really not sure how you'd go about doing what you propose, though.
Maybe if I could see the post you are referring to, I'd have a better idea of what you think might be possible, although it sounds like it would involve some manual work (to create an index of thumbnails), whereas my suggestion above is automated and would work for any gallery.

If you are using a Juicebox object to somehow create a list of thumbnails that need to be displayed, then it seems logical to allow Juicebox to display the thumbnails (initially in Small Screen Mode) rather than to manually create an index page (using the data gathered from the Juicebox object).
However, a manual index page (with custom links using either of the firstImageIndex or enableDirectLinks methods) might function more cleanly than my suggestion above (overriding Juicebox's own thumbnail handling).
I still think it might be wroth a shot, though. It should be fairly quick and easy to implement and it might work well enough within your website to not have to go down the more complex and time-intensive manual-coding route.

  • Registered: 2020-03-10
  • Posts: 4

Re: How do I setup a top level thumbnail page

It was here - in the last post. The advantage would be that I wouldn't need to edit the thumbs page every time the images changed.

https://juicebox.net/forum/viewtopic.php?id=1922

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

Re: How do I setup a top level thumbnail page

Thank you for posting the link to the forum post.
I don't remember posting that (although, in my defense, it was nearly five years ago)!

Here's an example using the method from the post in conjunction with firstImageIndex (which loads a gallery on the same page as the thumbnails).
It initially loads a gallery (with zero dimensions) to gather an array of thumbnail URLs.
It then displays all the thumbnails and assigns a click handler to each one so that, when a thumbnail is clicked, the gallery will load showing the corresponding main image. (You could, of course, do whatever you like when a thumbnail is clicked.)
As before, to see this example in action, just create a sample gallery with JuiceboxBuilder-Pro, replace the gallery's 'index.html' file with the code below and open the HTML file in a browser.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var jb;
            var thumbs = [];
            function loadGallery(fii, gh, gw) {
                jb = new juicebox({
                    containerId: "juicebox-container",
                    firstImageIndex: fii.toString(),
                    galleryHeight: gh.toString(),
                    galleryWidth: gw.toString()
                });
            }
            function thumbsFunction(value, index) {
                index++;
                $('#thumbs-container').append('<img src="' + value + '" alt="thumb" class="thumb" data-index="' + index + '" height="85" style="cursor: pointer; padding: 10px;" width="85" />');
            }
            $(document).ready(function() {
                $('#thumbs-container').on('click', '.thumb', function() {
                    var index = $(this).attr('data-index');
                    loadGallery(index, 400, 600);
                });
                loadGallery(1, 0, 0);
                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);
                    }
                    thumbs.forEach(thumbsFunction);
                };
            });
        </script>        
        <title>Test</title>
    </head>
    <body>
        <div id="thumbs-container"></div>
        <div id="juicebox-container"></div>
    </body>
</html>

Here's another example using the method from the post in conjunction with enableDirectLinks (which loads a gallery on a different page from the thumbnails).
There is no need for a click handler in this example as regular HTML <a> tags are used to link the thumbnails to their corresponding main images on the gallery page. (Incidentally, I could have just used 'onclick' in the example above but there are many ways to achieve a similar outcome.)
To see this example in action, create a sample gallery with JuiceboxBuilder-Pro, keep the gallery's 'index.html' file intact, create a new HTML file with the code below and open the new HTML file in a browser.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var jb;
            var thumbs = [];
            function loadGallery(fii, gh, gw) {
                jb = new juicebox({
                    containerId: "juicebox-container",
                    firstImageIndex: fii.toString(),
                    galleryHeight: gh.toString(),
                    galleryWidth: gw.toString()
                });
            }
            function thumbsFunction(value, index) {
                index++;
                $('#thumbs-container').append('<a href="index.html#' + index + '"><img src="' + value + '" alt="thumb" class="thumb" data-index="' + index + '" height="85" style="cursor: pointer; padding: 10px;" width="85" /></a>');
            }
            $(document).ready(function() {
                loadGallery(1, 0, 0);
                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);
                    }
                    thumbs.forEach(thumbsFunction);
                };
            });
        </script>        
        <title>Test</title>
    </head>
    <body>
        <div id="thumbs-container"></div>
        <div id="juicebox-container"></div>
    </body>
</html>

I hope these examples point you in the right direction.

  • Registered: 2020-03-10
  • Posts: 4

Re: How do I setup a top level thumbnail page

Perfect! Thanks for your help

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

Re: How do I setup a top level thumbnail page

You're welcome!
I hope my examples helped and that you'll be able to implement one of them into your own website.
Just let me know if you run into any difficulties and I'll do my best to help you out.