Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Isotope v2 and “img height:auto” of .img-responsive of Bootstrap 3

Hi,

my problem is overlap when I use "img-responsive" class tag on img.

When i resize window everything works good.

Any fix?

I use this code:

< script type="text/javascript"> jQuery(function(){ jQuery('#divIsotope').imagesLoaded( function() { jQuery('#divIsotope').isotope({ itemSelector: '.item', layoutMode: 'masonry', stamp: '.infoIsotope' }); jQuery('#divIsotope').isotope('layout'); }); }); < /script>

but nothing change. If I remove from img the class "img-reponsive" everything works.

I'm using Bootstrap 3.0.3.

User Gravatar

lexmealux

Posted Dec 27 2013 7:36 UTC

$50


  • isotope
    bootstrap
  • 2775 Views

2 Replies


Hello lexmealux,

It's hard to debug without the actual code, but here are two examples that would help:

Try triggering 'layout' method after page load:

jQuery(function(){
    jQuery('#divIsotope').imagesLoaded( function() {
        jQuery('#divIsotope').isotope({
            itemSelector: '.item',
            layoutMode: 'masonry',
            stamp: '.infoIsotope'
        });
        jQuery('#divIsotope').isotope('layout');
    });

    jQuery(window).on('load', function(){
        jQuery('#divIsotope').isotope('layout');
    });
}); 

If this doesn't help, you can try triggering the 'resize' event, then isotope will work just like you have resized the window, after page load:

jQuery(function(){
    jQuery('#divIsotope').imagesLoaded( function() {
        jQuery('#divIsotope').isotope({
            itemSelector: '.item',
            layoutMode: 'masonry',
            stamp: '.infoIsotope'
        });
        jQuery('#divIsotope').isotope('layout');
    });

    jQuery(window).on('load', function(){
        jQuery(window).trigger('resize');

    });
}); 

(Insert the new code in the script tag)

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Dec 27 2013 9:35 UTC

Nothing to do.

User Gravatar

lexmealux

Posted Dec 27 2013 10:32 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions