Question: i'm having a php code used with jscarousel 2

```
http://www.egrappler.com/jquery-contentthumbnail-slder-v2-0-jscarousel-v2-0/

```

to display items from the database as a carousel and having links like this

```
<a id="addtocart" product="<?php echo $productID; ?>" href="#addDiv" >add</a>

```

and a hidden div

```
<div style="display:none">
<div id="addDiv" style="width:300px; height:250px; background-color:#969;">test</div>
</div>

```

and another link just for testing and it's not inside the carousel just like the previous one

the problem is : links inside the carousel don't show the fancybox while the other link outside the carousel shows the fancybox i've tried this

```
$(document).ready(function(e) {

$("a#addtocart").fancybox({
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic' 
    });
$(document).on("click","a#addtocart",function(){
            $(this).fancybox({
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic' 
    });
});
});

```

any help please ?

Answer: 
What exactly do you want to do? I think the problem is, you are working with IDs. Maybe you should add the "click" event you are using to a class. Every ID may be in a html document just once, so you can just have one element with the ID addtocart.

```
<a href="#addDiv" class="fancybox" product="<?php echo $productID; ?>">add</a>

```

Try this jQuery:

```
$(document).ready(function(e) {
    $("a .fancybox").fancybox({
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic' 
    });

    $(document).on("click","a .fancybox", function() {
        $(this).fancybox({
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic' 
    });
});

```

When you use the dot (.) instead of the hashkey (#) you are able to use classes instead of ids.

If that does not help you, you can find an implementation of jCarousel and Fancybox right here: <http://www.mccran.co.uk/examples/jcarousel/>
the solution :
just used this code at the end of the document.ready

```
$("a.add_to_cart").fancybox({
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic' 
    });

```

and worked normally but after document.ready makes it doesn't work