image slideshow slide images

Post a reply

In an effort to prevent automatic submissions, we require that you complete the following challenge.
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review

Expand view Topic review: image slideshow slide images

Re: image slideshow

by mindphp » 24/06/2008 10:31 pm


Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<TITLE>JavaScript Slideshow Template</TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT TYPE="text/javascript" SRC="slideshow.js">

// JavaScript Slideshow by Patrick Fitzgerald

// -->

<SCRIPT TYPE="text/javascript">

// Create the slideshow object
ss = new slideshow("ss");

// Set the delay between slides, 1000 = 1 sec
// ss.timeout = 3000;

// By default, all of the slideshow images are prefetched.
// If you have a large number of slides you can limit the
// number of images that are prefetched.
// ss.prefetch = 1;

// By default the slideshow will repeat when you get to the end.
// ss.repeat = false;

// Create the slides and add them to the slideshow.
s = new slide();
s.src =  "pics/pic01.jpg"; = "pics/pic01.jpg";
s.title = "First slide";
s.text = "This is the text for slide number <em>one<\/em>.";
// = "";
//s.attr = "";
//s.filter = "";
//s.timeout = "";

//  ไป qurey จากฐานข้อมูล มาใส่ ตำแหน่ง ด้านบนนี้ 
s = new slide();
s.src =  "pics/pic02.jpg"; = "pics/pic02.jpg";
s.title = "Second slide";
s.text = "This is the text for slide number <em>two<\/em>.";

s = new slide();
s.src =  "pics/pic03.jpg"; = "pics/pic03.jpg";
s.title = "Third slide";
s.text = "This is the text for slide number <em>three<\/em>.";

// The following loop sets an attribute for all of the slides.
// This is easier than setting the attributes individually.

for (var i=0; i < ss.slides.length; i++) {

  s = ss.slides[i]; = "ss_popup";
  s.attr = "width=320,height=420,resizable=yes,scrollbars=yes";



The update() method is required to make sure the text matches the image.
The restore_position() and save_position() methods are optional.
The 'SS_POSITION' parameter is the name of the cookie in which the slide
number is stored.
<BODY ONLOAD="ss.restore_position('SS_POSITION');ss.update();"

<DIV ID="slideshow">

<FORM ID="ss_form" NAME="ss_form" ACTION="" METHOD="GET">

<DIV ID="ss_controls">

<A ID="ss_start" HREF=";"><SPAN>start</SPAN></A>

<A ID="ss_stop" HREF="javascript:ss.pause()"><SPAN>stop</SPAN></A>

<A ID="ss_view" HREF="javascript:ss.hotlink()"><SPAN>view</SPAN></A>

<A ID="ss_prev" HREF="javascript:ss.previous()"><SPAN><prev</SPAN></A>

<A ID="ss_random" HREF="javascript:ss.goto_random_slide()"><SPAN>random</SPAN></A>

<A ID="ss_next" HREF=""><SPAN>next></SPAN></A>

The following select list will be modified with the slide titles.
<SELECT ID="ss_select" NAME="ss_select" ONCHANGE="ss.goto_slide(this.selectedIndex)">
  <OPTION>Welcome to the slideshow!


<DIV ID="ss_img_div">

<A ID="ss_img_link" HREF="javascript:ss.hotlink()"><IMG
ID="ss_img" NAME="ss_img" SRC="pics/pic01.jpg"
ALT="Slideshow image"></A>


<DIV ID="ss_text">

<SCRIPT type="text/javascript">

// The contents of this DIV will be overwritten by browsers
// that support innerHTML.
// For browsers that do not support innerHTML, we will display
// a TEXTAREA element to hold the slide text.
// Note however that if the slide text contains HTML, then the
// HTML codes will be visible in the textarea.

document.write('<TEXTAREA ID="ss_textarea" NAME="ss_textarea" ROWS="6" COLS="40" WRAP="virtual"><\/TEXTAREA>\n');

ss.textarea = document.ss_form.ss_textarea;





<SCRIPT TYPE="text/javascript">

// Finish defining and activating the slideshow

// Set up the select list with the slide titles
function config_ss_select() {
  var selectlist = document.ss_form.ss_select;
  selectlist.options.length = 0;
  for (var i = 0; i < ss.slides.length; i++) {
    selectlist.options[i] = new Option();
    selectlist.options[i].text = (i + 1) + '. ' + ss.slides[i].title;
  selectlist.selectedIndex = ss.current;

// If you want some code to be called before or
// after the slide is updated, define the functions here

ss.pre_update_hook = function() {

ss.post_update_hook = function() {
  // For the select list with the slide titles,
  // set the selected item to the current slide
  document.ss_form.ss_select.selectedIndex = this.current;

if (document.images) {

  // Tell the slideshow which image object to use
  ss.image = document.images.ss_img;

  // Tell the slideshow the ID of the element
  // that will contain the text for the slide
  ss.textid = "ss_text";

  // Randomize the slideshow?
  // ss.shuffle();

  // Set up the select list with the slide titles

  // Update the image and the text for the slideshow

  // Auto-play the slideshow


<SCRIPT TYPE="text/javascript">

// Make the slideshow accessible to search engines
// and non-javascript browsers.
// The following function is normally left commented out.
// It is used only to produce some HTML that you can copy
// into the NOSCRIPT section below.
// The HTML produced will contain all of the slideshow images,
// plus the text for each image.

// document.write("<PRE>" + ss.noscript() + "<\/PRE>");



This is a version of the slideshow for search engines
and non-javascript browsers


ส่วนที่ต้อง ไป query จากฐานข้อมูล คือ
// ไป qurey จากฐานข้อมูล มาใส่ ตำแหน่ง ด้านบนนี้
s = new slide();
s.src = "pics/pic02.jpg"; = "pics/pic02.jpg";
s.title = "Second slide";
s.text = "This is the text for slide number <em>two<\/em>.";

Re: image slideshow

by mindphp » 24/06/2008 10:27 pm

ประมาณนี้หรือเปล่าครับ ... plete.html
ดาวน์โหลด ตัวอย่าง โค้ด ได้ที่ ... deshow.tar

image slideshow slide images

by LP_fon » 24/06/2008 10:16 pm

image slideshow slide images จากฐานข้อมูล
อยากทราบวิธีการทำรูปแบบ slideshow โดยเอารูปมาจากฐานข้อมูล