Animal Kingdom Slideshow : Slide Show « Page Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » Page Components » Slide Show 
Animal Kingdom Slideshow

/*
JavaScript Application Cookbook
By Jerry Bradenbaugh

Publisher: O'Reilly 
Series: Cookbooks
ISBN: 1-56592-577-7
*/ 

 <HTML>
<HEAD>
<TITLE>The Slideshow</TITLE>
<!-- Define style sheet for simple height control //-->

<STYLE TYPE="text/css">
#menuConstraint height: 800}
</STYLE>

<SCRIPT LANGUAGE="JavaScript1.2">
<!--

// Set window- and layer-related variables
var dWidLyr  = 450;
var dHgtLyr  = 450;
var curSlide = 0;
var zIdx    = -1;
var isVis    = false;

// Set browser-determined global variables
var NN      = (document.layers ? true false);
var sWidPos  = ((NN ? outerWidth  : screen.availWidth)  2(dWidLyr / 2);
var sHgtPos  = ((NN ? outerHeight : screen.availHeight2(dHgtLyr / 2);
var hideName = (NN ? 'hide' : 'hidden');
var showName = (NN ? 'show' : 'visible');


//Set image-related variables
var img = new Array();
var imgOut = new Array();
var imgOver = new Array();
var layerList = new Array();
var imgPath = 'images/';

// Set tour-realted variables
var showSpeed = 3500;
var tourOn = false;

// Define a function to generate layers
function genLayer(sName, sLeft, sTop, sWdh, sHgt, sVis, copy) {
  if (NN) {
    document.writeln('<LAYER NAME="' + sName + '" LEFT=' + sLeft + ' TOP=' + sTop + 
    ' WIDTH=' + sWdh + ' HEIGHT=' + sHgt + ' VISIBILITY="' + sVis + '"' + 
    ' z-Index=' + (++zIdx'>' + copy + '</LAYER>');
    }
  else {
    document.writeln('<DIV ID="' + sName + '" STYLE="position:absolute; overflow:none; left:' + 
      sLeft + 'px; top:' + sTop + 'px; width:' + sWdh + 'px; height:' + sHgt + 'px;' + 
      ' visibility:' + sVis + '; z-Index=' + (++zIdx) + '">' + 
      copy + '</DIV>'
      );
    }
  }

// Define an object constructor for each slide
function slide(imgStr, scientific, copy) {
  this.name    = imgStr;
  this.copy    = copy;
  this.structure = 
    '<TABLE WIDTH=500 CELLPADDING=10><TR><TD WIDTH=60% VALIGN=TOP>' + 
    '<IMG SRC=' + imgPath + imgStr + '.gif></TD>' + 
    '<TD WIDTH=40% VALIGN=TOP><H2>Common Name:</H2><H2><I>' + 
    camelCap(imgStr'</I></H2><H3>Scientific Name: </H3><H3><I>' + 
    scientific + '</I></H3>' + '<B>Abstract:</B><BR>' + copy + '</TD></TR></TABLE>';

  // Preload corresponding images while we're at it
  imagePreLoad(imgStr);

  return this;
  }

// Define a function to preload the images
function imagePreLoad(imgStr) {
  // Images for the slides
  img[img.length]  new Image();
  img[img.length - 1].src = imgPath + imgStr + '.gif';

  // Primary images for the slide menu
  imgOut[imgOut.lengthnew Image();
  imgOut[imgOut.length - 1].src = imgPath + imgStr + 'out.gif';

  // Rollover images for the slide menu
  imgOver[imgOver.lengthnew Image();
  imgOver[imgOver.length - 1].src = imgPath + imgStr + 'over.gif';
  }

// Define an array to store all of the slide objects
var slideShow  = new Array(
      new slide('bird', 'Bomb-zis Car-zes', 'This winged creature has been known to seek out and soil freshly-washed vehicles.'),
      new slide('walrus', 'Verius Clueless', 'These big fellas good fishers, but toothbrushing is another story.'), 
      new slide('gator', 'Couldbeus Luggajus', 'These reptiles often play mascots for large college sporting events.'), 
      new slide('dog', 'Makus Messus', 'Man\'s best friend? Yeah, right. No wonder these mammals get a bad rep.'), 
      new slide('pig', 'Oinkus Lotsus', 'Humans with questionable eating habits are often compared to these farm creatures.'), 
      new slide('snake', 'Groovius Dudis', 'Slick and sly with a watchful eye.'),
      new slide('reindeer', 'Redius Nosius', 'Though co-workers used to laugh and call him names, he eventually won the respect of the entire team.'),
      new slide('turkey', 'Goosius Is Cooktis', 'Celebrated and revered for an entire year, then served as dinner shortly after.'),
      new slide('cow', 'Gotius Milkus', 'This animal is considered a moover and shaker, and tends to milk things for all they\'re worth. Utterly shameful.'),
      new slide('crane', 'Whooping It Upus', 'Not to be confused with a piece of heavy construction equipment. Rumored as the source of the nickname <I>birdlegs</I>.')
      );

// Capitalize the first letter of the word passed
// Makes for better looking copy
function camelCap(str) {
  return str.substring(01).toUpperCase() + str.substring(1);
  }

// This generates all layers (or styles) to display for the screen
function genScreen() {
  var menuStr = '';
  for (var i = 0; i < slideShow.length; i++) {
    // Create all of the animal slide layers
    genLayer('slide' + i, sWidPos, 45, dWidLyr, dHgtLyr, (i == ? showName : hideName), slideShow[i].structure);

    // While iterating, build the HTML string for the menu layer
    menuStr += '<A HREF="" onMouseOver="hideStatus(); if(!tourOn) { setSlide(' + i + ');' + 
      ' imageSwap(\'' + slideShow[i].name + '\', ' + i + ', true)}; return true;"' + 
      ' onMouseOut="hideStatus(); if(!tourOn) { setSlide(' + i + ');' + 
      ' imageSwap(\'' + slideShow[i].name + '\', ' + i + ', false)}; return true;"' + 
      ' onClick="return false;"><IMG NAME="' + slideShow[i].name + '" SRC="' + imgPath + slideShow[i].name + 'out.gif" BORDER=0></A><BR>'; 
    }

  // Create the automation layer
  genLayer('automation', sWidPos - 10011100200, showName, 
    '<DIV ID="menuConstraint">' +  
    '<A HREF="javascript: autoPilot();"  onMouseOver="hideStatus(); return true;">' + 
    '<IMG SRC="images/automate.gif" BORDER=0></A>' + 
    '</DIV>'
    );

  // Create the guide layer (with the arrows)
  genLayer('guide', sWidPos - 10030100200, showName, 
    '<DIV ID="menuConstraint">' + 
    '<A HREF="javascript: if(!tourOn) { changeSlide(-1); }" onMouseOver="hideStatus(); return true;">' + 
    '<IMG SRC="images/leftout.gif" BORDER=0></A>' + 
    '<A HREF="javascript: if(!tourOn) { menuManager(); }" onMouseOver="hideStatus(); return true;">' + 
    '<IMG SRC="images/guideout.gif" BORDER=0></A>' + 
    '<A HREF="javascript: if(!tourOn) { changeSlide(1); }" onMouseOver="hideStatus(); return true;">' + 
    '<IMG SRC="images/rightout.gif" BORDER=0></A></DIV>'
    );

  // Create the menu
  genLayer('menu', sWidPos - 10443100200, hideName, 
    '<DIV ID="menuConstraint"><TABLE><TD>' + 
    menuStr + '</TD></TABLE></DIV>'
    );
  }

// Define a function to hide layers
function hideLayer(name) {
  refLayer(name).visibility = hideName;
  }

// Define a function to reveal layers
function showLayer(name) {
  refLayer(name).visibility = showName;
  }

// Define a central function to reference layers
function refLayer(name) {
  if (NN) { return document.layers[name]}
  else return eval('document.all.' + name + '.style'); }
  }

// Hide or show the animal guide
function menuManager() {
  if (isVis) {  hideLayer('menu'); }
  else showLayer('menu'); }
  isVis = !isVis;
  }

// Function to change slides if the user navigates with the arrows
function changeSlide(offset) {
  // Hide the existing Layer
  hideLayer('slide' + curSlide);

  // Calculate the next layer index number
  curSlide = (curSlide + offset < ? slideShow.length - 
    (curSlide + offset == slideShow.length ? : curSlide + offset));

  // Show the desired layer
  showLayer('slide' + curSlide);
  }

// Function to change the slide if user navigates with the menu
function setSlide(ref) {
  if (tourOn) { return}
  hideLayer('slide' + curSlide);
  curSlide = ref;
  showLayer('slide' + curSlide);
  }

// Image rollover function
function imageSwap(imagePrefix, imageIndex, isOver) {
  if (isOver) { document[imagePrefix].src = imgOver[imageIndex].src; }
  else document[imagePrefix].src = imgOut[imageIndex].src; }
  }

// Places an empty string in the status bar to avoid annoying URL displays
function hideStatus() { window.status = ''; }

// Start or stop the automated tour
function autoPilot() {
  // Stop the tour if it is running
  if (tourOn) { 
    clearInterval(auto)
    imageSwap(slideShow[curSlide].name, curSlide, false);
    }
  // Otherwise begin the tour from the currently viewed slide
  else {
    auto = setInterval('automate()', showSpeed);
    imageSwap(slideShow[curSlide].name, curSlide, true);    

    // Show the menu if it is not currrently visible
    showLayer('menu');
    visible = true;
    }
  tourOn = !tourOn;
  }

// Automate the slideshow
function automate() {
  // Incite the image rollver
  imageSwap(slideShow[curSlide].name, curSlide, false);

  // Incite the slide change
  changeSlide(1);

  // Incite the image rollver
  imageSwap(slideShow[curSlide].name, curSlide, true);
  }

//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<CENTER>
<FONT FACE=Arial>
<H2>Animal Kingdom Slideshow</H2>
</FONT>
</CENTER>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
genScreen();
//-->
</SCRIPT>
</FONT>
</BODY>
</HTML>

           
       
Related examples in the same category
1. Slide Show: Mixed Slides, Next Slide, Previous Slide
2. DHTML Slide Show
3.  Creating a Slide Show Using a Random Number Generator
4. slide show Demo
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.