Problemas al usar jQuery quicksand con fancybox

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 fancybox jQuery. but the problem is in this Making a Beautiful HTML5 Portfolio(quicksand jQuery) example images are in <Ul> <LI> Tag, when in fancybox jQuery example have <p> Tag.

I am not able to select the anchor tag between ul li.

<!DOCTYPE html>
        <meta charset="utf-8" />

        <title>Making a Beautiful HTML5 Portfolio | Tutorialzine Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src=""></script>

        <script type="text/javascript" src=""></script>
            !window.jQuery && document.write('<script src="assets/js/jquery-1.4.3.min.js"><\/script>');

        <script src="assets/js/jquery.quicksand.js"></script>
        <script src="assets/js/script.js"></script>

        <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
        <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="./fancybox/style.css" />
        <script type="text/javascript">
            $(document).ready(function() {

                    'overlayShow'   : false,
                    'transitionIn'  : 'elastic',
                    'transitionOut' : 'elastic'
                $("ul li a#example2").fancybox({
                    'overlayShow'   : false,
                    'transitionIn'  : 'elastic',
                    'transitionOut' : 'elastic'



            <h1>My Portfolio</h1>

        <nav id="filter"></nav>

        <section id="container">
        <a id="example2" href="assets/img/shots/1.jpg"><img src="assets/img/shots/1.jpg" alt="Illustration" /></a>
            <ul id="stage">
                <li data-tags="Print Design"><a id="example2" href="#"><img src="assets/img/shots/1.jpg" alt="Illustration" /></a></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/2.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design,Logo Design"><img src="assets/img/shots/3.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design,Print Design"><img src="assets/img/shots/4.jpg" alt="Illustration" /></li>
                <li data-tags="Logo Design"><img src="assets/img/shots/5.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design,Logo Design,Print Design"><img src="assets/img/shots/6.jpg" alt="Illustration" /></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/7.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design"><img src="assets/img/shots/8.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design,Logo Design"><img src="assets/img/shots/9.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design"><img src="assets/img/shots/10.jpg" alt="Illustration" /></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/11.jpg" alt="Illustration" /></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/12.jpg" alt="Illustration" /></li>
                <li data-tags="Print Design"><img src="assets/img/shots/13.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design,Logo Design"><img src="assets/img/shots/14.jpg" alt="Illustration" /></li>
                <li data-tags="Print Design"><img src="assets/img/shots/15.jpg" alt="Illustration" /></li>
                <li data-tags="Logo Design"><img src="assets/img/shots/16.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design,Logo Design,Print Design"><img src="assets/img/shots/17.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design"><img src="assets/img/shots/18.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design,Print Design"><img src="assets/img/shots/19.jpg" alt="Illustration" /></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/20.jpg" alt="Illustration" /></li>
                <li data-tags="Web Design,Logo Design"><img src="assets/img/shots/21.jpg" alt="Illustration" /></li>
                <li data-tags="Print Design"><img src="assets/img/shots/22.jpg" alt="Illustration" /></li>
                <li data-tags="Logo Design,Print Design"><img src="assets/img/shots/23.jpg" alt="Illustration" /></li>


            <h2>Making a Beautiful HTML5 Portfolio</h2>
            <a class="tzine" href="">Read &amp; Download on</a>


in this code images in P tag working for fancy box but in ul li tags they aren't.

Creo que el problema esta aqui

<script type="text/javascript">
                $(document).ready(function() {

                        'overlayShow'   : false,
                        'transitionIn'  : 'elastic',
                        'transitionOut' : 'elastic'
                    $("ul li a#example2").fancybox({
                        'overlayShow'   : false,
                        'transitionIn'  : 'elastic',
                        'transitionOut' : 'elastic'


código completo

preguntado el 08 de noviembre de 11 a las 09:11

Most people won't bother reading through so much code. If you can, try minimizing it to a level where the problem still exists, but the code is smaller. -

@Amaan ohh then see the last code of jQuery selection, i wrote their this is main problem. -

Is there a reason why you attempt to apply fancybox twice? -

the first one is working for image <p> <a id="example2" href="assets/img/shots/1.jpg"><img src="assets/img/shots/1.jpg" alt="Illustration" /></a> </p> but second one is not working for images in <p> <ul id="stage"> <li data-tags="Print Design"><a id="example2" href="#"><img src="assets/img/shots/1.jpg" alt="Illustration" /></a></li></ul></p> Thats the problem -

2 Respuestas


La principal 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.

aquí está ejemplo de trabajo of using quicksand with fancybox:

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.

Aparte de eso, 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.

contestado el 29 de mayo de 12 a las 14:05

Your example not working here for fancybox after clicking on image - Ajay Patel

Finally solved it !!! Really nice solution(CLASS) given and explain by you. Thanks !! - Ajay Patel

Reusing an id is invalid. Try either

  1. Using a different ID for the a en el objeto ul

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

respondido 08 nov., 11:13

i have tried for different class also, let me try id for a in the ul. download my code from may you can help me better way - Ajay Patel

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.