Your Cart

Resize galleria height upon carousel being showed/hidden

These forums are now closed to new replies / tickets.

Please open a support ticket from our new Support page.

Front Page Forums Questions Resize galleria height upon carousel being showed/hidden

  • gravatar
    vale
    July 18, 2015 at 11:34 am

    Hi,
    I’m trying to do something with a custom theme I’m creating for
    Galleria.
    Basically I’d like to have a button which show/hides the thumbnails
    carousel.
    I’m doing this via CSS, by having blinded on click events on the
    button a toggling a class .disabled on the
    galleria-thumbnails-container element and invoking the rescale()
    method:

    //The button for thumbnails

        //let's create it
        this.addElement('bottone-thumbs');
        //let's chache it
        var 
            $thumbnailsContainer = this.$('thumbnails-container'),
            $buttonThumbs = this.$('bottone-thumbs');
        //let's bind the the click event on the button with stuff we need to toggle
        $buttonThumbs.click(this.proxy(function(e) {
            $thumbnailsContainer.toggleClass('disabled');
            $buttonThumbs.toggleClass('onbutton');
            this.rescale();
        })); 
        //let's append it
        this.appendChild('container', 'bottone-thumbs');
    
        //END of the button for thumbnails view
    

    Classes toggles fine, so does the css, but galleria won’t
    rescale its height upon these changes. Here’s the css too:

    .galleria-thumbnails-container { border: 1px solid #3e454c;
    padding-top: 15px; padding-bottom: 30px; height: 85px; bottom: 0;
    position: absolute; left: 10px; right: 10px; z-index: 2;
    background-color: #181b1e; background-image:
    url(‘opt-cicada-3.png’), -webkit-gradient( linear, left top, right
    top, color-stop(10%, #181b1e), color-stop(50%, #23282c),
    color-stop(90%, #181b1e) ); background-image:
    url(‘opt-cicada-3.png’), -moz-linear-gradient( left center, #181b1e
    10%, #23282c 50%, #181b1e 90% ); background-image:
    url(‘opt-cicada-3.png’), -o-linear-gradient( 0deg, #181b1e 10%,
    #23282c 50%, #181b1e 90% ); -webkit-transition: all 0.25s
    ease-in-out; -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s
    ease-in-out; transition: all 0.25s ease-in-out; }
    .galleria-thumbnails-container.disabled { height: 0; padding: 0;
    margin: 0; border: none; -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s
    ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all
    0.25s ease-in-out; }

    What am I doing wrong?
    Thanks for any given help.


Galleria.io uses cookies to store information. You can read more about that in our Privacy Policy. I understand