Here is a simple javascript/jquery slideshow that uses z-indexing in the CSS to create a frame. It also pulls links off of the link= property of the slideshow image elements (<img link=http://whatever.com src=whatever>) and dynamically sets the slideshow’s link to that link.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Slideshow in a frame - JQuery</title>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">You need JQuery</script>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
}
#ss_wrapper {
position: absolute;
display: block;
left: 200px;
top: 150px;
border: 0px;
padding: 0px;
margin: 0px;
width: 400px;
height: 300px;
z-index: 30;
}
#ss_wrapper #ss_container {
position: relative;
display: block;
left: 0px;
top: 0px;
border: 0px;
margin: 0px;
padding: 0px;
width: 400px;
height: 300px;
z-index: 25;
}
#ss_wrapper #ss_container #ss_frame_img {
position: relative;
display: block;
left: 0px;
top: 0px;
border: 0px;
margin: 0px;
padding: 0px;
z-index: 20;
}
#ss_wrapper #ss_container #ss_gallery {
position: absolute;
display: block;
left: 40px;
top: 40px;
border: 0px;
margin: 0px;
padding: 0px;
width: 320px;
height: 220px;
z-index: 15;
}
#ss_wrapper #ss_container #ss_gallery img {
display: block;
position: absolute;
top: 0;
left: 0;
border: 0px;
margin: 0px;
padding: 0px;
z-index: 10;
}
</style>
</head>
<body>
<div id="ss_wrapper">
<div id="ss_container">
<a href="#" id="ss_link"><img src='./frame.png' id='ss_frame_img' /></a>
<div id="ss_gallery">
<img src="./frame1.png" link="http://jlinkpro.com" />
<img src="./frame2.png" link="http://google.com" />
<img src="./frame3.png" link="http://facebook.com" />
<img src="./frame4.png" link="http://jquery.com/" />
<img src="./frame5.png" link="http://hotmail.com" />
<img src="./frame6.png" link="http://youtube.com" />
<img src="./frame7.png" link="http://questionablecontent.com" />
<img src="./frame8.png" link="http://sinfest.net" />
<img src="./frame9.png" link="http://evolve-systems.com" />
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function()
{
var __INDEX__ = 0; //setting our index. USED AS A GLOBAL (ugh)
var __IMAGES__ = $("#ss_gallery img"); //getting our list of images. USED AS GLOBAL (ugh)
for (i=0; i<__IMAGES__.length; i++) //looping through said list
{
$(__IMAGES__[i]).addClass("image-"+i); //assigning a class in the form of image-#
}
show(__INDEX__); //show the first element in the list, which is index 0 of the array.
setInterval(sift, 1000); //execute sift in 1000 ms.
function sift() //this moves to the next image and shows it. Really, all it's doing is pushing globals around.
{
if (__INDEX__<(__IMAGES__.length-1)) { __INDEX__++; } //if index is less than the count of items in images array, increase it by 1 (goto next image)
else {__INDEX__=0;} //Otherwise, set index to 0 (go back to first image.)
show (__INDEX__); //show the index image (show current image)
}
function show(num)
{
var inum = $(".image-"+num); //Get the element that has a class of image-# where # is the index (current image)
$(__IMAGES__).fadeOut(500); //fade out all the images in the image container (over 500 ms)
inum.stop().fadeIn(500); //stop the fade out for the current image, and fade it in (over 500 ms)
$("#ss_link").attr("href", inum.attr("link")); //get the anchor element that is the link, and set it's href to the link in the image.
}
});
</script>
</body>
</html>
