First up you need to download the new version, 1.2, which has been modified. Slideshow v 1.2. You can read about the changes here.

But instead of a whole load of code changes also download version 1.2 with thumbnails then you can view the changes between the two sets of files.

The .html, plugin.js and .css files have been changed.

v1.2 with thumbnails.

Version 1.3.1 is the latest version, with all bells and whistles added.

In the plugin.js line 18

<div id="headerimg1" class="headerimg"></div>\
<div id="headerimg2" class="headerimg"></div>\

add the anchor…

<div id="headerimg1" class="headerimg"></div>\
<div id="headerimg2" class="headerimg"></div>\
<a href="#" id="full-click"></a>\

Then line 147 or there abouts…

$("#pictureduri")
.attr("href", photoObject.url)
.html(photoObject.title);

add the #full-click

$("#pictureduri")
.attr("href", photoObject.url)
.html(photoObject.title);
$("#full-click")
.attr("href", photoObject.url);

Then add the css in style.css for #full-click

#full-click {
display: block;
height: 600px; /* or whatever the height of your header div is */
position: absolute;
top: 0;
left: 0;
right: 0;
z-index:0;
}

As I said quick and dirty and I’ve only tested it with Chrome, so might need a tweak here and there.

Anyway when making the changes I completely forgot the test version I had was quite a bit different from the download – js/css & html – so just checked and this could be better for you.

From the original plugin.js file on line 140 where it says

// Hide the header text
$("#headertxt").css({"display" : "none"});

Leave it like that

Then on lines 157 & 165 where it says

$("#headertxt").css({"display" : "block"})

Again change the .css this time to .fadeIn

$("#headertxt").fadeIn("slow")

Can either be .fadeIn("slow") or a time in milliseconds .fadeIn(2000).