Your Cart

animate .resize twelve theme

These forums are now closed to new replies / tickets.

Please open a support ticket from our new Support page.

Front Page Forums Problems animate .resize twelve theme

  • gravatar
    Scot Taylor
    February 2, 2015 at 2:15 am

    I am using the twelve theme and would like resize galleria on a
    event trigger. I have successfully pulled galleria-info out of
    galleria and animate it in when a info button is clicked. I can add
    the resize method in the same click function but it is not very
    smooth to have the text slide in and the image jump. I have tried
    numerous unsuccessful attempts to animate the resize but they
    either break galleria or do nothing. My current working code
    without the resize animating is below.

    `infoBtn.click(function() {

            if(TriggerClick==0) {
                TriggerClick=1;
                $('.galleria-info').animate({width: '30%'}, 250, 'linear');
                gallery.resize({width: '70%'});
                nextSlide.toggle();
                prevSlide.toggle();
            }else {
                TriggerClick=0;
                $('.galleria-info').animate({width: '0'}, 250, 'linear');
                gallery.resize({width: '100%'});                
                nextSlide.toggle();
                prevSlide.toggle();
    
            };
        });
    

    `

    I would greatly appreciate some help or at least a point in the
    right direction.
    Cheers,


    gravatar
    Scot Taylor
    February 2, 2015 at 12:41 pm

    ‘ infoBtn.click(function() {

            if(TriggerClick==0) {
                TriggerClick=1;
                galleryBtn.css('visibility', 'hidden');
                gallery.resize({width: '70%'});
                $('.galleria-info').toggle("fast", "linear");
                nextSlide.toggle();
                prevSlide.toggle();
    
            }else {
                TriggerClick=0;
                $('.galleria-info').toggle("fast", "linear").promise().done(function(){
                    gallery.resize({width: '100%'});
                });  
                galleryBtn.css('visibility', 'visible');
                nextSlide.toggle();
                prevSlide.toggle();
    
    
    
            };
        });
    

    ‘ It’s not perfect and pretty close to what I posted as a
    problem earlier but it is close to the effect I was going for.
    Maybe it will help somebody else looking for something similar.


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