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 uses cookies to provide necessary site functionality. By using our website, you agree to our Privacy Policy. I understand