Login

Project Evolution · 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

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.

versx · 02-10-2011, 02:34 AM

Well, this looks fun haha. Thanks OP.

Login
Username:
Password:	Lost Password?
	Remember me

Possibly Related Threads…
Thread		Author	Replies	Views	Last Post
	[JS/jQuery] Implementing AJAX into your website	Project Evolution	0	822	08-05-2010, 08:29 PM Last Post: Project Evolution
	Introduction to jQuery	Project Evolution	2	737	08-04-2010, 11:42 AM Last Post: Project Evolution