• Registered: 2018-09-24
  • Posts: 4

Topic: Resizable in both Height and Width

Hi,

I use RapidWeaver (based on templates) to build my website. I would like my embedded JB gallery to show in the maximum available space – width AND height – and to be resizable.

Having to deal with both vertical (header-s and footer) and horizontal (sidebar) elements I tried to combine the two Javascript examples I found in https://www.juicebox.net/demos/support/ … u/gallery1 and https://www.juicebox.net/demos/support/ … u/gallery1

I ended up with the JS below. It works almost perfectly, except when the window's height is reduced where you get a grey line/rectangle below the gallery (which is also true on an iPhone after you tap the screen the toolbar disappears).
https://www.ouvertlanuit.fr/test/juicebox-incluse/

I'm quite new to Javascript and any help to fine tune mine will be very welcome.

Regards

Gilles 

var jbGallery;
    function setContainerHeight() {
        var winHeight, headerWrapperHeight, footerHeight;
        winHeight = window.innerHeight ? window.innerHeight : $(window).height();
        headerWrapperHeight = $('#headerWrapper').outerHeight();
        footerHeight = $('#footer').outerHeight();
        var newH = parseInt(winHeight) - parseInt(headerWrapperHeight) - parseInt(footerHeight) + 8;
        
        var winWidth, sideWidth;
        winWidth = window.innerWidth ? window.innerWidth : $(window).width();
        sideWidth = $('#aside').outerWidth() + 1;
        var newW = parseInt(winWidth) - parseInt(sideWidth);
        
        $('#stacks_in_2_page28').height(newH);
        return newH;
    }
    
    function doLayout() {
        if(!jbGallery){
            setContainerHeight();
            return;
        }
        window.setTimeout(function(){
            
            var newH = setContainerHeight();
            // var newW = setContainerHeight();
            jbGallery.setGallerySize(newW, newH);
        }, 200);
    }

    $(document).ready(function () {
        doLayout();
        $(window).bind('resize', doLayout);
        jbGallery = new juicebox({
            containerid : 'juicebox-container'
        });
    });
  • Registered: 2012-04-24
  • Posts: 5,924

Re: Resizable in both Height and Width

There is a lot going on in your web page so I cannot be sure that there are no influences outside the code you posted but the problem seems to be either an asynchronous or timing problem of some sort.
However, it might actually be enough to just change the size of the gallery's container without having to explicitly call the Juicebox-Pro API setGallerySize() function.
Try using just the following for your doLayout() function. In might just work fine without the additional code.

function doLayout() {
    setContainerHeight();
}

It's certainly worth a shot before we delve deeper into your web page's code.
I hope it helps.

  • Registered: 2018-09-24
  • Posts: 4

Re: Resizable in both Height and Width

Steven,

A big thank you for your prompt answer!
A quick look at the updated page shows it seems to work fine.

Nonetheless is there else you think I should remove from my JS — as I wrote I just guessed things through your own examples?

Regards
Gilles

  • Registered: 2018-09-24
  • Posts: 4

Re: Resizable in both Height and Width

Steven,

After further testing:
- resizing: OK
- showing thumbnails:OK
- expanding: OK
But expanding after showing thumbs or showing thumbs in expand mode messes everything.

Any extra help will be appreciated.

Regards

Gilles

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

Re: Resizable in both Height and Width

Nonetheless is there else you think I should remove from my JS — as I wrote I just guessed things through your own examples?

As long as your setContainerHeight() function is determining and setting the correct height for your gallery container, then I'd make no functional changes.

You could, however, remove the return newH; line from the setContainerHeight() function as you no longer need the function to return a value.

You could also change $(window).bind('resize', doLayout); to $(window).resize(doLayout);.
Both will work equally well at the moment (there is no functional benefit in using one other the other just now) but jQuery's .bind() method has been superseded (by the .on() method) in jQuery 1.7 and deprecated in jQuery 3.0 so using .resize(doLayout) (as a shortcut for .on('resize', doLayout)) will future-proof your code if or when the version of jQuery bundled within Juicebox is updated.

But expanding after showing thumbs or showing thumbs in expand mode messes everything.

Things look a little messy when your gallery is expanded as your gallery has a transparent background and your web page can be seen behind the expanded gallery.

The two easiest solutions to this would be to either:
(1) Set an expandedBackgroundColor (in JuiceboxBuilder-Pro 'Customize -> Color' section) with an Opacity of '1' (so that the color you choose as the background is fully opaque).
... or:
(2) Set expandInNewPage="TRUE" (in JuiceboxBuilder-Pro 'Customize -> General' section) to expand the gallery on a new page of its own instead of on top of the embedding page.

Either of these solutions should work fine.

  • Registered: 2018-09-24
  • Posts: 4

Re: Resizable in both Height and Width

Hi Steven,

Thank you, it seems to work decently.

I have one more question about thumbnails on one page.
When clicking on the thumbnail button I'd like to view all the thumbnails on one page – as it's the case when in SMALL screen mode.
I tried to activate the Small Screen Mode but then the main image no longer shows in its maximum size (I understood it's logical).
Is there a way to do so?
Or to be more precise I'm more or less trying to mimic what PhotoDeck offers here for example http://www.photographe-culinaire.net/en … ron-caviar:
- a slider on one hand
- on the other hand a full page of thumbnails/previews
- arranged in a masonry/waterfall manner
- when the slideshow is finished (jQuery callback?) it goes to the thumbnails/preview page

Best regards

Gilles

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

Re: Resizable in both Height and Width

The only way to have thumbnails and main images on separate pages is to use Small Screen Mode (by setting screenMode="SMALL" in JuiceboxBuilder-Pro's 'Customize -> General' section).

There are a few things to note, though.

(1) Using Small Screen Mode does not guarantee that all thumbnails will be displayed on a single thumbnail page.
The number of thumbnails displayed per page will depend on the size of the thumbnails, the number of images in the gallery and the amount of space available in the browser viewport.
If there is not enough space available to display all the gallery's thumbnails on a single page, then multiple thumbnail pages will be created (dynamically) and the user can navigate between them using the thumbnail paging arrows.

(2) Juicebox-Pro does not use a masonry style layout.
All thumbnails are the same size as each other, defined by the thumbWidth and thumbHeight configuration options.
In JuiceboxBuilder-Pro, these options are set on the 'Images' tab. Click the 'Change Sizes...' button in the 'Image size' control panel to reveal the 'Set Image Sizes' pop-up window where you can change the thumbnail dimensions.

I tried to activate the Small Screen Mode but then the main image no longer shows in its maximum size (I understood it's logical).

There is no reason why a main image in Small Screen Mode will not be displayed as large as it would in Large Screen Mode.
In Small Screen Mode, the gallery will still occupy the same area on its web page as it would in Large Screen Mode and the main images will still be scaled according to the imageScaleMode value.
In fact, in Small Screen Mode does not support a TOP area and the main image pages display no thumbnails, so there might actually be more space for the images to be displayed in Small Screen Mode that in Large Screen Mode.
Just be aware that if you use the default value for imageScaleMode of SCALE_DOWN, then small images will not be scaled up (as this might decrease their visual quality).
In such a scenario, you could either set imageScaleMode="SCALE" (to scale down large images and scale up small images so that they are all displayed as large as possible within the gallery's image area whilst respecting their aspect ratios and without cropping) or leave imageScaleMode="SCALE_DOWN" and use larger gallery images (so that all images need to be dynamically scaled down slightly to fit within the gallery's image area).

- when the slideshow is finished (jQuery callback?) it goes to the thumbnails/preview page

This is probably more difficult than it sounds.
You'd need to use the Juicebox-Pro API and refer to some internal CSS classes.
It is not something that Juicebox-Pro was designed to do but you could try the following which should detect when the last image in the gallery has been reached (via AutoPlay rather than manual navigation) and then wait for a designated amount of time (to allow the image to be viewed) before displaying the thumbnail page.
Please note that you are certainly free to try (and modify) this if you like but as it is not within the design parameters of Juiccebox-Pro, it is not officially supported.

<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
    var jb = new juicebox({
        autoPlayOnLoad: "TRUE",
        containerId: "juicebox-container",
        screenMode: "SMALL",
        showAutoPlayButton: "TRUE",
        showSmallThumbsButton: "TRUE"
    });
    jb.onInitComplete = function() {
        var count = jb.getImageCount();
        jb.onImageChange = function(e) {
            if (e.id === count && $('.jb-bb-btn-auto-play').first().hasClass('jb-status-playing')) {
                window.setTimeout(function() {
                    // Last image in gallery has been reached via AutoPlay and 5000ms have elapsed.
                    $('.jb-bb-btn-de-show-list').trigger('click');
                }, 1000);
            }
        };
        $('.jb-bb-btn-auto-play').click(function() {
            var index = jb.getImageIndex();
            if (index === count && $('.jb-bb-btn-auto-play').first().hasClass('jb-status-playing')) {
                window.setTimeout(function() {
                    // AutoPlay button has been clicked on last image in gallery and 5000ms have elapsed.
                    $('.jb-bb-btn-de-show-list').trigger('click');
                }, 1000);
            }
            
        });
    };
</script>
<div id="juicebox-container"></div>