Simple JavaScript help please - image embedding

Jason · 06-16-2009, 11:50 AM

Hi all, I hope this finds you all well!

I have a website that will need to handle about 20+ images per page, but for the sake of a clean layout I want them arranged so the user scrolls through a couple of tiny galleries instead of being presented with a long stream and having work their way through.

Code:

<script>
function changeImage(filename)
{
document.mainimage.src = filename;
}
      </script>
      <p align="center"> <img name="mainimage"
 src="DSCF2715.JPG"></p>
      <p align="center">Images: <a
 href="javascript:changeImage('DSCF2715.JPG')">1</a>
      <a href="javascript:changeImage('DSCF0605.JPG')">2</a>
      <a href="javascript:changeImage('image3.jpg')">3</a>
      <a href="javascript:changeImage('image4.jpg')">4</a>
      <a href="javascript:changeImage('image5.jpg')">5</a></p>

That said, I've found an image click-through gallery script here... but it only seems to work once per page; any more times and those below the top click-through fail to work. How can this be manipulated in a way to be used several times loading different, pre-defined images?

ONLINE DEMONSTRATION: http://i-code.co.uk/javascript/imageviewer.php

Your help on this matter will be greatly appreciated!

Take care,

Jason

Costin Trifan · 06-16-2009, 12:52 PM

you need to change the target, so your function would become:

Code:

function changeImage(filename, target)
{
document.target.src = filename;
}

and in your file:

Code:

      <p align="center"> <img name="mainimage"
 src="DSCF2715.JPG"></p>
      <p align="center">Images: <a
 href="javascript:changeImage('DSCF2715.JPG', 'mainimage')">1</a>
      <a href="javascript:changeImage('DSCF0605.JPG', 'mainimage')">2</a>
      <a href="javascript:changeImage('image3.jpg', 'mainimage')">3</a>
      <a href="javascript:changeImage('image4.jpg', 'mainimage')">4</a>
      <a href="javascript:changeImage('image5.jpg', 'mainimage')">5</a></p>



      <p align="center"> <img name="mainimage2"
 src="DSCF2715.JPG"></p>
      <p align="center">Images: <a
 href="javascript:changeImage('DSCF2715.JPG', 'mainimage2')">1</a>
      <a href="javascript:changeImage('DSCF0605.JPG', 'mainimage2')">2</a>
      <a href="javascript:changeImage('image3.jpg', 'mainimage2')">3</a>
      <a href="javascript:changeImage('image4.jpg', 'mainimage2')">4</a>
      <a href="javascript:changeImage('image5.jpg', 'mainimage2')">5</a></p>

I think this should do it

Jason · 06-16-2009, 01:20 PM

Hi Costin,

Thanks for your help.

I've just re-tried, but it won't load any images. I'm confident it will work, it just needs someone like yourself who has more knowledge of coding! Yes, I'm sure the Target thing is the problem.

The whole page now looks like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <script></script>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>hh</title>
</head>
<body>
<script>
function changeImage(filename, target)
{
document.target.src = filename;
}
</script><br>
-
<p align="center"> <img name="mainimage"
 src="Beetle6.JPG"></p>
<p align="center">Images: <a
 href="javascript:changeImage('Beetle6.JPG', 'mainimage')">1</a>
<a href="javascript:changeImage('Cardinal.jpg', 'mainimage')">2</a>
<a href="javascript:changeImage('image3.jpg', 'mainimage')">3</a>
<a href="javascript:changeImage('image4.jpg', 'mainimage')">4</a>
<a href="javascript:changeImage('image5.jpg', 'mainimage')">5</a></p>
<p align="center"> <img name="mainimage2"
 src="16-sp.jpg"></p>
<p align="center">Images: <a
 href="javascript:changeImage('24-sp.jpg', 'mainimage2')">1</a>
<a href="javascript:changeImage('16-sp.jpg', 'mainimage2')">2</a>
<a href="javascript:changeImage('image3.jpg', 'mainimage2')">3</a>
<a href="javascript:changeImage('image4.jpg', 'mainimage2')">4</a>
<a href="javascript:changeImage('image5.jpg', 'mainimage2')">5</a></p>
</body>
</html>

Thanks for helping!

Jason · 06-16-2009, 02:47 PM

Hi,

Since reading your helpful post about targets, etc., I found another script that does the same thing. It too failed when used twice on the same page, so as you said I re-numbered the target - and SUCCEEDED!!!!!

I'm greatful for your assistance - please either post or PM me your website address you'd like used alongside a name-check so I can credit you when the site goes live.

Thanks.

EDIT: We cross-posted! I posted my alternative before I saw your assistance. The offer of credit, naturallly, still stands.

Costin Trifan · 06-16-2009, 02:44 PM

The document.target.src throws an error. I didn't test it, I've just updated the code here, but now that I've tested on my machine, it works; so here's what you need to change in your code:

#1: give an ID to each image placeholder. you can use the name for the ID too ( so it will look like this: <img name="mainimage" id="mainimage" src="1.gif">)

#2 change the function to this:

Code:

<script type="text/javascript">
function changeImage(filename, target)
{
	//document.target.src = filename;
	document.getElementById(target).src = filename;
}
</script>

Costin Trifan · 06-16-2009, 02:55 PM

it was my pleasure, no need for any credits at all

but thank your for the offer