0

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

makke
  • 21
  • 2

1 Answers1

0

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.

Diode
  • 24,570
  • 8
  • 40
  • 51
  • Yes it worked out. Guess I didn't see it when copying the lines to add additional elements. A classic rookie mistake;) Thanks a lot for the quick answer! – makke Dec 26 '11 at 12:20
  • Ok now there is another small issue. I fixed it, and put it online. Offline, I tried it in Chrome and it worked perfectly but when I visit the page online the animation effect is screwed up a bit. the pics overlay each other and then jump to their position. In firefox, I dont have this issue. – makke Dec 26 '11 at 12:45