|
|
<html>
<head>
<title>Online Photo Album - a pic</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="Author" content="Victor Vogelpoel [victorv@ergens.com]">
<LINK REL="stylesheet" HREF="album.css" TYPE="text/css">
<script language="javascript" src="photos.js"></script>
<script language="javascript" src="lang.js"></script>
<script language="javascript" src="album.js"></script>
<script language=javascript>
<!--
///////////////////////////////////////////////////////////
// Electronic Photo Album
// Version 2.3
// Copyright Victor Vogelpoel [victorv@ergens.com]
// Aug-Sept 1999-2002
// NOTE: I would appreciate an e-mail if you use this
// album or this code for your own purposes.
///////////////////////////////////////////////////////////
//**Start Encode**
// Initialize the Parameter API
initParameters();
document.title=sAlbumTitle;
// GLOBAL VARIABLES
nCurrentPic = 1;
nThumbPage = 1; // Thumbpage to "back" to
bSlideShow = false;
nSlideShowTime = 4000; // 4 seconds
nSlideShowTimerID = 0;
oTestingImage = new Image;
oTestingImage.onload=onImageCached;
// Show the designated picture when the page is loaded.
function onBodyLoaded()
{
bindToolTips();
nSlideShowTime = getParameter("slideshowtime");
if (nSlideShowTime == null || nSlideShowTime == "")
nSlideShowTime = 4000; // 4 seconds;
sSlideShow = getParameter("doslideshow");
if (sSlideShow == null || sSlideShow == "")
bSlideShow = false;
sSlideShow=sSlideShow.toLowerCase();
if (sSlideShow=="true")
bSlideShow=true;
// bSlideShow = true; // TESTING PURPOSES
if (bSlideShow)
document.all.SLIDESHOWBTN.src="images/slideshow_running.gif";
nPicNum = getParameter("pic");
if (nPicNum == null || nPicNum == "")
nPicNum = 1;
ShowPic(nPicNum);
}
function onBodyClicked()
{
//alert("onBodyClicked");
// Turn off the slideshow if clicked anywhere...
if (bSlideShow)
StopSlideShowTimer();
}
function onStartClicked()
{
document.location="start.htm#pic=" + nCurrentPic;
}
function onThumbnailsClicked()
{
document.location="thumbpic.htm#pic=" + nCurrentPic;
}
function onSlideShowClicked()
{
window.event.cancelBubble=true; // Stop bubbling the event to a parent.
// alert("SlideShowClicked");
if (bSlideShow)
{
StopSlideShowTimer();
document.all.SLIDESHOWBTN.src="images/slideshow_over.gif";
}
else
{
document.all.SLIDESHOWBTN.src="images/slideshow_running.gif";
bSlideShow = true;
NextPic(); // this will show the nextpic AND start a new timer
}
}
function onSlideShowMouse(sNewImage)
{
window.event.cancelBubble=true;
if (!bSlideShow)
document.all.SLIDESHOWBTN.src=sNewImage;
}
function onAboutClicked()
{
document.location="about.htm#pic=" + nCurrentPic;
}
function StartSlideShowTimer()
{
bSlideShow = true;
nSlideShowTimerID = setTimeout("NextPic()", nSlideShowTime);
}
function StopSlideShowTimer()
{
if (bSlideShow)
{
document.all.SLIDESHOWBTN.src="images/slideshow.gif";
bSlideShow = false;
clearTimeout(nSlideShowTimerID);
}
}
function onLastPicShown()
{
onThumbnailsClicked();
}
function onImageCached()
{
var nPicHeight=300;
var nPicWidth=400;
if (oTestingImage.height > oTestingImage.width)
nPicWidth=oTestingImage.width * (300/oTestingImage.height);
else
nPicWidth=Math.min(oTestingImage.width, 465);
with (document.all.PIC)
{
src = oTestingImage.src;
width=nPicWidth;
height=nPicHeight;
}
}
// PHOTO SPECIFIC FUNCTIONS
// Show a specific picture and caption
function ShowPic(nPicNum)
{
nPicNum = Math.min(Math.max(nPicNum, 1), aPhotos.length/2);
// First load it in a dummy image object.
oTestingImage.src=sMediumSizePhotosLocation + aPhotos[(nPicNum-1)*2];
sDummyVar = oTestingImage.src; // Simulate a "NOP"
sDummyVar = oTestingImage.src; // Simulate a "NOP"
document.all.PICLABEL.innerText = aPhotos[(nPicNum-1)*2 + 1];
document.all.PICLABEL.style.display = "";
// Hide an arrow if at the first or last picture
document.all.PREVPIC.style.display = ((nPicNum == 1) ? "none" : "");
document.all.NEXTPIC.style.display = ((nPicNum == aPhotos.length/2) ? "none" : "");
nCurrentPic=nPicNum;
}
// onPhotoLoaded is fired when the photo is fully loaded in the image object
// We need this for giving the user enough viewing time for the slideshow.
function onPhotoLoaded()
{
window.event.cancelBubble=true;
if (bSlideShow && window.event.srcElement.src.toLowerCase().indexOf("images/transp400x300.gif") == -1)
{
// The loaded photo is NOT the tranparent background picture, so
// we can start the slideshow timer.
// alert("Loaded image - " + window.event.srcElement.src);
StartSlideShowTimer();
// Stop the timer if at the last photo
if (nCurrentPic >= aPhotos.length/2)
{
StopSlideShowTimer();
// Wait a while and then move to the index!
nSlideShowTimerID = setTimeout("onLastPicShown()", nSlideShowTime);
}
}
}
function ImageNotFound(oThisImg)
{
oThisImg.height=300;
oThisImg.width=400;
oThisImg.src = "images/imgnotfound400x300.gif";
}
// Goto Previous or Next picture
function PrevPic()
{
nCurrentPic--;
ShowPic(nCurrentPic);
}
function NextPic()
{
nCurrentPic++;
ShowPic(nCurrentPic);
}
//-->
</script>
</head>
<body topmargin="0" leftmargin="0" scroll="no" onLoad="onBodyLoaded()" onClick="onBodyClicked()" onUnload="StopSlideShowTimer()" scroll="no">
<div align="left">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" valign="top" align="left" nowrap><img border="0" src="images/top.jpg" width="689" height="106"></td>
</tr>
<tr>
<td valign="top" align="right" nowrap width="104" height="322"><img border="0" src="images/left.jpg" width="104" height="322"></td>
<td background="images/back.jpg" nowrap width="481" valign="top" align="center">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#313431">
<tr>
<td valign="top" align="center" nowrap><img id="PIC" name="PIC" onLoad="onPhotoLoaded()" onError="ImageNotFound(this)" src="images/transp400x300.gif" border="0" width="400" height="300">
</td>
</tr>
</table>
</div>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="16" valign="middle" align="left" nowrap><a href="javascript:PrevPic()"><img name="PREVPIC" id="PREVPIC" style="display:none" border="0" src="images/prev.gif" width="14" height="13"></a></td>
<td id="PICLABEL" class="piclabel" style="display:none"> </td>
<td width="16" valign="middle" align="right" nowrap><a href="javascript:NextPic()"><img name="NEXTPIC" id="NEXTPIC" style="display:none" border="0" src="images/next.gif" width="14" height="13"></a></td>
</tr>
</table>
</div>
</td>
<td valign="top" align="left" nowrap width="104" height="322"><img border="0" src="images/right.jpg" width="104" height="322"></td>
</tr>
<tr>
<td colspan="3" valign="top" align="left" nowrap><img border="0" src="images/bottom.jpg" width="689" height="101"></td>
</tr>
</table>
</div>
<div id="ControlPanel" style="position:absolute; z-index:1; left: +30px; top: +37px">
<img name="STARTBTN" id="STARTBTN" border="0" src="images/gohome.gif" onClick="onStartClicked()" onMouseOver="this.src='images/gohome_over.gif'" onMouseOut="this.src='images/gohome.gif'" style="cursor:hand" width="26" height="26">
<img name="THUMBPAGEBTN" id="THUMBPAGEBTN" border="0" src="images/gotothumbpage.gif" onClick="onThumbnailsClicked()" onMouseOver="this.src='images/gotothumbpage_over.gif'" onMouseOut="this.src='images/gotothumbpage.gif'" style="cursor:hand" width="26" height="26">
<img name="SLIDESHOWBTN" id="SLIDESHOWBTN" border="0" src="images/slideshow.gif" onClick="onSlideShowClicked()" onMouseOver="onSlideShowMouse('images/slideshow_over.gif')" onMouseOut="onSlideShowMouse('images/slideshow.gif')" style="cursor:hand" width="26" height="26">
<img name="ABOUTBTN" id="ABOUTBTN" border="0" src="images/about.gif" onClick="onAboutClicked()" onMouseOver="this.src='images/about_over.gif'" onMouseOut="this.src='images/about.gif'" style="cursor:hand" width="26" height="26">
</div>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Victor is consulting in The Netherlands.
His interests include Windows and web application development using .NET technologies and even some Apache/PHP/MySQL...
Submit an article or tip