Fade-in slideshow clashing with jcarousel

**londontyler** · 05-18-2010, 12:31 PM

Hi,

I am running the Ultimate Fade-in slideshow that utilises Jquery, alongside the jcarousel plug-in for Jquery.

When i run them separately they work fine, but put together on the same page and they are not running. I have tried placing the scripts in different orders in the head with no joy.

carousel on it's own - http://www.dave-tyler.co.uk/test/carousel.html

Fade-in on it's own - http://www.dave-tyler.co.uk/test/fadeslideshow.html

Together - http://www.dave-tyler.co.uk/test/bothscripts.html

The code in the head section is:

HTML Code:

<head>

<link href="css/maintest.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<!--CAROUSEL SCRIPT-->
<script type="text/javascript" src="js/jCarouselLite.js"></script>
<script type="text/javascript">

 $(document).ready(
				function(){
    $(".carousel").jCarouselLite({
		auto: 1500,
		speed: 3000
    });
});
</script>

<!--FADE SLIDESHOW SCRIPT-->
<script type="text/javascript" src="js/fadeslideshow.js"></script>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [364, 274], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/sale2.jpg", "", "", "" ],
		["images/sale2.jpg", "", "", "" ],
		["images/sale3.jpg", "", "", ""],
		["images/sale4.jpg", "", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: ""
})

</script>


</head>

any ideas why this is happening?

**azoomer** · 05-18-2010, 03:00 PM

Guessing there is some conflict i tried to change a part of your script replacing $ with jQuery like this

Code:

<script type="text/javascript">

 jQuery(document).ready(
				function(){
    jQuery(".carousel").jCarouselLite({
		auto: 1500,
		speed: 3000
    });
});
</script>

on my computer it got both shows running. You can try to see if it works. If not it may be an idea to try to make a new variable in jQuery noconflict mode. But i don't know much about that.

**londontyler** · 05-18-2010, 04:04 PM

that works great, thanks for the taking the time.

Thread: Fade-in slideshow clashing with jcarousel

Thread Tools

Search Thread

Fade-in slideshow clashing with jcarousel

Bookmarks

Bookmarks

Posting Permissions