Important Slideshow question

Any help would be greatly appreciated.

I am building a site for my photography and friends as well. It’s still very early in development because I’m having issues figuring out how to set up a slideshow the way I want it to be. I finally found the script that displays the things I want (i.e. the image, a description, who it was taken by and then number of pictures). The script is below but here is a link so you can see it in action -
http://www.endhaven.com/thehold/photography/jeremiahisms/slideshow.shtml

That is all fine and dandy but here is the issue that I can’t figure out… The page before the slideshow has a bunch of thumbnails and each thumbnail links to that one page "slideshow.shtml". That page is here - http://www.endhaven.com/thehold/photography/jeremiahisms/index.shtml
How do I have the slideshow start on the picture that was selected on the thumbnail page?

I know that I could easily just create as many slideshow.shtml pages as I have pictures and then just rearrange the images but I will be creating other sections that will have 50+ pictures on them. So I think it would be silly to do all that work since I know this can be done.

I found a script that did similar things but it didn’t do the other things I listed above (showing the image, a description, who it was taken by and then number of pictures). Also the other script I found opened it in a separate window and I don’t want to do that.

If anyone out there knows of a script that does what I’m looking for please let me know because I couldn’t find one anywhere. Please, please, please help me out.

It may seem like it would be rather simple but I can't figure it out for the life of me.

Here is the script I'm using just in case it helps out:

`````````````````````````````````````````````
<table width="652" border="0" bgcolor="#669900">
<tr><td>
<table align="center">
<tr align="center"><td>
<input type="button" id="btnPrev" value="< " onclick="Prev();" class="btn" onmouseover="hov(this,'btn btnhov')" onmouseout="hov(this,'btn')" /> <input type="button" id="bntPlay" value="Stop & Go" onclick="Play()" class="btn" onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'"/> <input type="button" id="btnNext" value=" >" onclick="Next();" class="btn" onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'"/>
<br>
</td></tr>

<tr align="center" class="Photography"><td>
<img id="_Ath_Slide" onload="OnImgLoad()" class="pictureborder">
</td></tr>

<tr align="center"><td>
<table class="Photography"><tr><td align="left">
<b>Description:</b> <SPAN id="_Ath_FileName"> </SPAN> <br>
<b>Photo By:</b> <SPAN id="_Ath_FileBy"> </SPAN> <br>
<b>Number of Pictures:</b> <b><SPAN id="_Ath_Img_X"></SPAN></b>&nbsp;of&nbsp;&nbsp;<b><SPAN id="_Ath_Img_N"></SPAN></b>
</td></tr>
</table>
</td></tr>
</table>

<p align="center">

<script language="JavaScript1.2">

/*
Interactive Image slideshow with text description
By Christian Carlessi Salvadó (cocolinks@c.net.gt). Keep this notice intact.
Visit http://www.dynamicdrive.com for script
*/


g_fPlayMode = 0;
g_iimg = -1;
g_imax = 0;
g_ImageTable = new Array();

function ChangeImage(fFwd)
{
if (fFwd)
{
if (++g_iimg==g_imax)
g_iimg=0;
}
else
{
if (g_iimg==0)
g_iimg=g_imax;
g_iimg--;
}
Update();
}

function getobject(obj){
if (document.getElementById)
return document.getElementById(obj)
else if (document.all)
return document.all[obj]
}

function Update(){
getobject("_Ath_Slide").src = g_ImageTable[g_iimg][0];
getobject("_Ath_FileName").innerHTML = g_ImageTable[g_iimg][1];
getobject("_Ath_FileBy").innerHTML = g_ImageTable[g_iimg][2];
getobject("_Ath_Img_X").innerHTML = g_iimg + 1;
getobject("_Ath_Img_N").innerHTML = g_imax;
}


function Play()
{
g_fPlayMode = !g_fPlayMode;
if (g_fPlayMode)
{
getobject("btnPrev").disabled = getobject("btnNext").disabled = true;
Next();
}
else
{
getobject("btnPrev").disabled = getobject("btnNext").disabled = false;

}
}
function OnImgLoad()
{
if (g_fPlayMode)
window.setTimeout("Tick()", g_dwTimeOutSec*1000);
}
function Tick()
{
if (g_fPlayMode)
Next();
}
function Prev()
{
ChangeImage(false);
}
function Next()
{
ChangeImage(true);
}


////configure below variables/////////////////////////////

//configure the below images and description to your own.
g_ImageTable[g_imax++] = new Array ("/images/photography/jeremiahisms/Sylvia011.jpg", "Sylvia", "");
g_ImageTable[g_imax++] = new Array ("/images/photography/jeremiahisms/Justin000.jpg", "Justin", "");
g_ImageTable[g_imax++] = new Array ("/images/photography/jeremiahisms/Chris005.jpg", "Chris", "");
g_ImageTable[g_imax++] = new Array ("/images/photography/jeremiahisms/Chris002.jpg", "Chris", "");
g_ImageTable[g_imax++] = new Array ("/images/photography/jeremiahisms/Tysen010.jpg", "Tysen", "");
//g_ImageTable[g_imax++] = new Array ("", "", "");
//extend the above list as desired
g_dwTimeOutSec=2

////End configuration/////////////////////////////

if (document.getElementById||document.all)
window.onload=Next

</script>
</p>
</td></tr></table>

Here's one you should be able to adapt for your layout

Page1.htm


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script language="javascript">
<!--
var launchSlideShowX = (screen.width/2)-191;
var launchSlideShowY = (screen.height/2)-238;
var pos = "left="+launchSlideShowX+",top="+launchSlideShowY;
function launchSlideShow(n){
location.href="page2.htm?"+n
}
//-->
</script>

</HEAD>
<BODY>

<img src="images/pic01_tn.jpg" width="50" height="50" border="0" onclick="launchSlideShow(0)">
<img src="images/pic02_tn.jpg" width="50" height="50" border="0" onclick="launchSlideShow(1)">
<img src="images/pic03_tn.jpg" width="50" height="50" border="0" onclick="launchSlideShow(2)"><BR>

open popup and start slideshow from chosen thumbnail

</BODY>
</HTML>


{b]Page2.htm[/B]


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script language="javascript">
<!--
// ==============================
// Set the following variables...
// ==============================

var picture = new Array(); // Specify the image files...
picture[0] = 'images/pic01_tn.jpg';
picture[1] = 'images/pic02_tn.jpg';
picture[2] = 'images/pic03_tn.jpg';

var Caption = new Array(); // Specify the Captions...
Caption[0] = "This is the first caption.";
Caption[1] = "This is the second caption.";
Caption[2] = "This is the third caption.";

if (location.search.length > 0){
data = unescape(location.search.substring(1))
var jss= data
}
else{
var jss = 0;
}

var preload = new Array();
for (var iss = 0; iss < picture.length; iss++){
preload[iss] = new Image();
preload[iss].src = picture[iss];
}

function init_show(){
document.images.pictureBox.src = picture[jss];
}

function control(how){
if (how=="H"){jss = 1}
if (how=="F"){jss++}
if (how=="B"){jss--}
if (jss > picture.length-1){jss=0}
if (jss < 0){jss = pss}
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 = picture[jss];
if (document.getElementById){
document.getElementById("CaptionBox").innerHTML= Caption[jss]
}
if(document.all){
document.images.pictureBox.filters.blendTrans.Play();
}

}
//-->
</script>

<HEAD>
<BODY onload='init_show();self.focus();' bgcolor=#000000 link="#FF0000" vlink="#FF0000" alink="#FF0000">

<div align="center">
<center>
<table border=0 cellpadding=10 cellspacing=0>
<tr>
<td width=350 height=280 colspan="3">
<img src=image00.gif name=pictureBox width=350 height=280>
</td>
</tr>
<tr>
<td id=CaptionBox class=Caption align=center colspan="3">
This is the default caption.
</td>
</tr>
<tr>
<td align="center">
<a class=Controls href="#" onclick="control('B');">< <</a>
</td>
<td align="center">
<a class=Controls href="#" onclick="control('H');">| | |</a>
</td>
<td align="center">
<a class=Controls href="#" onclick="control('F');"><b>> ></b></a>
</td>
</tr>
</table>
</center>
</div>
</BODY>
</HTML>

Thanks for the help Mr J but that is the other one that I already tried to adabt and ran into issues. One of the biggest issues is it opens in a separate widow and I don't want to do that. I just don't know how to change it to not open in another window. Thank you so very much for the help though. :)

Any other advice would be greatly appreciated.

You will have to pass data on the image selected from the thumbnail page. Like :
<a href="http://www.endhaven.com/thehold/pho...slideshow.shtml?3">
<img src="4th thumbnail image">
</a>

then on the slideshow page read the value and start the image array at the corresponding numeric placeholder. The variable assignment g_iimg = -1; sets the slideshow to start at the first image, if you set this value on the fly you can start the slideshow at any point.

Try replacing the fixed variable line :
g_iimg = -1; with
var ref = location.href.toString();
var num = ref.split("?");
if (!num[1]) g_iimg=-1;
else g_iimg=num[1];

/Bob

Similar to rwedges reply


Look for this line near the top of the script and delete

g_iimg = -1;

Then put this at the beginning of the script

if (location.search.length > 0){
dataPassed = unescape(location.search.substring(1))
g_iimg=dataPassed-1
}
else{
g_iimg = -1
}

In your thumbnail links append the thumbnail number to the file info

slideshow.shtml?0

Remember to start from zero

Thank you both so very much! I've got it now. I can't thank you enough.

Have a great and wonderful day!