Below is the code for 2 pages with a slidehow. Why? I hear you ask, when there are so many slideshows out there. Why reinvent the wheel? Well the answer is because none of the wheels fit my needs.
I have been asked to look at re-doing a website which was a little dated. The site had an opportunity to use great pictures and there was a story behind each. If you want a picture which is partially covered by a semi-transparent comment, then there are plenty to be found.
If you want something which can choose different locations for you comments and style them as you please, then you will struggle to find something that suits your needs. So please feel free to use my code.
I have tried to keep the style information to a minimum.
See demo 1.
See demo 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Slideshow</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
}
#slideshow #hiddenSlides
{
display:none;
}
#slideshow #slideWindow, #slideshow #textWindow
{
width:16em;
min-height:12em;
}
#slideshow #slideWindow img
{
width:100%;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$.fn.slideFunction = function()
{
$theCurrent = $('#slideshow #hiddenSlides img.current');
$('#slideshow #textWindow').html($theCurrent.attr('alt'));
$('#slideshow #slideWindow img').fadeOut('fast');
$('#slideshow #slideWindow img').attr('src', $theCurrent.attr('src'));
$('#slideshow #slideWindow img').fadeIn('slow');
$theCurrent.removeClass('current');
if($theCurrent.next('img').length)
{
$theCurrent.next('img').addClass('current');
}
else
{
$('#slideshow #hiddenSlides img.first').addClass('current');
}
}
$(document).ready(function()
{
$(this).slideFunction();
setInterval(
function()
{
$(this).slideFunction();
}
,4000);
});
</script>
</head>
<body>
<section id="slideshow">
<section id="hiddenSlides">
<img src="http://farm3.static.flickr.com/2160/2271589215_935b5bc2ce_m.jpg" alt="<h3>Band of fog</h3><p>By Cath Redman</p>" class="first current" />
<img src="http://farm5.static.flickr.com/4140/4947943522_5ba46ef4df_m.jpg" alt="<h3>Wind farm</h3><p>Not mine. As soon as I find out who's it is, I'll reference it. I do know it's under the CC License</p>" />
<img src="http://farm6.static.flickr.com/5054/5487320064_bb84f10fae_m.jpg" alt="<h3>Searchings for Snackers</h3><p>by Nomadic Lass</p>" />
<img src="http://farm6.static.flickr.com/5298/5486895517_1a74882a1e_m.jpg" alt="<h3>Point of View</h3><p>By Nicholas_T</p>" />
</section>
<section id="slideWindow"><img /></section>
<section id="textWindow"></section>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Slideshow</title>
<style>
body
{
font-family:Sans-serif;
}
#slideshow
{
width:32em;
}
#slideshow #slideWindow, #slideshow #textWindow
{
display:inline;
}
#slideshow #hiddenSlides
{
display:none;
}
#slideshow #slideWindow, #slideshow #textWindow
{
width:16em;
min-height:12em;
}
#slideshow #slideWindow
{
float:left;
}
#slideshow #slideWindow img
{
width:100%;
}
h3
{
padding-left:14em;
}
p
{
padding-left:16.5em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$.fn.slideFunction = function()
{
$theCurrent = $('#slideshow #hiddenSlides img.current');
$('#slideshow #textWindow').html($theCurrent.attr('alt'));
$('#slideshow #slideWindow img').fadeOut('fast');
$('#slideshow #slideWindow img').attr('src', $theCurrent.attr('src'));
$('#slideshow #slideWindow img').fadeIn('slow');
$theCurrent.removeClass('current');
if($theCurrent.next('img').length)
{
$theCurrent.next('img').addClass('current');
}
else
{
$('#slideshow #hiddenSlides img.first').addClass('current');
}
}
$(document).ready(function()
{
$(this).slideFunction();
setInterval(
function()
{
$(this).slideFunction();
}
,4000);
});
</script>
</head>
<body>
<section id="slideshow">
<section id="hiddenSlides">
<img src="http://farm3.static.flickr.com/2160/2271589215_935b5bc2ce_m.jpg" alt="<h3>Band of fog</h3><p>By Cath Redman</p>" class="first current" />
<img src="http://farm5.static.flickr.com/4140/4947943522_5ba46ef4df_m.jpg" alt="<h3>Wind farm</h3><p>Not mine. As soon as I find out who's it is, I'll reference it. I do know it's under the CC License</p>" />
<img src="http://farm6.static.flickr.com/5054/5487320064_bb84f10fae_m.jpg" alt="<h3>Searchings for Snackers</h3><p>by Nomadic Lass</p>" />
<img src="http://farm6.static.flickr.com/5298/5486895517_1a74882a1e_m.jpg" alt="<h3>Point of View</h3><p>By Nicholas_T</p>" />
</section>
<section id="slideWindow"><img /></section>
<section id="textWindow"></section>
</section>
</body>
</html>
