BG Carousel only shows first slide

[therealex]

1) Script Title: Background Image Carousel v1.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...bgcarousel.htm

3) Describe problem: I got it working, but it only shows the first photo in the series of four. If I manually forward it, it shows the last photo for a fraction of a second, but it's all pushed to the right side and it just flashes for a second. All the options are default values, the only thing I changed was the path for the photos. The first one shows perfectly. The navigation gifs show on all frames, and they have the same path as the other graphics. I also removed the optional description, just to see if it helped (it didn't). I know this is something dumb, but I'm not finding it.

Here's a link to the page:
http://www.hitmanbluesband.com/index_experimental.html


Thanks, in advance, for your help.

- Russ

[jscheuer1]

There could also be other problems but the first two descriptions have invalid markup:

<script type="text/javascript">

var firstbgcarousel=new bgCarousel({
	wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
	imagearray: [
		['./slideshow/audience1.jpg', '<div align="left"><img src="images/hitman cropped logo for website.jpg" width="100" height="66">'], //["image_path", "optional description"]
		['./slideshow/balcony.jpg', '<div align="left"><img src="images/hitman cropped logo for website.jpg" width="100" height="66">'],
		['./slideshow/slide1.jpg', 'The scent of spring invigorates her as she inhales whilst the warm breeze brings a wave of tranquility.'],
		['./slideshow/bass.jpg','holder'],
		['./slideshow/slide2.jpg', 'Alone and Lonliness- Peace and Inner Struggle'] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
	navbuttons: ['./slideshow/left.gif', './slideshow/right.gif', './slideshow/up.gif', './slideshow/down.gif'], // path to nav images
	activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
	orientation: 'h', //Valid values: "h" or "v"
	persist: true, //remember last viewed slide and recall within same session?
	slideduration: 500 //transition duration (milliseconds)
})

</script>

Try closing the divs:

<script type="text/javascript">

var firstbgcarousel=new bgCarousel({
	wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
	imagearray: [
		['./slideshow/audience1.jpg', '<div align="left"><img src="images/hitman cropped logo for website.jpg" width="100" height="66"></div>'], //["image_path", "optional description"]
		['./slideshow/balcony.jpg', '<div align="left"><img src="images/hitman cropped logo for website.jpg" width="100" height="66"></div>'],
		['./slideshow/slide1.jpg', 'The scent of spring invigorates her as she inhales whilst the warm breeze brings a wave of tranquility.'],
		['./slideshow/bass.jpg','holder'],
		['./slideshow/slide2.jpg', 'Alone and Lonliness- Peace and Inner Struggle'] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
	navbuttons: ['./slideshow/left.gif', './slideshow/right.gif', './slideshow/up.gif', './slideshow/down.gif'], // path to nav images
	activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
	orientation: 'h', //Valid values: "h" or "v"
	persist: true, //remember last viewed slide and recall within same session?
	slideduration: 500 //transition duration (milliseconds)
})

</script>

As I say though, there could also be something else. (I just tested it and that seems to be the only issue with the slideshow, though the page itself has other errors.)

The browser cache may need to be cleared and/or the page refreshed to see changes.

[therealex]

Dang, i knew it was something dumb! I'm on the road right now, but I'll check when i get back Saturday. I'm guessing that's it, though.

Thanks!

[therealex]

That was it. Works like a charm now! Thank you for the help!

- Russ

There could also be other problems but the first two descriptions have invalid markup:

<script type="text/javascript">

var firstbgcarousel=new bgCarousel({
	wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
	imagearray: [
		['./slideshow/audience1.jpg', '<div align="left"><img src="images/hitman cropped logo for website.jpg" width="100" height="66">'], //["image_path", "optional description"]
		['./slideshow/balcony.jpg', '<div align="left"><img src="images/hitman cropped logo for website.jpg" width="100" height="66">'],
		['./slideshow/slide1.jpg', 'The scent of spring invigorates her as she inhales whilst the warm breeze brings a wave of tranquility.'],
		['./slideshow/bass.jpg','holder'],
		['./slideshow/slide2.jpg', 'Alone and Lonliness- Peace and Inner Struggle'] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
	navbuttons: ['./slideshow/left.gif', './slideshow/right.gif', './slideshow/up.gif', './slideshow/down.gif'], // path to nav images
	activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
	orientation: 'h', //Valid values: "h" or "v"
	persist: true, //remember last viewed slide and recall within same session?
	slideduration: 500 //transition duration (milliseconds)
})

</script>

Try closing the divs:

<script type="text/javascript">

var firstbgcarousel=new bgCarousel({
	wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
	imagearray: [
		['./slideshow/audience1.jpg', '<div align="left"><img src="images/hitman cropped logo for website.jpg" width="100" height="66"></div>'], //["image_path", "optional description"]
		['./slideshow/balcony.jpg', '<div align="left"><img src="images/hitman cropped logo for website.jpg" width="100" height="66"></div>'],
		['./slideshow/slide1.jpg', 'The scent of spring invigorates her as she inhales whilst the warm breeze brings a wave of tranquility.'],
		['./slideshow/bass.jpg','holder'],
		['./slideshow/slide2.jpg', 'Alone and Lonliness- Peace and Inner Struggle'] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
	navbuttons: ['./slideshow/left.gif', './slideshow/right.gif', './slideshow/up.gif', './slideshow/down.gif'], // path to nav images
	activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
	orientation: 'h', //Valid values: "h" or "v"
	persist: true, //remember last viewed slide and recall within same session?
	slideduration: 500 //transition duration (milliseconds)
})

</script>

As I say though, there could also be something else. (I just tested it and that seems to be the only issue with the slideshow, though the page itself has other errors.)

The browser cache may need to be cleared and/or the page refreshed to see changes.