Cycle plugin & Fancybox conflict

On my latest project, I was trying to integrate Fancybox plugin and jQuery Cycle plugin on the same page. They didn’t play nicely together at first but eventually I got them to work.

The best approach was to use jQuery.noConflict();

First off, I call the FancyBox js files before the Cycle plugin and I reassigned the FancyBox JQuery shortcut to use $jq instead of the standard $.

Here’s the code for how I did it:

<!-- FANCY BOX -->
<link rel="stylesheet" href="/scripts/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
 var $jq = jQuery.noConflict();
</script>
<script type="text/javascript" src="/scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<!-- JQUERY CYCLE -- >
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

<script type="text/javascript">
   jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
 $("#s4")
.after('<div id="slide-show-nav">')
.cycle({
    fx:     'fade',
    speed:  800,
    timeout: 4300,
	pause: 1,
    pager:  '#slide-show-nav',
	 pagerAnchorBuilder: function(idx, slide) {
        return '<a href="#" style="width: 15px;">&nbsp;&nbsp;&nbsp;&nbsp;</a>';
    } 

});

  });

</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$jq("a[rel=example_group]").fancybox({
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});

 });

</script>