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;
}
 ChrisH
    
 shared this idea
ChrisH
    
 shared this idea
      
     
                 
                    