View RSS Feed

jscheuer1

BG Carousel Links

Rating: 5 votes, 4.20 average.
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.

Submit "BG Carousel Links" to del.icio.us Submit "BG Carousel Links" to StumbleUpon Submit "BG Carousel Links" to Google Submit "BG Carousel Links" to Digg

Updated 07-25-2012 at 01:17 AM by jscheuer1 (attach modified version of script, link to demo, update comments in script)

Tags: None Add / Edit Tags
Categories
DD Scripts Mods , JavaScript & Ajax , Post a JavaScript

Comments