jscheuer1

I found a fairly easy way to add optional links to the Dynamic Drive Script:

Background Image Carousel

First a demo:

BG Carousel Links - Demo

Now, how to:

Using a text only editor like NotePad, add this highlighted style as shown to the bottom of the on page styles (modified from Step 1 on the demo page):

Code:

 . . . ctedslide div.desc{ /* CSS for currently selected slide's desc div */
}

div.slide div.desc h2{
font-size:150%;
margin:0;
}

div.slide div.desc a{
color:yellow;
text-decoration:none;
}

div.slide a.linkinbgcaroulsel { /* CSS Styles for whole image links */
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	text-decoration: none;
}
</style>

Use this updated version of the script (right click and 'Save as'):

bgcarousel.js

Which also includes bug fixes:

• for all browsers where after the cycles played out, manual navigation would result in two slides per click
  
  
• for Opera where the controls wouldn't always function

Now you can optionally add actual link tags to the on page new bgCarousel() call. Example (also modified from Step 1 on the demo page, additions highlighted):

Code:

var firstbgcarousel=new bgCarousel({
	wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
	imagearray: [ //["image_path", "optional description", "optional link tag"]
		['autumnpark.jpg', '<h2>Autumn Day</h2>The sun peaks through the trees, a knife that cuts through the chill, crisp air.'],
		['chime.jpg', '', '<a target="_blank" href="http://www.dynamicdrive.com/"></a>'],
		['girlportrait.jpg', 'The scent of spring invigorates her as she inhales whilst the warm breeze brings a wave of tranquility.'],
		['redbench.jpg', 'Alone and Lonliness- Peaceand Inner Struggle', '<a href="http://www.google.com/"></a>'] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
	navbuttons: ['left.gif', 'right.gif', 'up.gif', '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)
});

You can still have descriptions and/or links in the descriptions if you like.


Comments are welcome, but I will hold them back pending the determination that they're not spam.

If you want help on this, please post a thread in the:

Dynamic Drive scripts help

section and include the words:

BgCarousel and Links

in the title of your thread. It would help to also include a link to this blog posting and to your page. And of course describe the problem you are having.