Recipe: Slideshow Gadget: Display title banner with each slide
Using the Slideshow gadget with the link for images functionality in place it is possible to display a description for each slide.
I wanted to display a second bit of text, a floating title (big text) on each of the slides using the "Tooltip" attribute of the link.
To do so, I use a global JS to add a .camera-title div as the first child of each .camera_link element on screen. The div.camera-title can then be styled.
Snippets included below for you to fiddle with:
<<<<<<<<
//global JS
<script type="text/javascript">
jq$(function(){
//Make carousel titles visible
$('a.camera_link').each(function(idx, elt){
var linkTitle = elt.title||"";
if(linkTitle){
$(elt).parent().prepend('<div class="camera-title">' + linkTitle + '</div>');
}
});
});
</script>
<<<<<<<<<<<<<<<
//Theme CSS
.camera-title {
position: absolute;
bottom: 0px;
left: 0px;
color: #ffffff;
font-size: 2.4em;
font-weight: bold;
background-color: rgba(96, 145, 186, 0.7);
display: inline-block;
padding: 5px 10px;
margin-bottom: 1.6em;
margin-left: 8px;
}