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

Isotope Load and Insert

I`m using isotope, with a custom infinity loop over wordpress On my Isotope, I have posts width defined by the user. So, heres the way I initialize

if ($(\'#category\').exists()) {
    var $container = $(\'#category\');
    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: \'.item\',
            masonry: {
                columnWidth: 1
            },
            animationEngine: \'jquery\'
        });

    });
}
  • Even using imagesLoaded, I have posts overlapping posts.

To test http://exemplarid.com/wp-admin

user tester

pass tester

Back to http://exemplarid.com

User Gravatar

gumail

Posted Jun 17 2013 16:12 UTC

$10


  • Assigned To NBoychev
  • Solved
  • jquery
    isotope
  • 1842 Views

3 Replies


Hello gumail,

The best practice, when applying JS on images is to give them width and height by HTML attributes. So all images should look like this:

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

This will force them to have a size, that JS can get even when they aren't loaded completely.

The other thing that I saw is that instagram slider. You should relayout isotope after slider initialise:

(scripts.js)

    if ($('.instagram .slider').exists()) {
        $('.instagram .slider').cycle({
            timeout: 5000,
            slides: '> .slide',
            pauseOnHover: false
        });
            $('#category').isotope('reLayout'); // this is the line that you should add
    }

But if the images are all with same height, just add height to the container in the CSS:

.ad.instagram { width:306px; height:306px; }

Regards, Nikola Boychev

User Gravatar

NBoychev

Posted Jun 17 2013 19:24 UTC

Solution

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

Hi NBoychev! Thanks!

Calling

$(\'#category\').isotope(\'reLayout\') 

says:

Cannot call methods on isotope prior to initialization; attempted to call method \'insert\' Because the object didnĀ“t initialized

But adding height to css looks great! Thanks!

Can I use paypal?

User Gravatar

gumail

Posted Jun 18 2013 0:27 UTC

Hi Gumail,

I\'m unable to contact you by mail. Can you please e-mail me to dror@codersclan.net

Thanks!

User Gravatar

Dror

Posted Jun 19 2013 22:40 UTC

Add a reply

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