The issue is you're using two of the same IDs on one page. IDs must be unique, and you must group all your items in one particular ID (which is #container
) in order for isotope to apply to all .item
nodes. I've clarified the HTML to demonstrate this (this will make all four items interact with each other):
<div id="container">
<img class="item" src="./download/file.php?id=77&t=1" alt="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" width="200" height="126" />
<img class="item" src="./download/file.php?id=80&t=1" alt="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" width="200" height="133" />
<img class="item" src="./download/file.php?id=90&t=1" alt="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" title="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" width="200" height="133" />
<img class="item" src="./download/file.php?id=92&t=1" alt="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" title="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" width="200" height="126" />
</div>
Keep in mind isotope positions all your elements based on the #container
width and height, so your chances of having .item
in two separate IDs may not work well unless you explicitly declare both IDs. Here's an example of having two separate isotope instances:
<div id="container">
<img class="item" src="./download/file.php?id=77&t=1" alt="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" width="200" height="126" />
<img class="item" src="./download/file.php?id=80&t=1" alt="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" width="200" height="133" />
</div
<div id="container2">
<img class="item" src="./download/file.php?id=90&t=1" alt="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" title="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" width="200" height="133" />
<img class="item" src="./download/file.php?id=92&t=1" alt="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" title="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" width="200" height="126" />
</div>
and the JS:
var $container = $('#container');
var $container2 = $('#container2');
$container.isotope({
itemSelector: '.item',
animationEngine : 'jquery',
animationOptions: {
duration: 350,
easing: 'linear',
queue: false
},
masonry: {
columnWidth: 203
}
});
$container2.isotope({
itemSelector: '.item',
animationEngine : 'jquery',
animationOptions: {
duration: 350,
easing: 'linear',
queue: false
},
masonry: {
columnWidth: 203
}
});
Good luck!