Background Image Carousel won't load stuck on black background

[accessotronik]

1) Script Title: Background Image Carousel

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

3) Describe problem: The script will not load, and is stuck on the black background:

accessotronik.com/

Thank you for your help!

[jscheuer1]

There could also be other problems but:

accessotronik.com/bgcarousel.js

is a 404 Not Found.

Oh yeah, there is another problem here (missing comma - added in red):

<script type="text/javascript">

var firstbgcarousel=new bgCarousel({
	wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
	imagearray: [
		['http://www.accessotronik.com/v/vspfiles/slideshow/solderstation2.jpg', ''],
		['http://www.accessotronik.com/v/vspfiles/slideshow/ATRIX.jpg', ''],
		['http://www.accessotronik.com/v/vspfiles/slideshow/bwcases.jpg', ''],
		['http://www.accessotronik.com/v/vspfiles/slideshow/dymo2.jpg', ''] //<--no trailing comma after very last image element!
	],
linkarray: [
		'http://www.accessotronik.com/Soldering_Rework_System_s/292.htm',
		'https://www.accessotronik.com/Atrix_promo_s/1187.htm',
		'http://www.accessotronik.com/B_W_International_s/810.htm',
		'http://www.accessotronik.com/Articles.asp?ID=259'
	],
	displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
	navbuttons: ['http://www.accessotronik.com/v/vspfiles/slideshow/left.gif', 'http://www.accessotronik.com/v/vspfiles/slideshow/right.gif', 'http://www.accessotronik.com/v/vspfiles/slideshow/up.gif', 'http://www.accessotronik.com/v/vspfiles/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>

And there still could be yet other problems.

[accessotronik]

Hi John,

Thank you for your quick reply. i forgot to change the link to my JS file in the code, i have fixed my loading error.


I now have the error : Error: DIV with ID "mybgcarousel" not found on page.

Any idea why?

Thank you!

[jscheuer1]

I'm not getting that on:

accessotronik.com/Default.asp

In fact, the slideshow is working. Is there some other page? Perhaps you fixed it.

If not, make sure to clear the browser cache and reload the page.

[accessotronik]

It is once you click on the link from the slideshow, when the other page load, you will receive the message Error: DIV with ID "mybgcarousel" not found on page.

[jscheuer1]

That's because you have the scripts on a page that doesn't have that div. What you should do is either not have the scripts on that page, that's if you don't want the carousel on that page, or put the div on that page and as long as the paths to the images and css are valid, it can have the carousel too. But the problem might be your CMS. If you cannot leave the scripts off of that other page, and you don't want the carousel on it, you can modify the bgcarousel.js script. Using a text only editor like NotePad, add the red comment token to the highlighted line as shown:

	init:function($, slidesHTML){
		var slideshow=this, setting=this.setting
		this.$wrapperdiv=$('#'+setting.wrapperid)
		setting.dimensions=[this.$wrapperdiv.width(), this.$wrapperdiv.height()]
		this.$wrapperdiv.css({position:'relative', visibility:'visible', overflow:'hidden', backgroundImage:'none', width:setting.dimensions[0], height:setting.dimensions[1]}) //main DIV
		if (this.$wrapperdiv.length==0){ //if no wrapper DIV found
			//alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
			return
		}
		this.$wrapperdiv.html(slidesHTML)
		this.$imageslides=this.$wrapp . . .

That way, even if the script is on a page without the required div, it will exit gracefully with no alert.

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

[accessotronik]

Great, thank you for taking the time to explain the problem and sharing your knowledge.

I modified the JS script and turned the alert into a comment, Problem solved!

Many thanks!