jCarousel and Fancybox

Question

Hi.

On one of my content pages, I'm using the jCarousel and Fancybox JQuery plugins.

The problem is that only one of them works at a time, so I think there must be a conflict.

This is the code used:

<script src="js/jquery.jcarousel.min.js"></script>  
<script>
  jQuery(document).ready(function() {
  jQuery('.showcase').jcarousel({
    start: 1
    });
});
</script>

<script>
$(document).ready(function() {
    $('.fancybox-form').attr("href", "contact.php").fancybox({
      "width" : 400,
      "height" : "90%",
      "autoScale" : false,
      "transitionIn" : "elastic",
      "transitionOut" : "elastic",
      "type" : "iframe"
    }); 
});
</script>

Is there a conflict between the "jQuery(document).ready(function()" of the jcarousel script and the "$(document).ready(function()" of the fancybox script?

Any help on how to overcome the conflict (if this is the problem) would be appreciated.

Thanks, Mark.

Answer 1

It appears your problem is in the fact that jCarousel moves images in and out of view - causing a problem with fancybox. So the answer is that you cannot easily use both together (without re-writing the fancybox plug-in).

I would look at using a different carousel that already has the expand pop-up feature built-in.

On a side note, I would place all of the code in either

jQuery(document).ready(function()

or

$(document).ready(function()

for cleanliness.