ASP and a Dynamic Slide Show Control

This is a quick, simple (functional yet inelegant?) piece of IIS-friendly code for a user-driven slide show that I was asked to whip up.

A user wanted to post an mp3 along with some slides that the viewer could flip through along with listening to the audio.  In an effort to not have to revisit the code each time they had new slides to post I wrote a page (in classic ASP as the server supported it) that will monitor a folder for .JPG ’slides’ and build/manage the forward and back navigation of slides for you while enumerating your postion in the slides versus the total.  If the slides are in alphabetical order this just works and they can add/remove/edit slides all day with no changes needed to the slide code.  The forward and back buttons (not included) appear and disappear as appropriate.

Full code and comments after the jump.

Notes:  You’ll need to modify the path passed to the function ‘buildClientSideArray’ below to point to your slide repository.

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

Place before the body or at least before the ‘in page code’ below:

This looks at the file system and builds the array in client side script

<%
DIM imgCounter
imgCounter = -1
DIM imgArray() ' Array to store qualifying images

' Start process
buildClientSideArray "H:\inetpub\ftproot\foobar\slides"

FUNCTION buildClientSideArray(path)
DIM fs, folder, file, item, imageCounter
SET fs = CreateObject("Scripting.FileSystemObject")
SET folder = fs.GetFolder(path)

response.write "<script language='javascript'>" & vbCrLf
response.write "var a = new Array();" & vbCrLf

FOR EACH item in folder.Files
if INSTR(LCASE(item.Name),".jpg") <> 0 THEN
imgCounter = imgCounter + 1
response.write "a[" & imgCounter & "] = '" & item.name & "';" & vbCrLf
END IF
NEXT

response.write "var aLen = " & imgCounter & vbCrLf
response.write "</script>"  & vbCrLf

END FUNCTION
%>
<script language="javascript">
window.onload = loadSlideOne;
var slideCounter = 0;
var totalSlides = <%=imgCounter + 1%>;

function incrementSlide()
{
if (slideCounter + 1 != totalSlides)
{
getObj('slide').src= 'slides/' + a[slideCounter + 1];
getObj('slideCountDisplay').innerHTML = slideCounter + 2;
slideCounter += 1;
updateButtons();
}
}
function decrementSlide()
{
if (slideCounter != 0)
{
getObj('slide').src= 'slides/' + a[slideCounter - 1];
getObj('slideCountDisplay').innerHTML = slideCounter;
slideCounter -= 1;
updateButtons();
}
}
function updateButtons()
{
if (slideCounter < totalSlides - 1){getObj('forwardNav').style.visibility = "visible";}
else{getObj('forwardNav').style.visibility = "hidden";}

if (slideCounter > 0){getObj('backNav').style.visibility = "visible";}
else{getObj('backNav').style.visibility = "hidden";}
}
function loadSlideOne()
{
getObj('slide').src="slides/" + a[0];
}
function getObj(objID)
{
if (document.getElementById) {return document.getElementById(objID);}
else if (document.all) {return document.all[objID];}
else if (document.layers) {return document.layers[objID];}
}
</script>

============================
Place in your page, note it is looking for back and forward arrows for images:

<img id="backNav" src="images/back.gif"
style="visibility:hidden;cursor:pointer;" onclick="decrementSlide()">
SLIDE <span id="slideCountDisplay">1</span> / <%=imgCounter + 1%>
<img id="forwardNav" src="images/forward.gif"
style="visibility:visible;cursor:pointer;" onclick="incrementSlide()"><br>

<img id="slide">

This entry was posted on August 25th, 2008 and is filed under Code. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response or Trackback from your own site.