fancybox无法使用jscarousel 2

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 1

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/