PDA

View Full Version : Possible to obtain image source from array?



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>
&nbsp
</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>

Kenny
01-12-2007, 07:09 PM
Quick and dirty, near the end of the code replace the line of image with this;

<img src=imgs/ComoOil-Pict01.jpg name=PictureBox width=400 onclick="clearTimeout(tss);window.open(this.src)">

Crystal Shards
01-12-2007, 07:18 PM
That worked a treat! Thanks so much. Is it equally easy to have the new window automatically fit to the picture?

Crystal Shards
01-12-2007, 07:20 PM
pssst...not that I'm complaining, but this also stops the slideshow. Can that be fixed?

Crystal Shards
01-12-2007, 07:21 PM
eeek....it doesn't work if the page is inside a frame, either.....oh and I was so excited.

Crystal Shards
01-12-2007, 07:26 PM
Never mind it works just fine--I wasn't looking at the refreshed page. Dumb newbie mistake.

Kenny
01-13-2007, 02:05 AM
onclick="clearTimeout(tss);window.open(this.src)">

If you want the slide show to continue under the new window, remove the bits of
clearTimeout(tss);

jscheuer1
01-13-2007, 05:48 AM
That worked a treat! Thanks so much. Is it equally easy to have the new window automatically fit to the picture?

If the images have been successfully preloaded before any of them are clicked on, this will work:


<img src="imgs/ComoOil-Pict01.jpg" name="PictureBox" width="400" onclick="window.open(this.src,'','width='+[preLoad[jss-1>0? jss-1 : pss].width+20]+', height='+[preLoad[jss-1>0? jss-1 : pss].height+20]);">