Question

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

Answer 1

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.