1 Reply by imagil

(6 replies, posted in Juicebox-Pro Support)

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

Go to forum: Juicebox-Pro Support

2 Reply by imagil

(6 replies, posted in Juicebox-Pro Support)

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

Go to forum: Juicebox-Pro Support

3 Reply by imagil

(6 replies, posted in Juicebox-Pro Support)

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

Go to forum: Juicebox-Pro Support

4 Topic by imagil

(6 replies, posted in Juicebox-Pro Support)

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'
        });
    });

Go to forum: Juicebox-Pro Support