Adding hyperlink to images in slideshow

[Imagine]

Dear people,

I have this basic slideshow script on my website:

head:

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
adimgs = new Array
("DIENfieldthumb.jpg","battle-at-digital-worldthumb.jpg","birdthumb.jpg",
"totorothumb.jpg","airwinthumb.jpg","censorthumb.jpg")

adv = 0
advct = adimgs.length - 1
function previt() {
if (document.images && adv > 0) {
adv--
document.cycleit.src= adimgs[adv]
} }
function nextit() {
if (document.images && adv < advct) {
adv++
document.cycleit.src= adimgs[adv]
} }

</SCRIPT> 

body:

<IMG SRC='DIENfieldthumb.jpg' WIDTH=350 HEIGHT=200
BORDER=0 NAME="cycleit"><P>
<A HREF="javascript:previt()">&lt; PREV</A>
&nbsp; <A HREF="javascript:nextit()">NEXT ></A>

I would really like to add the possibility that each of the images have a hyperlink to a page where the image is viewable in full size. Can someone please tell me what I should add in the code for this to work?

Thanks in advance

[MichaelBluejay]

Hello, Imagine, and welcome to WebmasterWorld!

It looks like you got your JavaScript lessons from a very old source. Some things are changed for modern usage. For example, , the language="JavaScript" attribute is obsolete. You don't need it. It doesn't hurt to leave it in, but it doesn't do anything either.

Also, you can define arrays easier now, e.g., adimgs = ["DIENfieldthub.jpg","birdthumb.jpg","totorothumb.jpg"]

Here's how I'd solve your problem:

<div id=imageSwap></div> 
 
<a href=# onclick="change(-1); return false">Previous</a>  
<a href=# onclick="change(1); return false">Next</a>  
 
<SCRIPT TYPE="TEXT/JAVASCRIPT">  
adImages = ["image0.jpg","image1.jpg","image2.jpg","image3.jpg","image4.jpg"]; 
  
position=0; 
  
function change(direction) { 
   position += direction; 
   if (position <0) position=0; 
   else if (position == adImages.length) position=adImages.length-1; 
   document.getElementById('imageSwap').innerHTML = "<a href='" +adImages[position]+ "'><img src='" +adImages[position]+ "'></a>"; 
} 
</SCRIPT>

[Imagine]

that's awesome! thanks... I don't know much about javascript so that may very well be.

Thank you for your help, it works. If i may ask one more question: the images do link now, however, they link themselves, and they shouldn't.

For example: DIENfieldthumb.jpg needs to link to the DIENfield.jpg (the bigger version on my server) How to edit that in your solution?

[MichaelBluejay]

Yes, I was wondering about that. Anyway, just replace the "document.getElement..." line with these two new lines. The first line extracts the string "thumb" out of the filename for the link.

link = adImages[position].replace('thumb',""); 
document.getElementById('imageSwap').innerHTML = "<a href='" +link+ "'><img src='" +adImages[position]+ "'></a>";}

[Imagine]

thank you very much for helping out!

[Imagine]

I really hate to bother again but I have a small adjustment I'd like to make. I've screened the entire web but I just can't find the thing I should add in the code for this.

Thing is, that the "slideshow" doesn't appear when the page loads. You'll only see the "previous and next" and nothing else. I'd like to see the first image directly when the page "persoonlijk.php" has loaded... otherwise people'll say "your slideshow is not showing"...

[MichaelBluejay]

Okay, I really want you to try to figure this out for yourself, because if all you're doing is copying & pasting code you get here, you'll never learn anything, and you'll always just come back to this board for a copy & paste solution.

The answer isn't available from "screening the entire web", the answer is within your code. Take a look at all your code, and look for the <img> which should be the initial image. Is it there? If not, why would you expect something that's not there to show up?