Crystal Shards
01-12-2007, 05:47 PM
I have a slideshow that uses an array to provide the sources for all the pictures therein.
What I want is for the user to be able to click on the slideshow at any time, and have the current image appear (full size) in a new window. Also, I want to to this without having to make thumbnail-size copies of each image (there are hundreds) and without having to make individual html files for every image. Is there a way to do this automatically?
I have never learned anything about javascript and am a total newbie to css. Everything I have here I pieced together from other people's free scripts.
I thought I could make some kind of onclick event call a function to open a new window, but I don't know how to change the source image dynamically with the slideshow content. Any help would be terrific!
The script for the slideshow page is below.:
<html>
<head>
<style>
.Caption {
font-family: Book Antiqua, Georgia, Garamond, Arial;
color: #FFFFCC;
font-style: bold
{font-size: 150%}
}
</style>
<script>
// (C) 2002 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header.
// ==============================
// Set the following variables...
// ==============================
// Set the slideshow speed (in milliseconds)
var SlideShowSpeed = 3000;
// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 0.5;
var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this
// Specify the image files...
// To add more images, just continue
// the pattern, adding to the array below.
// To use fewer images, remove lines
// starting at the end of the Picture array.
// Caution: The number of Pictures *must*
// equal the number of Captions!
Picture[1] = 'imgs/ComoOil-Pict01.jpg';
Picture[2] = 'imgs/ComoOil-Pict02.jpg';
Picture[3] = 'imgs/ComoOil-Pict03.jpg';
Picture[4] = 'imgs/ComoOil-Pict04.jpg';
Picture[5] = 'imgs/ComoOil-Pict05.jpg';
Picture[6] = 'imgs/ComoOil-Pict06.jpg';
Picture[7] = 'imgs/ComoOil-Pict07.jpg';
Picture[8] = 'imgs/ComoOil-Pict08.jpg';
Picture[9] = 'imgs/ComoOil-Pict09.jpg';
Picture[10] = 'imgs/ComoOil-Pict10.jpg';
Picture[11] = 'imgs/ComoOil-Pict11.jpg';
// Specify the Captions...
// To add more captions, just continue
// the pattern, adding to the array below.
// To use fewer captions, remove lines
// starting at the end of the Caption array.
// Caution: The number of Captions *must*
// equal the number of Pictures!
Caption[1] = "View from Street";
Caption[2] = "Front Entry";
Caption[3] = "First Floor Plan";
Caption[4] = "Second Floor Plan";
Caption[5] = "Elevation";
Caption[6] = "Rear View";
Caption[7] = "Interior";
Caption[8] = "Interior";
Caption[9] = "Interior";
Caption[10] = "Interior";
Caption[11] = "Site Plan";
// =====================================
// Do not edit anything below this line!
// =====================================
var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;
var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}
function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}
</script>
</head>
<body onload=runSlideShow() bgcolor=#000000>
<center>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<!--
The next table cell holds the captions.
This table cell must have id=CaptionBox and
class=Caption in its tag. The default caption
shows whilst loading in all browsers; NS4
will show only the default caption, throughout.
//-->
<td id=CaptionBox class=Caption align=center bgcolor=#000000 height=60>
 
</td>
</tr>
<tr>
<td height=10>
</td>
</tr>
<TR>
<!--
The next table cell holds the images.
Set cell and image width and height the same.
The img src must have name=PictureBox in its
tag. Usually the first image in the Picture
array in the script is used here.
//-->
<td>
<img src=imgs/ComoOil-Pict01.jpg name=PictureBox width=400>
</td>
</tr>
</table>
</body>
</html>
What I want is for the user to be able to click on the slideshow at any time, and have the current image appear (full size) in a new window. Also, I want to to this without having to make thumbnail-size copies of each image (there are hundreds) and without having to make individual html files for every image. Is there a way to do this automatically?
I have never learned anything about javascript and am a total newbie to css. Everything I have here I pieced together from other people's free scripts.
I thought I could make some kind of onclick event call a function to open a new window, but I don't know how to change the source image dynamically with the slideshow content. Any help would be terrific!
The script for the slideshow page is below.:
<html>
<head>
<style>
.Caption {
font-family: Book Antiqua, Georgia, Garamond, Arial;
color: #FFFFCC;
font-style: bold
{font-size: 150%}
}
</style>
<script>
// (C) 2002 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header.
// ==============================
// Set the following variables...
// ==============================
// Set the slideshow speed (in milliseconds)
var SlideShowSpeed = 3000;
// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 0.5;
var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this
// Specify the image files...
// To add more images, just continue
// the pattern, adding to the array below.
// To use fewer images, remove lines
// starting at the end of the Picture array.
// Caution: The number of Pictures *must*
// equal the number of Captions!
Picture[1] = 'imgs/ComoOil-Pict01.jpg';
Picture[2] = 'imgs/ComoOil-Pict02.jpg';
Picture[3] = 'imgs/ComoOil-Pict03.jpg';
Picture[4] = 'imgs/ComoOil-Pict04.jpg';
Picture[5] = 'imgs/ComoOil-Pict05.jpg';
Picture[6] = 'imgs/ComoOil-Pict06.jpg';
Picture[7] = 'imgs/ComoOil-Pict07.jpg';
Picture[8] = 'imgs/ComoOil-Pict08.jpg';
Picture[9] = 'imgs/ComoOil-Pict09.jpg';
Picture[10] = 'imgs/ComoOil-Pict10.jpg';
Picture[11] = 'imgs/ComoOil-Pict11.jpg';
// Specify the Captions...
// To add more captions, just continue
// the pattern, adding to the array below.
// To use fewer captions, remove lines
// starting at the end of the Caption array.
// Caution: The number of Captions *must*
// equal the number of Pictures!
Caption[1] = "View from Street";
Caption[2] = "Front Entry";
Caption[3] = "First Floor Plan";
Caption[4] = "Second Floor Plan";
Caption[5] = "Elevation";
Caption[6] = "Rear View";
Caption[7] = "Interior";
Caption[8] = "Interior";
Caption[9] = "Interior";
Caption[10] = "Interior";
Caption[11] = "Site Plan";
// =====================================
// Do not edit anything below this line!
// =====================================
var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;
var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}
function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}
</script>
</head>
<body onload=runSlideShow() bgcolor=#000000>
<center>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<!--
The next table cell holds the captions.
This table cell must have id=CaptionBox and
class=Caption in its tag. The default caption
shows whilst loading in all browsers; NS4
will show only the default caption, throughout.
//-->
<td id=CaptionBox class=Caption align=center bgcolor=#000000 height=60>
 
</td>
</tr>
<tr>
<td height=10>
</td>
</tr>
<TR>
<!--
The next table cell holds the images.
Set cell and image width and height the same.
The img src must have name=PictureBox in its
tag. Usually the first image in the Picture
array in the script is used here.
//-->
<td>
<img src=imgs/ComoOil-Pict01.jpg name=PictureBox width=400>
</td>
</tr>
</table>
</body>
</html>