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