CodeLifter.com - JavaScript Amazing Draggable Slide Show Script

Functions:  This script implements a draggable slideshow that
            can be used much like a popup window, but without
            the usual focus problems popups imply.  Simple
            controls to show or hide the slideshow are also
            included, and any number of images can be used.
            IE browsers show a cross-fade effect between images
            in the sequence. Compatible with NS4-7 & IE.
            
Comments:   The script is in two parts.  A JavaScript
            <script> to be placed in the <head> of the
            page; and a <div> layer that should be placed
            either immediately after the <body> tag or
            immediately before the </body> tag.
            
            Setups required in the JavaScript script are 
            limited to specifying the images to be shown,
            and the slideshow overall speed and cross-
            fade speed.      
            
            Positioning, width, height, colors, fonts, etc.,
            as well as initial visibility are set in the
            layer portion of the script, in the body. See
            the comments therein.
            
Notes:      Important: Remember to set the address and
            dimensions of the initial image, where shown in
            the comments, in the html layer part of the code
            in Step 3.
            
            Important: Remember to add the onload call to
            the runSlideShow function to your body tag,
            as explained below in Step 2.
            
            Only a single instance of the script is allowed
            per page.

Browsers:   NS4-7 & IE4 and later

Author:     etLux
==============================================================

STEP 1.
Inserting the JavaScript <script> In Your Page
-------------------------------------------------

Put the following <script>...</script> in the head section
of your page.

Set the image url variables, where shown.  Set the slideshow
and cross-fade variables, where shown.  There are no other
setups required in the script part of this installation.

// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this header

// =======================================
// Place this script in the head of your
// page and set the following variables.
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'SS1.jpg'
Pic[1] = 'SS2.jpg'
Pic[2] = 'SS3.jpg'
Pic[3] = 'SS4.jpg'
Pic[4] = 'SS5.jpg'

// =======================================
// do not edit anything below this line
// =======================================

isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;

function dd(e){
  if (!ddEnabled) return;
  whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx; 
  whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
  return false;  
}

function hideMe(){
  if (isIE||isNN) whichDog.style.visibility="hidden";
  else if (isN4) document.theLayer.visibility="hide";
}

function showMe(){
  if (isIE||isNN) whichDog.style.visibility="visible";
  else if (isN4) document.theLayer.visibility="show";
}

document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");

var t;
var j = 0;
var p = Pic.length;

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image();
   preLoad[i].src = Pic[i];
}

</script>

==============================================================

STEP 2.
Modifying The Body Tag To Start The Slide Show
----------------------------------------------

You must add onload="runSlideShow()" to the body tag of your
page, as shown next.  This is what starts the slide show when
the page loads.

==============================================================

STEP 3.
Inserting The Layer Code In Your Page
-------------------------------------

Add the following block of code to your page, just after the
<body> tag or just before the </body> tag.

Set border colors and *important* set the address and the
dimentsions of the initial image where shown by the comments
below.

If you want the slideshow to be initially hidden, change
visibility:visible to visibility:hidden in the initial
<div> tag.

Set the initial position with the left:xxx and top:xxx in the
<div> tag.

<div id="theLayer" style="position:absolute;left:100;top:100;visibility:visible">

<table border="0" bgcolor="#CCCCFF" cellspacing="0" cellpadding="2">
<tr>
<td>

<table border="0" bgcolor="#8080FF" cellspacing="0" cellpadding="5">
<tr>
<td>
  <table border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td id="titleBar" style="cursor:move">
  <ilayer onSelectStart="return false">
  <layer onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
  <font face="Arial" color="#FFFFFF">Draggable Slide Show</font>
  </layer>
  </ilayer>
  </td>
  <td style="cursor:hand" align="right">
  <a style="text-decoration:none" href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial>X </font></a>
  </td>
  </tr>
  <tr>
  <td bgcolor="#FFFFFF" style="padding:0px" colspan="2">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU">

<img src="SS1.jpg" name='SlideShow' width=200 height=300></td>
</tr>
</table>
  </td>
  </tr>
  </table> 
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

==============================================================

STEP 4. (Optional)
Using Show And Hide Controls
----------------------------

The slideshow can be shown or hidden via simple function calls.

To show the layer:

To hide the layer:

============================[end]=============================

Get The Code!

CodeLifter is a CodeBrain.com Sister Site
� 1995-2008 OEC Corp & CodeLifter.com
CodeLifter� & CodeBrain�
Legal Notices

CodeBrain InterNET Group
BrainCode.com	CodeFoot.com	CodeBelly.com
D3Q.com	etLux.com	FFFast.com
IEFix.com	PopUpWorks.com	MicroTicker.com
DavidSosnowski.com	OECCorp.com	MailToProtector.com
	CodeBrain.com

Free MUSIC!

Contemporary classical music, completely free.

Who do WE
Use for Hosting?

We judge hosts harshly. Uptime. Lightning-fast support. Servers that sing. And prices that please. Anything less, and you're history. Our clients won't accept anything but the best. Will you? From demanding music sites like DavidSosnowski to CodeBelly.com to dozens more, we use... HostNine.com