Adding slideshow captions: How to

issue tags removed. User did not follow issue tag guidelines.

To begin, make sure you have jQuery included on your page. Next, download the script from above, upload it to your server, and link to it in the section of your page (make sure you adjust the path according to where you uploaded the script on your server).

I think I got this part...added above line to section of maintenance-page.tpl.php

Then, add the CSS to your site.

#slideshow-wrapper{
width:100%;
background: transparent url(images/slideshow-shadow.gif) no-repeat center bottom;
height:420px;
margin-bottom:-45px;
margin-top:14px;
}

.slideshow-inner{
width:950px;
margin:0 auto;
height:355px;
position:relative;
z-index:1;
overflow: hidden;
}

#slideshow-preface {
float:left;
position:absolute;
text-align:left;
z-index:4;
}

.slideshow {
width:950px;
height:355px;
position:relative;
z-index:2;
overflow: hidden;
}

#preface {
margin: 20px;
font-size:1.2em;
color:#fff;
display:block;
float:left;
}

#preface .contextual-links a{
text-decoration:none;
}

#preface .block-title {
margin-top:20px;
}

#preface .region {
margin:20px 0;
}

#preface a {
color:#fff;
text-decoration:underline;
}

#preface a:hover {
text-decoration:none;
}

#slideshow-bottom{
width:950px;
float:left;
background:url(images/mission-bg.png) no-repeat center bottom;
min-height:65px;
position:absolute;
bottom:0;
left:0;
text-align:right;
z-index:3;
}
Same Q here...Where/what file does this go in???
Finally, initialize the plugin within a $(window).load() function as follows:

$(window).load(function() {
$('img.caption').captionjs();
});

Whatever text you have in an image's data-caption attribute will be the text for the caption.js caption. If no data-caption is set, caption.js will look for text in the image's alt text as a fallback. You can also turn the caption into a link by adding a data-link attribute to your image and inserting a fully qualified URL into it.