jQuery Using 2 Plugins at once

[scottybwoy]

Hi,

 

Please forgive my ignorance of Javascript and jQuery.  This may be a really simple issue.

 

I'm using two plugins; gradient & gallerific.

 

At the top of my page I have :

<script type="text/javascript" src='js/gallerific.js'></script>
<script type="text/javascript" src='js/gradient.js'></script>
<script type="text/javascript">
$(document).ready(function() {
   		$('body').gradient({ from: '2f9833', to: 'ffffff' });
	});
</script>

 

And this code at the bottom :

<script type="text/javascript">
		// We only want these styles applied when javascript is enabled
		$('div.navigation').css({'width' : '300px', 'float' : 'left'});
		$('div.content').css('display', 'block');

		// Initially set opacity on thumbs and add
		// additional styling for hover effect on thumbs
		var onMouseOutOpacity = 0.67;
		$('#thumbs ul.thumbs li').css('opacity', onMouseOutOpacity)
			.hover(
				function () {
					$(this).not('.selected').fadeTo('fast', 1.0);
				},
				function () {
					$(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
				}
			);

		$(document).ready(function() {
			// Initialize Advanced Galleriffic Gallery
			var galleryAdv = $('#gallery').galleriffic('#thumbs', {
				delay:                  2000,
				numThumbs:              12,
				preloadAhead:           10,
				enableTopPager:         true,
				enableBottomPager:      true,
				imageContainerSel:      '#slideshow',
				controlsContainerSel:   '#controls',
				captionContainerSel:    '#caption',
				loadingContainerSel:    '#loading',
				renderSSControls:       true,
				renderNavControls:      true,
				playLinkText:           'Play Slideshow',
				pauseLinkText:          'Pause Slideshow',
				prevLinkText:           '‹ Previous Photo',
				nextLinkText:           'Next Photo ›',
				nextPageLinkText:       'Next ›',
				prevPageLinkText:       '‹ Prev',
				enableHistory:          true,
				autoStart:              false,
				onChange:               function(prevIndex, nextIndex) {
					$('#thumbs ul.thumbs').children()
						.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
						.eq(nextIndex).fadeTo('fast', 1.0);
				},
				onTransitionOut:        function(callback) {
					$('#caption').fadeTo('fast', 0.0);
					$('#slideshow').fadeTo('fast', 0.0, callback);
				},
				onTransitionIn:         function() {
					$('#slideshow').fadeTo('fast', 1.0);
					$('#caption').fadeTo('fast', 1.0);
				},
				onPageTransitionOut:    function(callback) {
					$('#thumbs ul.thumbs').fadeTo('fast', 0.0, callback);
				},
				onPageTransitionIn:     function() {
					$('#thumbs ul.thumbs').fadeTo('fast', 1.0);
				}
			});
		});
	</script>

Problem is, when I want to Play the slideshow or navigate to the next image, it adds a 2 after the # in the URI.  You can see it in action here.

 

I can't find where this comes from, but if I take the gradient plugin out it works fine.

 

I have also noticed that both plugins start with

function($) {

So is the script trying to call the same function?  what does the $ represent and would that be the cause of my problem?

 

Any pointers, greatly appreciated.