Javascript Slide show documentation /*==================================================* $Id: slideshow.js,v 1.5 2005/09/21 14:56:31 pat Exp $ Copyright 2005-2006 Dorian Lee http://www.fscommand.com.cn/slideshow/ Base on 2000-2003 Patrick Fitzgerald's slideshow.js http://slideshow.barelyfitz.com/ version 1.3 1.Image title is added. 2.Image size limit is added. 3.The memory overload bug is fixed. 4.Random play(not shuffle) function is added. version 1.4 1.The photo size limitation bug is fixed. version 1.5 1.Image description, it's similar to the title is added. 2.Random RevealTrans filter and random number generater function is added. version 1.6 1."filter error"in MS IE5 is corrected. 2.Browser detection is added. version 1.61 1.ECMA script gramma correction This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. *==================================================*/ =========================================================================================================================================================== How to use it in your web page: Step 1: Put slideshow.js in your web site directory. Step 2: In the web page that you want to use slide show presentation in tag you should include the slideshow.js like that: Step 3: Add slide show initial code and some custom function, you can copy them from example-slide.html to your web page. parameter and method: There are two objects defined in slideshow.js: "slide" - contains all the information for a single slide "slideshow" - consists of multiple slide objects and runs the slideshow 1.Slideshow Object: For example: ss = new slideshow("ss"); parameters $Name Name of this object (required if you want your slideshow to auto-play) For example, "SLIDES1" create a slide show instance named ss: For example: ss = new slideshow("ss"); $Repeat When we reach the last slide, should we loop around to start the slideshow again? For example: ss.repeat = true; $prefetch Number of images to pre-fetch. I recommend preloading all images unless you have large images, or a large amount of images. -1 = preload all images. 0 = load each image is it is used. n = pre-fetch n images ahead of the current image. For example: this.prefetch = -1; $image IMAGE element on your HTML page. For example: ss.image = document.images.ss_img; $textid ID of a DIV element on your HTML page that will contain the text. Note: after you set this variable, you should call the update() method to update the slideshow display. For example: ss.textid = "ss_text"; $textarea TEXTAREA element on your HTML page. This is a deprecated method for displaying the text, but you might want to supply it for older browsers. For example: ss.textarea = "ss_textarea"; $timeout Milliseconds to pause between slides. Individual slides can override this. For example: this.timeout = 5000; $sizelmt Whether limit the photo's size, if it's set true the photo will be resized and constrain proportions. For example: ss.sizelmt = true; $slides The slides Array in the slideshow object. For example: s = ss.slides[i]; $current The slideshow current showing photo's number. For example: cur_slide = ss.current; $pre_update_hook pre_update_hook functions to be called before updating the slide For example: this.pre_update_hook = function() { } $post_update_hook post_update_hook functions to be called after updating the slide For example: this.post_update_hook = function() { } Methods &add_slide Add a slide to the slideshow. For example: ss.add_slide(new slide("s1.jpg", "link.html")) $random Random play all slides. For example: ss.random() $save_position Saves the position of the slideshow in a cookie, so when you return to this page, the position in the slideshow won't be lost. For example: ss.save_position() $restore_position If you previously called slideshow_save_position(), returns the slideshow to the previous state. For example: ss.restore_position() $goto_slide This method jumps to the slide number you specify. If you use slide number -1, then it jumps to the last slide. You can use this to make links that go to a specific slide, or to go to the beginning or end of the slideshow. For example: onClick="myslides.goto_slide(0)" onClick="myslides.goto_slide(-1)" onClick="myslides.goto_slide(5)" $update This method updates the slideshow image on the page Make sure the slideshow has been initialized correctly For example: ss.update() $play This method implements the automatically running slideshow. If you specify the "timeout" argument, then a new default timeout will be set for the slideshow. For example: ss.play() $next This method advances to the next slide. For example: ss.next() $previous This method goes to the previous slide. For example: ss.previous() $pause This method stops the slideshow if it is automatically running. For example: ss.pause() $shuffle This method randomly shuffles the order of the slides. Notice, It can't be comeback. For example: ss.shuffle(); $hotlink This method jumps to the slide's link. If a window was specified for the slide, then it opens a new window. For example: ss.hotlink(); 2.Slide Object: For example: s = new slide(); parameters $src Sigle slide's Image URL. For example: s.src = "images/czrfj1.jpg"; $title Image description, another text information besides the text property For example: s.title = "images/czrfj1.jpg"; $link Slide's link For example: s.link = "images/czrfj1.jpg"; $target Name of the target window, when you click the slide, the link will display in the predefined target window. For example: s.target = "_blank"; $attr Attributes for the target window: width=n,height=n,resizable=yes or no,scrollbars=yes or no,toolbar=yes or no,location=yes or no,directories=yes or no,status=yes or no,menubar=yes or no,copyhistory=yes or no For example: s.attr = "width=320,height=420,resizable=yes,scrollbars=yes"; $maxwidth Limit the photo's max width For example: s.maxwidth = 500; $maxheight Limit the photo's max height For example: s.maxheight = 500;