0

I am using the Jquery Isotope plugin with divs that have a back ground image and that are a particular size:

.frontpageimage {
    height: 200px;
    width: 200px;
    background-image: url('tile1.jpg');
}

This works fine. But I want to throw something in there that randomly selects and image and makes it bigger then the others, so I created this:

$('#isotopecontainer .isotope-item:nth-child(2)').find('.frontpageimage').addClass('frontpageimagehigh');


.frontpageimagehigh {
    height: 420px;
    width: 200px;
}

(note: currently it is hard coded to select the 2nd image - will work on the randomisation later.)

Trouble is if I insert the above code above where Isotope is called it doesnt work.

If I insert the above code after Isotope is called, it works but the images overlap - ie: the image changes size after Isotope has rendered them.

Does anyone know how to perhaps add this to the existing isotope script? Or would anyone have any suggestions for me? Please let me know if clarification is needed.

Thanks

4

1 回答 1

0

好的，所以我发现添加我自己的类来代替 isotope-item 并调整我的 JQuery 以及将其移回同位素调用之上就可以了：

$('#isotopecontainer .item:nth-child(2)').find('.frontpageimage').addClass('frontpageimagehigh');

<div class="item isotope-item"...

希望这可以帮助某人。如果您需要更多信息，请给我留言

于 2012-12-11T07:17:01.327 回答