Javascript Slide Show with Classic ASP to pull photo information from database

Classic ASP Active Server Pages Examples, code, tutorials, scriptsJavascript slide show with photo data from database with Classic ASP

The javascript slide show comes from BarelyFitz. I donated $5 to them because I like it so much. If you use it, please do the same or better. I added some Classic ASP code to make the slide show dynamic.

I used icon graphics for the forward / backward / stop / play links in the slide show; you may want to substitute text links.

You will need to modify the database details and table and field names for your data. My photo table has fields for Caption and FileName. Because I made it for an equine site, there is also a field for the horses' names.

To view my slideshow (while available), click on camera icon on one of these pages.



 'javascript slideshow from

'our database connection, in this case, we're using MySQL
' Open Connection to the database
set conn = Server.CreateObject("ADODB.Connection")
conn.Open xDb_Conn_Str

'because we're using MySQL, we use LIMIT below instead of Top 1 to get a single record from Photos Table
sqlwrk = "SELECT * FROM `tbl_stallions_photos` WHERE StallionId="& request.querystring("key") & " ORDER BY `Order` ASC LIMIT 0, 1"
Set rswrk = conn.Execute(sqlwrk)
If Not rswrk.EOF Then

'the following lines are for getting values to go into the page meta tags
if rswrk("Caption")="" then
strDesc = rswrk("StallionName")
strDesc = rswrk("Caption")
end if
strPgTitle = rswrk("StallionName")
strFile = rswrk("FileName")
End If
Set rswrk = Nothing
<meta name="description" content="<%=strPgTitle%>">
<title>KyQHA Stallion Slideshow: <%=strPgTitle%></title>
<body style="font-family: Arial; font-size: 10pt; color: #EBEBEB; background-color: #000000">
<SCRIPT TYPE="text/javascript">

$Id: slideshow.js,v 1.16 2003/10/14 12:39:00 pat Exp $
Copyright 2000-2003 Patrick Fitzgerald

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
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA

// There are two objects defined in this file:
// "slide" - contains all the information for a single slide
// "slideshow" - consists of multiple slide objects and runs the slideshow

// slide object
function slide(src,link,text,target,attr) {
// This is the constructor function for the slide object.
// It is called automatically when you create a new slide object.
// For example:
// s = new slide();

// Image URL
this.src = src;

// Link URL = link;

// Text to display
this.text = text;

// Name of the target window ("_blank") = target;

// Custom duration for the slide, in milliseconds.
// This is an optional parameter.
// this.timeout = 3000

// 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
// Example: "width=200,height=300"
this.attr = attr;

// Create an image object for the slide
if (document.images) {
this.image = new Image();

// Flag to tell when load() has already been called
this.loaded = false;

this.load = function() {
// This method loads the image for the slide

if (!document.images) { return; }

if (!this.loaded) {
this.image.src = this.src;
this.loaded = true;

this.hotlink = function() {
// This method jumps to the slide's link.
// If a window was specified for the slide, then it opens a new window.

var mywindow;

// If this slide does not have a link, do nothing
if (! return;

// Open the link in a separate window?
if ( {

// If window attributes are specified,
// use them to open the new window
if (this.attr) {
mywindow =,, this.attr);

} else {
// If window attributes are not specified, do not use them
// (this will copy the attributes from the originating window)
mywindow =,;

// Pop the window to the front
if (mywindow && mywindow.focus) mywindow.focus();

} else {
// Open the link in the current window
location.href =;

// slideshow object
function slideshow( slideshowname ) {
// This is the constructor function for the slideshow object.
// It is called automatically when you create a new object.
// For example:
// ss = new slideshow("ss");

// Name of this object
// (required if you want your slideshow to auto-play)
// For example, "SLIDES1" = slideshowname;

// When we reach the last slide, should we loop around to start the
// slideshow again?
this.repeat = true;

// Number of images to pre-fetch.
// -1 = preload all images.
// 0 = load each image is it is used.
// n = pre-fetch n images ahead of the current image.
// I recommend preloading all images unless you have large
// images, or a large amount of images.
this.prefetch = -1;

// IMAGE element on your HTML page.
// For example, document.images.SLIDES1IMG

// ID of a DIV element on your HTML page that will contain the text.
// For example, "slides2text"
// Note: after you set this variable, you should call
// the update() method to update the slideshow display.

// TEXTAREA element on your HTML page.
// For example, document.SLIDES1FORM.SLIDES1TEXT
// This is a depracated method for displaying the text,
// but you might want to supply it for older browsers.

// Milliseconds to pause between slides.
// Individual slides can override this.
this.timeout = 3000;

// Hook functions to be called before and after updating the slide
// this.pre_update_hook = function() { }
// this.post_update_hook = function() { }

// These are private variables
this.slides = new Array();
this.current = 0;
this.timeoutid = 0;

// Public methods
this.add_slide = function(slide) {
// Add a slide to the slideshow.
// For example:
// SLIDES1.add_slide(new slide("s1.jpg", "link.html"))

var i = this.slides.length;

// Prefetch the slide image if necessary
if (this.prefetch == -1) {

this.slides[i] = slide;

//-------------------------------------------------- = function(timeout) {
// This method implements the automatically running slideshow.
// If you specify the "timeout" argument, then a new default
// timeout will be set for the slideshow.

// Make sure we're not already playing

// If the timeout argument was specified (optional)
// then make it the new default
if (timeout) {
this.timeout = timeout;

// If the current slide has a custom timeout, use it;
// otherwise use the default timeout
if (typeof this.slides[ this.current ].timeout != 'undefined') {
timeout = this.slides[ this.current ].timeout;
} else {
timeout = this.timeout;

// After the timeout, call this.loop()
this.timeoutid = setTimeout( + ".loop()", timeout);

this.pause = function() {
// This method stops the slideshow if it is automatically running.

if (this.timeoutid != 0) {

this.timeoutid = 0;


this.update = function() {
// This method updates the slideshow image on the page

// Make sure the slideshow has been initialized correctly
if (! this.valid_image()) { return; }

// Call the pre-update hook function if one was specified
if (typeof this.pre_update_hook == 'function') {

// Convenience variable for the current slide
var slide = this.slides[ this.current ];

// Determine if the browser supports filters
var dofilter = false;
if (this.image &&
typeof this.image.filters != 'undefined' &&
typeof this.image.filters[0] != 'undefined') {

dofilter = true;


// Load the slide image if necessary

// Apply the filters for the image transition
if (dofilter) {

// If the user has specified a custom filter for this slide,
// then set it now
if (slide.filter && && { = slide.filter;


// Update the image.
this.image.src = slide.image.src;

// Play the image transition filters
if (dofilter) {

// Update the text

// Call the post-update hook function if one was specified
if (typeof this.post_update_hook == 'function') {

// Do we need to pre-fetch images?
if (this.prefetch > 0) {

var next, prev, count;

// Pre-fetch the next slide image(s)
next = this.current;
prev = this.current;
count = 0;
do {

// Get the next and previous slide number
// Loop past the ends of the slideshow if necessary
if (++next >= this.slides.length) next = 0;
if (--prev < 0) prev = this.slides.length - 1;

// Preload the slide image

// Keep going until we have fetched
// the designated number of slides

} while (++count < this.prefetch);

this.goto_slide = function(n) {
// This method jumpts 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.
// Examples:
// onClick="myslides.goto_slide(0)"
// onClick="myslides.goto_slide(-1)"
// onClick="myslides.goto_slide(5)"

if (n == -1) {
n = this.slides.length - 1;

if (n < this.slides.length && n >= 0) {
this.current = n;


this.goto_random_slide = function(include_current) {
// Picks a random slide (other than the current slide) and
// displays it.
// If the include_current parameter is true,
// then
// See also: shuffle()

var i;

// Make sure there is more than one slide
if (this.slides.length > 1) {

// Generate a random slide number,
// but make sure it is not the current slide
do {
i = Math.floor(Math.random()*this.slides.length);
} while (i == this.current);

// Display the slide

//-------------------------------------------------- = function() {
// This method advances to the next slide.

// Increment the image number
if (this.current < this.slides.length - 1) {
} else if (this.repeat) {
this.current = 0;


this.previous = function() {
// This method goes to the previous slide.

// Decrement the image number
if (this.current > 0) {
} else if (this.repeat) {
this.current = this.slides.length - 1;


this.shuffle = function() {
// This method randomly shuffles the order of the slides.

var i, i2, slides_copy, slides_randomized;

// Create a copy of the array containing the slides
// in sequential order
slides_copy = new Array();
for (i = 0; i < this.slides.length; i++) {
slides_copy[i] = this.slides[i];

// Create a new array to contain the slides in random order
slides_randomized = new Array();

// To populate the new array of slides in random order,
// loop through the existing slides, picking a random
// slide, removing it from the ordered list and adding it to
// the random list.

do {

// Pick a random slide from those that remain
i = Math.floor(Math.random()*slides_copy.length);

// Add the slide to the end of the randomized array
slides_randomized[ slides_randomized.length ] =

// Remove the slide from the sequential array,
// so it cannot be chosen again
for (i2 = i + 1; i2 < slides_copy.length; i2++) {
slides_copy[i2 - 1] = slides_copy[i2];

// Keep going until we have removed all the slides

} while (slides_copy.length);

// Now set the slides to the randomized array
this.slides = slides_randomized;

this.get_text = function() {
// This method returns the text of the current slide

return(this.slides[ this.current ].text);

this.get_all_text = function(before_slide, after_slide) {
// Return the text for all of the slides.
// For the text of each slide, add "before_slide" in front of the
// text, and "after_slide" after the text.
// For example:
// document.write("<ul>");
// document.write(s.get_all_text("<li>","\n"));
// document.write("<\/ul>");

all_text = "";

// Loop through all the slides in the slideshow
for (i=0; i < this.slides.length; i++) {

slide = this.slides[i];

if (slide.text) {
all_text += before_slide + slide.text + after_slide;



this.display_text = function(text) {
// Display the text for the current slide

// If the "text" arg was not supplied (usually it isn't),
// get the text from the slideshow
if (!text) {
text = this.slides[ this.current ].text;

// If a textarea has been specified,
// then change the text displayed in it
if (this.textarea && typeof this.textarea.value != 'undefined') {
this.textarea.value = text;

// If a text id has been specified,
// then change the contents of the HTML element
if (this.textid) {

r = this.getElementById(this.textid);
if (!r) { return false; }
if (typeof r.innerHTML == 'undefined') { return false; }

// Update the text
r.innerHTML = text;

this.hotlink = function() {
// This method calls the hotlink() method for the current slide.

this.slides[ this.current ].hotlink();

this.save_position = function(cookiename) {
// 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.

if (!cookiename) {
cookiename = + '_slideshow';

document.cookie = cookiename + '=' + this.current;

this.restore_position = function(cookiename) {
// If you previously called slideshow_save_position(),
// returns the slideshow to the previous state.

//Get cookie code by Shelley Powers

if (!cookiename) {
cookiename = + '_slideshow';

var search = cookiename + "=";

if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
// if cookie exists
if (offset != -1) {
offset += search.length;
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1) end = document.cookie.length;
this.current = parseInt(unescape(document.cookie.substring(offset, end)));

this.noscript = function() {
// This method is not for use as part of your slideshow,
// but you can call it to get a plain HTML version of the slideshow
// images and text.
// You should copy the HTML and put it within a NOSCRIPT element, to
// give non-javascript browsers access to your slideshow information.
// This also ensures that your slideshow text and images are indexed
// by search engines.

$html = "\n";

// Loop through all the slides in the slideshow
for (i=0; i < this.slides.length; i++) {

slide = this.slides[i];

$html += '<P>';

if ( {
$html += '<a href="' + + '">';

$html += '<img src="' + slide.src + '" ALT="slideshow image">';

if ( {
$html += "<\/a>";

if (slide.text) {
$html += "<BR>\n" + slide.text;

$html += "<\/P>" + "\n\n";

// Make the HTML browser-safe
$html = $html.replace(/\&/g, "&amp;" );
$html = $html.replace(/</g, "&lt;" );
$html = $html.replace(/>/g, "&gt;" );

return('<pre>' + $html + '</pre>');

// Private methods

this.loop = function() {
// This method is for internal use only.
// This method gets called automatically by a JavaScript timeout.
// It advances to the next slide, then sets the next timeout.
// If the next slide image has not completed loading yet,
// then do not advance to the next slide yet.

// Make sure the next slide image has finished loading
if (this.current < this.slides.length - 1) {
next_slide = this.slides[this.current + 1];
if (next_slide.image.complete == null || next_slide.image.complete) {;
} else { // we're at the last slide;

// Keep playing the slideshow );

this.valid_image = function() {
// Returns 1 if a valid image has been set for the slideshow

if (!this.image)
return false;
else {
return true;

this.getElementById = function(element_id) {
// This method returns the element corresponding to the id

if (document.getElementById) {
return document.getElementById(element_id);
else if (document.all) {
return document.all[element_id];
else if (document.layers) {
return document.layers[element_id];
} else {
return undefined;

// Deprecated methods
// I don't recommend the use of the following methods,
// but they are included for backward compatibility.
// You can delete them if you don't need them.

this.set_image = function(imageobject) {
// This method is deprecated; you should use
// the following code instead:
// s.image = document.images.myimagename;
// s.update();

if (!document.images)
this.image = imageobject;

this.set_textarea = function(textareaobject) {
// This method is deprecated; you should use
// the following code instead:
// s.textarea = document.form.textareaname;
// s.update();

this.textarea = textareaobject;

this.set_textid = function(textidstr) {
// This method is deprecated; you should use
// the following code instead:
// s.textid = "mytextid";
// s.update();

this.textid = textidstr;


<SCRIPT TYPE="text/javascript">

SLIDES = new slideshow("SLIDES");
SLIDES.timeout = 3000;
SLIDES.prefetch = 1;
SLIDES.repeat = true;


'this next block of code retrieves photo file data from the database
sqlwrk = "select PicId, FileName, Caption,FileH,StallionName from `tbl_stallions_photos` WHERE StallionId="& request.querystring("key") & " ORDER BY `Order` ASC"
Set rswrk = Server.CreateObject("ADODB.Recordset")
rswrk.cursorlocation = 3
rswrk.Open sqlwrk, conn, 1, 2
strCnt = rswrk.recordcount
If Not rswrk.EOF Then

datawrk = rswrk.GetRows
rowswrk = UBound(datawrk, 2)
For rowcntwrk = 0 To rowswrk

if datawrk(2, rowcntwrk)="" then
strCaption = datawrk(4, rowcntwrk)
strCaption = datawrk(2, rowcntwrk)
end if

if strCnt = 1 then
strCntText = "<i>1 image.</i> "
if strCnt >1 then
strCntText = "<i>"&strCnt&" images.</i> "
end if
end if

'note that below our image is being sent by ASPjpeg. You may want to use the actual file instead.

s = new slide();
s.src = "sendimg.asp?h=<%=datawrk(3, rowcntwrk)%>&path=<%response.write datawrk(1, rowcntwrk)%>";
s.text = unescape("<%=strCntText%><%=strCaption%>"); = ""; = "";
s.attr = "width:600,height:400";
s.filter = "";




'if there are no images, an image signifying such is shown.
s = new slide();
s.src = "no_photo.jpg";
s.text = unescape("No photo for this stallion."); = ""; = "";
s.attr = "width:600,height:400";
s.filter = "";

End If
Set rswrk = Nothing
set conn=nothing

if (false) SLIDES.shuffle();

<STRONG><font color="#EBEBEB"><A HREF="javascript:SLIDES.previous()">
<img title="Previous" border="0" src="../../images/tostart.png" width="16" height="16"></A></font></STRONG>

<STRONG><A HREF=""><font color="#EBEBEB">
<img title="Next" border="0" src="../../images/toend.png" width="16" height="16"></A></STRONG>

<STRONG><A HREF=""><font color="#EBEBEB">
<img title="Play" border="0" src="../../images/play.png" width="16" height="16"></font></A></STRONG>

<STRONG><A HREF="javascript:SLIDES.pause()"><font color="#EBEBEB">
<img title="Stop" border="0" src="../../images/stopplay.png" width="16" height="16"></font></A></STRONG>


<SCRIPT type="text/javascript">
// For browsers that cannot change the HTML on the page,
// display all of the text from the slideshow.
// I place this within the DIV, so browers won't see it
// if they can change the DIV.
nodivtext = SLIDES.get_all_text("<li>", "<p>\n");
if (nodivtext) {
document.write("<UL>\n" + nodivtext + "\n</UL>");


<a href="javascript:SLIDES.hotlink()"><img name="SLIDESIMG"
src="<%=strFile%>" STYLE="filter:progid:DXImageTransform.Microsoft.Fade()" BORDER=0 alt="Slideshow image"></A>

<SCRIPT type="text/javascript">
if (document.images) {
SLIDES.image = document.images.SLIDESIMG;
<BR CLEAR=all>

Since your web browser does not support JavaScript,
here is a non-JavaScript version of the image slideshow:
<IMG SRC="<%=strFile%>" ALT="slideshow image"><BR>



My slideshow uses ASPjpeg to resize the photos and send them to the browser on-the-fly.

'Response.Expires = 0

' create instance of AspJpeg
Set Jpeg = Server.CreateObject("Persits.Jpeg")

' Open source file

' Set new height and width
if NOT request.querystring("h")="" then
L = 280
end if

if L > 280 then
end if
jpeg.PreserveAspectRatio = True

jpeg.Height = L








ASP Examples Menu of Active Server Pages scripts code Classic ASP

Classic ASP Active Server Pages Examples, code, tutorials, scriptsASP Examples Menu (below*)

Active Server Pages | ASP | Scripts | Tutorials | Code | Web Programming | Examples
Active Server Pages ASP code examples, tutorials, and snippets for use in Programming interactive websites.

If you find omissions or errors let me know. I have moved these code samples to their own domain; if you find pieces missing, please let me know.
My favorite scripts site is CODANGO.


If any the information I've posted here has been useful to you, please donate.

Quick 'n  easy  dirty PHP script code wizard-generator

Zenphoto RSS XML feed used as data source for javascript slide show with PHP

Classic ASP to archive emails into database and save attached files to folder

PHP Image GD for thumbnails and image resizing with pathing for Windows servers

ODBC database connections for Microsoft Access MDB files with Windows 7: solution posted on this forum.

HTML5 embedded video player "Projekktor" completely skinnable with hyperlinked watermark

Edit web.config to allow Windows iis7 server to handle mp4 files or other mime types as needed

URL rewrite or make friendly URLs for iis7 Windows Server 2008 by editing your web.config file


Use PHP to zip folders for backing up a website

Use PHP to archive emails in database and save attached files to folder

Use PHP with json to check how many hits left on Twitter API

PHP get single record from Access database without catchable fatal error message

PHP to make a bot to send automatic Twitter status updates with Abraham Williams' PHP Oauth Twitter Library

A way to use the PHP Oauth Twitter Library with your Classic ASP scripts for sending status updates

Get user's IP address location for your form results

Tutorial for registering an application with Twitter

Update your Twitter status with Classic ASP and Oauth seamlessly and invisibly without having to login to Twitter. Send status updates programmatically from a web page. PHP example too.

CLASSIC ASP: Cache your Twitter tweets in a database to keep your Twitter xml requests within the rate limit of 350 per hour / PHP VERSION

PHP: Use json to fetch Twitter followers' profiles

Index files content and insert into database for faster searches

Classic ASP with Ajax: secure URL check

Classic ASP with Ajax: referer check

Classic ASP with Ajax: a solution to the ampersand problem in querystrings

Very Simple Star Rating System for Classic ASP

Star Rating System uses CSS and JS adapated for Classic ASP from Yvo Schaap PHP script

XMLhttp with ASP to fetch and save photos from Photobucket account through RSS XML. Can be adapted for Youtube videos to import data to database.

NET image resize can be used to make thumbnails for Classic ASP

Track site visitors, get their ip address geographical data, count page views with Classic ASP

Javascript slideshow with Classic ASP to load image details dynamically from database photos table

Classic ASP with Ajax for rotating banners without page refresh and XML file converted to recordset as banner database
--Variation of the above but fetching a REMOTE XML file as the database
--Variation checks for secure URL and builds absolute URL and makes offsite banner links open in new window

True inline edit Classic ASP datagrid table database edit updating with Ajax SIMPLE EASY without page refresh!

Use Ajax with Classic ASP to preview data then update form with javascript url write

Yvo Schaap's easy inline edit Ajax: an example of using it to inline edit multiple rows of records in Classic ASP

Use Classic ASP to send text messages SMS from your website (Also shows how to use xmlhttp to post form data)

Ajax with Classic ASP for seamless, no page reload database record insertion

Nested SQL Statements to make temporary column names

Multiple records per row with paging

Display multiple records per row

Get ID of newly inserted record, Classic ASP, Access Database

Javascript timer with ASP to keep track of time expired until login expires / timeout session is up

Multiple Javascript event functions triggered from single form onsubmit

Get Querystring key names along with querystring variables

These are out of date but may still be of interest:

ASP Youtube Downloader  Version FOUR
All ASP code. Allows user client side downloads of Youtube videos. You have the option to allow files to be saved directly to your site also.
ASP/PHP video downloader (Works better than ASP for large files)

Use ASP to dynamically parse a Youtube XML playlist to render to html.

Zip up an archive file of your site for backup if you need to restore website with ASP and free Zip Component.

Zip all files in a folder into an archive or backup file dynamically by specific file extension.

Sanitize or clean price cost field for database insertion or display.

Javascript image dimensions and image file size preview.

Put recordset into array, assign keys to the records then use record associated with specific array key as a variable elsewhere.

Access Database Interface Generator Wizard to read your table and field names and to create a table display.

Combining dropdown selection box menu with dynamic ASP database page.

How to redirect user to original page they tried to view before logging, after they are logged in.

Previous/Current/Next Records, or Buddy Ring Script

Custom ASP 404 page not found error script: can also be used for URL rewriting

ASP Example: Combine ASP with Javascript for popup windows
dynamically sized to image dimensions.

ASP Example: How to use ASPJPEG to create thumbnails
Click for free Highly recommended thumbnailer for which you don't need Server access (doesn't seem to work on Windows Server 2008)

ASPjpeg: How to re-scale aspect ratio of thumbnails by height instead of width.

ASP Example: What if your host has an older version of ASPJPEG that doesn't support gifs?

Select Count Distinct Records for Access Database

Upload Image to folder and insert filename into database

Get date in such a way that it can be made part of a file name

Isolate a file name away from its path or extension or strip a path from a file name or strip characters from database field

User-customized on-the-fly stylesheet css files

Enhanced Page Hits Counter (also counts downloads and menu link hits)

Loop through array and compare to string with select case

Aphabetical Paging for your ASP scripts

Web Wiz Guide's Site Searcher Script modified as a file content indexer

Let Users Select How Many Records to View

Access Database for your PayPal IPN scripts

Miscellaneous collected code

From Classic ASP to PHP

You don't have to be a genius, just persistent, to write original Active Server Pages scripts

BuildApp - great old Classic ASP script generator!

Software Recommendation: bare_bones_no_bells_and_whistles_asp_code_generator_database_interface_maker (For PHP I recommend EasyGen.)

If any of this information is helpful to you, please consider donating with the button below. Thanks! ~~Lil