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

Isotope Container crashes or I get Jquery width() or/and height()

I'm working on photografer's portifolio website that will emulate a instragram screen using Isotope. Its basicaly a isotope container, a header and a footer. I got a print screen here*. The deal is that I have lots of pictures sizes, so I came up with this jQuery script do figure out the image size and write it down as css.

<script>
    $('.cesco1 img').each(function() {
     var width = 0;   
     var height = 0;
     width += $(this).outerWidth();  
     height += $(this).outerHeight();
     $(this).closest('.cesco1 a').css('width', width );
     $(this).closest('.cesco1').css('width', width );
     $(this).closest('.cesco1 a').css('height', height );
     $(this).closest('.cesco1').css('height', height );         
    });
    </script>

By the way, Im including the images on the html this way. Im using fancybox, but it its running smooth.

<div class="element  metal cesco1 " data-symbol="Hg" data-category="transition"  >
      <a class="fancybox" href="fotos/full/full02.png" data-fancybox-group="gallery">
           <img src="fotos/thumbs/thumb01.png"/>
      </a>
</div>

What happens is that when I run the script as it is I get width() or/and height() equal 0 sometimes on Chrome. Firefow works 100%. Safari only works the first time I acess it. I dont give a f### about ie. So some/all pictures dosnt show on screen. If I put whe script on $(document).ready() the Isotope container crashes,and display weird dimension but the elements div get the right dimensions.

Ive tried imageloaded plugin and $(window).load as the documentation suggest, but no sucess.

----------* I'm abroad and the modem I'm connecting through got the port21 blocked. Cant get to upload the the site four you guys.

User Gravatar

cesco

Posted Dec 9 2013 7:35 UTC

$100


  • Assigned To cesco
  • Solved
  • jquery
    isotope
  • 2009 Views

4 Replies


Hello cesco,

For webkit browsers you should wait for window load event to get the real image size. Or the better solution - add image size as width and height attributes to the img tag (don't worry it's valid code).

So if you decide to use the load event, here is the code:

<script>
    $(window).on('load', function(){
        $('.cesco1 img').each(function() {
            var width = 0;   
            var height = 0;
            width += $(this).outerWidth();  
            height += $(this).outerHeight();
            $(this).closest('.cesco1 a').css('width', width );
            $(this).closest('.cesco1').css('width', width );
            $(this).closest('.cesco1 a').css('height', height );
            $(this).closest('.cesco1').css('height', height );         
        });
    });
</script>

Example of image with size attributes:

<img src="image.jpg" width="100px" height="100px" alt="">

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Dec 9 2013 9:04 UTC

NBoychev,

i've tried it before and it doesnt work as well, the container crashes! With the same images as the print screen I get a 1440px width and 10px height container. See the print screen of what happens here. But i just figured out that when I resize the browser, Isotope recalculates the container and the whole thing work like a charm on Chrome, Safari and Firefox! Im using centered masonary, how can i trigger isotope to recalculate its size after my script runs? Like fake a browser resize?

User Gravatar

cesco

Posted Dec 9 2013 12:41 UTC

Hello cesco,

If this work for you, you can trigger the resize event:

$(window).trigger('resize');

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Dec 9 2013 12:45 UTC

Nikola,

Thanks for your help! Your code didn't work, but it made me get it right! I was going over the documentation and found the onLayout function. The final working code is the following:

<script>
    $(window).on('load', function(){
        $('.cesco1 img').each(function() {
            var width = 0;   
            var height = 0;
            width += $(this).outerWidth();  
            height += $(this).outerHeight();
            $(this).closest('.cesco1 a').css('width', width );
            $(this).closest('.cesco1').css('width', width );
            $(this).closest('.cesco1 a').css('height', height );
            $(this).closest('.cesco1').css('height', height );     


            $('#container').isotope({
              onLayout: function( $elems, instance ) {
                // `this` refers to jQuery object of the container element
                console.log( this.height() );
                // callback provides jQuery object of laid-out item elements
                $elems.css({ background: 'blue' });
                // instance is the Isotope instance
                console.log( instance.$filteredAtoms.length );
              }
            });

        });
    });
</script>
User Gravatar

cesco

Posted Dec 9 2013 12:58 UTC

Solution

This didn't solve your task? Get your own custom solution.

Add a reply

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