select one thing – load another?

@SteveBFeb 16.2005

Hi there,

I’m trying to set up an online photo album and in making it as simple to administer in the future, I’m giving myself all sorts of javascript grief…

I want to select an image from a pull-down menu and then be able to load a corresponding html file as a result of clicking a neighbouring button, but I can’t work it out…

For example, if you select “album 001” which loads “pics/oo1.jpg”, how can you get the button to load (in the main window) “album001/album001.htm”?

Help greatly appreciated (code below)
Steve.

<html>
<head>
<title>Photo Album</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>

<!–
function changeImage()

{
mainimage.src = list.options[list.selectedIndex].value;
}

function prevImage()

{
if(list.selectedIndex == 0)
{
list.selectedIndex = 0;
}
else
{
list.selectedIndex–;
}
changeImage();
}

function nextImage()

{
if(list.selectedIndex == list.options.length-1)
{
list.selectedIndex = list.options.length-1;
}
else
{
list.selectedIndex++;
}
changeImage();
}

// End –>

</script>

</head>

<tr><td width=”590″ height=”10″> </td></tr>

<tr> <td background=”images/background.gif”>

~~[b]~~<!–click here to load the album selected on this page. ie album001/album001.htm –>[/b]

<img src=”images/next.gif” border=”0″></a></td>
<td><a href=”#” onclick=”javascript: nextImage()”><img src=”images/next-all.gif” border=”0″></a></td>
</tr>
</table></td></tr>
<tr><td width=”150″ height=”25″ align=”center” valign=”middle”>
<select id=”list” onchange=”javascript: changeImage()”>
<option value=”pics/001.jpg”>Album 001</option>
<option value=”pics/002.jpg”>Album 002</option>
<option value=”pics/003.jpg”>Album 003</option>
<option value=”pics/004.jpg”>Album 004</option>
<option value=”pics/005.jpg”>Album 005</option>
<option value=”pics/006.jpg”>Album 006</option>
<option value=”pics/007.jpg”>Album 007</option>
<option value=”pics/008.jpg”>Album 008</option>
<option value=”pics/009.jpg”>Album 009</option>

</select></td></tr>
<tr><td width=”150″ height=”80″> </td></tr>
</table>
</td>
<td width=”440″ height=”440″ align=”center” valign=”middle”><img name=”mainimage”></td>
</tr>
</table>
</td>
</tr>

<tr><td width=”590″ height=”10″> </td></tr>

</table>

</td></tr>
</table>
</body>
</html>

to post a comment

JavaScript

8 Comments(s) _↴

@Warren86Feb 16.2005 — #The following uses this path structure:

Folder which contains the Main Document, has a folder named Albums. Inside the Albums folder there is a seperate folder for each album, named 001, 002, etc.

The document below, named Album001, is located in the folder named 001, which is inside the Albums folder, which is located in same folder as the Main Document.

All of the images, for each album, must have consecutive numbers for their file names, 1.jpg, 2.jpg, etc.

----------- Main Document ---------------

<html>

<head>

<title>Photo Album</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT LANGUAGE="JavaScript">

function chooseAlbum(isAlbum){
 
   document.frames['albumView'].location.replace(isAlbum);
  }
 
  function turnPage(direction){
 
   document.frames['albumView'].turnPage(direction);
  }

</script>

</head>

<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">

<IFrame

Src = ''

Name = 'albumView'

Height = '400'

Width = '100%'

FrameBorder = 'yes'

Scrolling = 'auto'>

</IFrame>

<table align='center' border="1" width='150' cellpadding="0" cellspacing="0">

<tr>

<td align='center'><img src="images/back.gif" onclick="turnPage('prev')"></td>

<td align='center'><img src="images/next.gif" onclick="turnPage('next')"></td>

</tr>

<tr>

<td colspan='2' align='center'>

<select onchange="chooseAlbum(this.value)">

<option value="" selected> Select an Album </option>

<option value="Albums//001//Album001.html"> Album 001 </option>

<option value="Albums//002//Album002.html"> Album 002 </option>

<option value="Albums//003//Album003.html"> Album 003 </option>

</select>

</td>

</tr>

</table>

</body>

</html>

------------ Album001.html ---------------

<HTML>

<Head>

<Script Language=JavaScript>

// image file names are consecutive numbers, e.g. 1.jpg, 2.jpg, 3.jpg
 
  var nImgs = 6;  // number of images
  var curr = 1;
 
  function turnPage(direction){
 
   if (direction == 'next'){if (curr < nImgs){curr++} else{curr = 1}}
   if (direction == 'prev'){if (curr > 1){curr--} else{curr = nImgs}}
   document.getElementById('slideImg').src = curr+".jpg";
  }

</Script>

</Head>

<body>

<table border="0" cellpadding="0" align='center'>

<TR>

<TD><Img Src='1.jpg' width=640 height=480 id='slideImg'></TD>

</TR>

</table>

</body>

</html>

@SteveBauthorFeb 16.2005 — #Humm, didn't think about iFrames!

Thanks Warren, I'll have a play about with that.

S.

@Warren86Feb 16.2005 — #You're welcome. I appreciate your courtesy. Good luck with your project.

@SteveBauthorFeb 16.2005 — #Hi Warren,

I'm sorry, but I can't get your 'main' page to work. Should there be anything as the iframe source? I'm using sample pictures and nothing comes up.

S.

@Warren86Feb 16.2005 — #I believe you are not paying attention to the path(s), or the name(s) of the folder(s) or names of the images.

I tested the code before I posted it and it works.

Look, the "Albums" are in a separate folder. Within that folder are all the folders for the various Albums. Within each "Album" folder are the images and the HTML document named Album001.html

So, for example, here's the main document, located at:

http://www.mywebsite.com/photoalbums/

Inside the photoalbums folder is:

The main document, AND the Albums folder

Inside the Albums folder are all the album folders, named 001, 002, etc.

Inside the 001 folder are the images for that album, AND the Album001.html document.

Aside from this, I have nothing more to offer and can't help you. The code I posted works.

@SteveBauthorFeb 16.2005 — #Apologies Warren,

Turns out I [I]was[/I] following the correct paths, it's just that for some reason, it didn't work in Firefox! I think there are some issues using [I]some[/I] types of iframes with Firefox... ([URL=http://www.cre8asiteforums.com/viewtopic.php?t=21173]see article[/URL]).

Anyway it works, and that's the main thing.

Cheers,

S

@Warren86Feb 16.2005 — #You're welcome, again. I deeply appreciate your courtesy.

As far as I know, and I don't keep track of these things, because I don't care about browsers other than IE, that Iframes are IE, only.

If I may be so bold, please, if you seek help here again, state whether IE code alone will meet your needs, or not.

There are others here who are well informed about such other browsers, and it would prevent those of us who don't share their zealousness from wasting our time.

Take care.

@SteveBauthorFeb 17.2005 — #Hey Warren,

Just thought you might be interested to know, I've gone some tweaking of your code and achieved the same thing without the iframes... Infact it's a fair bit simpler. It may or may not be of use to you, but anyway, here it is...

Thanks again for the help.

S.

[b]dir structure:[/b] folder "1" (containing pics and 1.htm), within main folder containing index.htm, index pics (numbered 1,2,3 etc) and the images folder for the buttons

[b]index.htm:[/b]

<HTML>

<head>

<script Language=JavaScript>

// album file names are consecutive numbers, e.g. 1.htm, 2.htm, 3.htm

var nAlbs = 3; // number of albums

var curr = 1;

function redirect(URLStr)

{

location = curr+"/"+curr+".htm";

}

function turnPage(direction)

{

if (direction == 'back'){if (curr > 1){curr--} else{curr = nAlbs}}

if (direction == 'forward'){if (curr < nAlbs){curr++} else{curr = 1}}

document.getElementById('slideAlb').src = curr+".jpg";

}

</script>

</head>

<body>

<table border="1" cellpadding="0" align='center'>

<tr>

<td><img src='1.jpg' id='slideAlb'></td>

</tr>

<tr>

<td>

<table border="1" cellpadding="0" align='center'>

<tr>

<td align='center'><img src="images/back.gif" onclick="turnPage('back')"></td>

<td align='center'><img src="images/home.gif" onclick="redirect('')"></td>

<td align='center'><img src="images/next.gif" onclick="turnPage('forward')"></td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

[b]1.htm[/b]

<HTML>

<head>

<script Language=JavaScript>

// image file names are consecutive numbers, e.g. 1.jpg, 2.jpg, 3.jpg

var nImgs = 3; // number of images

var curr = 1;

function redirect(URLStr)

{

location = URLStr;

}

function turnPage(direction)

{

if (direction == 'beginning'){curr = 1}

if (direction == 'back'){if (curr > 1){curr--} else{curr = 1}}

if (direction == 'forward'){if (curr < nImgs){curr++} else{curr = nImgs}}

if (direction == 'end'){curr = nImgs}

document.getElementById('slideImg').src = curr+".jpg";

}

</script>

</head>

<body>

<table border="1" cellpadding="0" align='center'>

<tr>

<td><img src='1.jpg' id='slideImg'></td>

</tr>

<tr>

<td>

<table border="1" cellpadding="0" align='center'>

<tr>

<td align='center'><img src="images/back-all.gif" onclick="turnPage('beginning')"></td>

<td align='center'><img src="images/back.gif" onclick="turnPage('back')"></td>

<td align='center'><img src="images/home.gif" onclick="redirect('../index.htm')"></td>

<td align='center'><img src="images/next.gif" onclick="turnPage('forward')"></td>

<td align='center'><img src="images/front-all.gif" onclick="turnPage('end')"></td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

Also in #JavaScript _↴

get()API INTEGRATION Updating textbox in childwindow through a select- and checkbox in parent

Success!

Help @SteveB spread the word by sharing this article on Twitter...

Tweet This

select one thing – load another?

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

select one thing – load another?

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴