I purchased a html template and I have an issue with an implemented quicksand plugin.
The thing is, as soon as I change the content using quicksand, it has a problem at the end. The pictures are floating to other places but at the end they are changed to the right output pics in a very harsh and sudden way.
I only changed the html code, so nothing in the .js file. Here you can see the issue: http://marcknoll.com/work.html Click through the filters and you see what I mean.
Does anybody know what could cause this issue? Thanks in advance!
Cheers, Marc
Please note this. In the list element, data-id of the li elements are repeating after 14th li. starts again from id-1.
<li data-id="id-1" class="photo">
<a href="http://marcknoll.com/images/preview/canals.jpg" rel="image_group">
<img src="work_files/work_1.jpg" alt="Work Image">
</a>
</li>
<li data-id="id-2" class="photo">
<a href="http://marcknoll.com/images/preview/bikes.jpg" rel="image_group">
<img src="work_files/work_2.jpg" alt="Work Image">
</a>
</li>
<li data-id="id-3" class="photo">
<a href="http://marcknoll.com/images/preview/fountain.jpg" rel="image_group">
<img src="work_files/work_3.jpg" alt="Work Image">
</a>
</li>
..........
..........
..........
..........
..........
<li data-id="id-14" class="photo">
<a href="http://marcknoll.com/images/preview/water1.jpg" rel="image_group">
<img src="work_files/work_12.jpg" alt="Work Image">
</a>
</li>
<li data-id="id-1" class="photo"> // data-id repeating
<a href="http://marcknoll.com/images/preview/sony.jpg" rel="image_group">
<img src="work_files/work_13.jpg" alt="Work Image">
</a>
</li>
For the plugin quicksand to work, data-id should be unique for each li. This is the first issue I noticed.
EDIT:
Confirmed. That is the issue. I gave data-ids id-1, id-2, id-3, id-4, id-5 .. id-47, id-48 and now its working fine.