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>
<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>
One Comment
Hey, hope you don’t mind i registered but i’m bored.. i like the site it’s simple. I’m assuming this code is so you can use a custom image as a border? otherwise CSS would be able to add this border to all img tags in that div… anyhow here is a script i wrote that uses more purely jQuery being more soothing to the eyes (just replace whats inside the script tag with this and make all imgs initially display:none instead of block to see it work)
$(document).ready(function(){
var elm = $(“#ss_gallery img”);
var imgsWaiting = (elm.length) – 1;
var i = 0;
var fadeTime = 1000; //constant
var displayTime = 5000; //constant
elm.eq(i).fadeIn(fadeTime);
$(“#ss_link”).click(function(){
var imgLink = elm.eq(i).attr(“link”);
window.location = imgLink;
});
var iterate = setInterval(function(){
elm.eq(i).fadeOut(fadeTime);
i += (i == imgsWaiting) ? (-i) : 1;
elm.eq(i).fadeIn(fadeTime);
},displayTime);
});
I hope this turns out ok after being filtered from the comment submission.
10 Trackbacks
Great information…
Great information mazon.com amzon.com amazn.com amazon.cm…
Wordlistz2…
Wonderful blog post, saw on…
Just having a look…
magnificent issues altogether, you just received a brand new reader. What might you recommend about your submit that you made a few days in the past? Any positive?…
Just Looking…
When we were surfing very much this Monday we noticed a very good long post about…
Bing results…
While browsing Bing I discovered this page in the search results and I didn’t think it match…
Interesting post…
Usually I don’t read article on blogs, but I would like to say that this write-up very pressured me to try and do so! Your writing style has been surprised me. Thanks, very nice post….
Hard Day…
It was a hard day here yesterday, so I just took to piddeling around online and realized…
Recommended resource for inspiration…
[...]I like this topic, but I have more ideas about it. Check my web blog. It has several interesting insights from the insider.[...]…
Site useful for you….
[...]I suggest you this site for data and new opninions[...]…
Lots of Useful Details….
[...]Some insightful data here. Recommended to visit.[...]…