Great! I've since discovered that my first method didn't really work anyway. Even if it did, which I later figured out how to do, when hovering you wouldn't see the link address in the status bar of browsers that supply that information, and it would be hard to configure for link target or link onclick behaviors. I've since hit on a method that sort of combines it with the one that does work and thereby overcomes those deficiencies while still allowing a separate description. And though it's technically invalid, there appears there can be one or more links in the separate description on images that have this overall link. I think that might be because the browser doesn't have to parse it, it's all added to the DOM after that.
Anyways, here's the scenario -
Styles:
Code:
div.bgcarousel{ /* CSS for main carousel container */
background: black url(ajaxload.gif) center center no-repeat; /* loading gif while caoursel is loading */
width:900px; /* default dimensions of carousel */
height:600px;
}
img.navbutton{ /* CSS for the nav buttons */
margin:5px;
opacity:0.7;
}
div.slide{ /* CSS for each image's DIV container within main container */
background-color: black;
background-position: center center; /* center image within carousel */
background-repeat: no-repeat;
background-size: cover; /* CSS3 property to scale image within container? "cover" or "contain" */
color: black;
}
div.selectedslide{ /* CSS for currently selected slide */
}
div.slide div.desc{ /* DIV that contains the textual description inside .slide */
position: absolute;
color: white;
left: 40px;
top: 100px;
width:200px;
padding: 10px;
font: bold 16px sans-serif, Arial;
text-shadow: 0 -1px 1px #8a8a8a; /* CSS3 text shadow */
z-index:5;
}
div.selectedslide 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 { /* Styles for whole image links */
display: block;
width: 100%;
height: 100%;
position: absolute;
text-decoration: none;
}
Script:
Code:
var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['autumnpark.jpg', '<h2>Autumn Day</h2>The sun peaks through the trees, a knife that cuts through the chill, crisp air.'], //["image_path", "optional description", "optional link tag"]
['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- <a target="_blank" href="http://www.yahoo.com/">Peace</a> and 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)
})
;(function($){
var carousel = firstbgcarousel, setting = carousel.setting, $slide, $desc, $link, callee = arguments.callee;
if(!carousel.$imageslides){setTimeout(function(){callee($);}, 100); return;}
carousel.$imageslides.each(function(i){
if(setting.imagearray[i][2]){
$slide = $(this);
$desc = $slide.children();
$link = $(setting.imagearray[i][2]).addClass('linkinbgcaroulsel');
if($desc.size()){
$desc.wrap($link);
} else {
$slide.append($link);
}
}
});
})(jQuery);
slideshow script
Reply With Quote
Bookmarks