01-09-2011, 05:08 PM
This is a basic framework for a full jQuery slideshow. It doesnt have any nifty features, however it does do what its supposed to - load images and display them at a set interval.
You need jQuery to use this. Example: http://projectevolution.net76.net/tutorials/webdev/
index.php
You can set the values for this in the script, just take a look right after the jQuery ready() function. Have fun.
You need jQuery to use this. Example: http://projectevolution.net76.net/tutorials/webdev/
index.php
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Fun st00f</title>
<script type="text/Javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/Javascript">
$(document).ready(initSlideshow);
var image = 0;
var timer = 3000; // Milliseconds pls
var t = 0; // calls setTimeout()
// hardcoding lol - cbf making dynamic script
var images = new Array (
new Array (
"smflogo.jpg",
"SMF is leet lol"
),
new Array (
"king.png",
"idk y this is here lol"
)
);
function initSlideshow() {
var main_panel = $("div#main_panel");
var description_panel = $("div#description_panel");
main_panel.hide();
if (image > images.length-1)
image = 0;
main_panel.html("<img src=\"" + images[image][0] + "\" />").fadeIn("slow");
description_panel.html("<b>" + images[image][1] + "</b>");
image++;
t = setTimeout("initSlideshow()", timer);
}
function stopTimer() {
clearTimeout(t);
t = 0;
}
function resume() {
if (t == 0)
initSlideshow();
}
function next() {
stopTimer();
initSlideshow();
}
function previous() {
stopTimer();
if (image <= 1)
image = images.length-1;
else
image -= 2;
initSlideshow();
}
</script>
<style type="text/css">
#container {
background: #E6E6E6;
margin-left: 50px;
max-height: 400px;
max-width: 400px;
}
#main_panel {
padding: 15px;
height: 90px;
max-height: 200px;
}
#main_panel.img {
border: 5px solid black;
}
#description_panel {
padding-bottom: 5px;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>Simple jQuery Slideshow</h1>
<div id="container">
<div id="main_panel"></div>
<br />
<div id="description_panel"></div>
<br />
<input type="button" value="Pause" onclick="stopTimer()" />
<input type="button" value="Resume" onclick="resume()" />
<input type="button" value="Next" onclick="next()" />
<input type="button" value="Previous" onclick="previous()" />
</div>
</body>
</html>
You can set the values for this in the script, just take a look right after the jQuery ready() function. Have fun.