CODEWITHSUNDEEP
jqueryjquery-isotope
Robert
Robert

Reputation: 925

Binding Window Size In Jquery

I am developing isotope gallery, The problem I am gettings is when the window size shrinks or expands the images overlap sometimes until you click the navigation again.

It loads fine when using:

jQuery(window).load(function($) {

// <![cdata[ 
jQuery('.shortcode-portfolio').isotope({
    animationOptions: {
        duration: 750
    },
    animationEngine : 'best-available',
    itemSelector: '.thisportfolioitem'
});
// ]]> 

});

But then the window resizes the images overlap sometimes, this I think is because I am using css media to choose the image size rather than inline height and width on the images.

Now When I do this:

jQuery(window).load(function($) {

        // <![cdata[ 
        jQuery('.shortcode-portfolio').isotope({
            animationOptions: {
              duration: 750
            },
            animationEngine : 'best-available',
            itemSelector: '.thisportfolioitem'
        });
        // ]]> 

    });
    jQuery(window).resize(function($) {

        // <![cdata[ 
        jQuery('.shortcode-portfolio').isotope({
            animationOptions: {
              duration: 750
            },
            animationEngine : 'best-available',
            itemSelector: '.thisportfolioitem'
        });
        // ]]> 

    });

Everything works 100% but there must be a better way of doing this because its never good loading the same thing twice.

Can I please have some help making the code better.

Thanks

Upvotes: 0

Views: 57

Answers (1)

Kristaps Karlsons
Kristaps Karlsons

Reputation: 482

// <![cdata[ 
jQuery(function() {
    var $shortcodePortfolio = jQuery('.shortcode-portfolio');
    $shortcodePortfolio.isotope({
        animationOptions: {
          duration: 750
        },
        animationEngine : 'best-available',
        itemSelector: '.thisportfolioitem'
    });

    jQuery(window).resize(function() {
        $shortcodePortfolio.isotope('reLayout');
    });
});
// ]]>

(Cleaned up a bit; cdata can and should wrap everything.)

Upvotes: 1

Related Questions