Problems using jQuery quicksand with fancybox

Question

I am using this example of quicksand jQuery.

Making a Beautiful HTML5 Portfolio

Now, i want to open light box when clicking on image. for this i am using fan

Answer 1

Fixed it.

The main reason fancybox didn't want to get along quicksand in your code is because of how quicksand plugin works. What quicksand does (in order to animate elements when reorganizing visible structure) is cloning the elements and injects copy of those into the DOM. Any events attached to those elements are gone after shuffling is done. This is why fancybox didn't work for those elements.

The way to fix this is described in quicksand plugin documentation (section "Integration with other plugins"). It involves passing a callback function to quicksand as a second element. That callback will be executed once the shuffling is done, in our case it will be responsible for finding and re-applying fancybox to elements that were shuffled.

Here's working example of using quicksand with fancybox: http://jsfiddle.net/E2vLq/29/

Please note two things about the code:

• All links in the LI's have now class fsand (so we don't use same id over and over again).
• Passing the callback to quicksand that is re-applying fancybox to all elements that match a.fsand selector.

Apart from that, there were two other issues:

• Using same id for two elements on the same site (it is forbidden in general and according to html specs).
• You failed to close paragraph element after UL.

Answer 2

Reusing an id is invalid. Try either

1. Using a different ID for the a in the ul

2. Using a different mechanism for referencing the element - e.g. use class