Something like a slideshow...

[Joao]

Hey guys I have another little problem, I´m creating a page that is supposed to work like a slideshow, like this one; http://javascript.internet.com/miscellaneous/image-slideshow.html


The difference is that on my,I´m not using a <form>, I´m using links for the buttons, and these "buttons" show the images on a <iframe>. I have the page all set up, and I have little images that when you click them a bigger image shows on the <iframe>, that is fine. My problem is, I have a "previews" and "next" links under the bigger images that are on the <iframe> that are supposed to show the images back and forth. I was wondering if there is any javascript that will do it. Thanks again

[Vincent Puglia]

Hi,

A link to your page and/or the relevant code might be helpful. :)

Vinny

[Willy Duitt]

<a href="javascript:next()"
onmouseover="status='Click for next image';return true"
onmouseout="status='';return true">Next</a>

[Joao]

The page is not posted, so here is the code I´m trying to use that it´s not working, I´m not too familiar with javascript syntax, so this code is kind of a shot in the dark:

<script language="JavaScript">
<!--
var i = 1;
function swap(){
if(next)
document.write("<img src='arquivos/main[i++].jpg'>");
else
if(i==6)
document.write("<img src='arquivos/main6.jpg'>");
if(previews)
document.write("<img src='arquivos/main[i--].jpg'>");
else
if(i==1)
document.write("<img src='arquivos/main1.jpg'>");
}
//-->
</script>

And these are the links I have in the body;

<a href='onClick="swap(previews)"' target="iframe">&lt;&lt;</a>

<a href='onClick="swap(next)"' target="iframe">&gt;&gt;</a>

[agent002]

Hi Joao,
try this code:
<script type="text/javascript">
var currentImage = 1;
var totalImages = 6;

function previousImage(){
if(currentImage-- == 0) currentImage = totalImages;
document.images['imageShow'].src = 'arquivos/main'+currentImage+'.jpg';
}

function nextImage(){
if(currentImage++ > totalImages) currentImage = 1;
document.images['imageShow'].src = 'arquivos/main'+currentImage+'.jpg';
}
</script>
<img src="arquivos/main1.jpg" alt="" name="imageShow">

<a href="#" onclick="previousImage(); return false;">&lt;&lt; Previous</a>
<a href="#" onclick="nextImage(); return false;">Next &gt;&gt;</a>

[Joao]

Thanks for the help agent002, your code worked fine. I believe it is the one I need. The only problem is that the images are supposed to show inside a <iframe> tag, and that is causing some problems.

These two tags;
<a href="#" onclick="previousImage(); return false;">&lt;&lt; Previous</a>
<a href="#" onclick="nextImage(); return false;">Next &gt;&gt;</a>

are supposed to show the images inside this tag:

<iframe src="arquivos/main1.jpg" scrolling="no" noresize name="imageShow" hspace="0" marginheight="0" marginwidth="0" height="200" width="270"></iframe>

I tested te code without the <iframe> and it works just fine, but since I really need to use iframe on this case, it is not working. Do you have any idea on how to go around that?

[agent002]

er... why do you want to use an iframe? That really just be a waste of resources I think. The result would still be exactly the same if you used an iframe, wouldn't it?

Anyway, here you go:
<script type="text/javascript">
var currentImage = 1;
var totalImages = 6;

function previousImage(){
if(currentImage-- == 0) currentImage = totalImages;
window.frames['imageShow'].location.href = 'arquivos/main'+currentImage+'.jpg';
}

function nextImage(){
if(currentImage++ > totalImages) currentImage = 1;
window.frames['imageShow'].location.href = 'arquivos/main'+currentImage+'.jpg';
}
</script>

[Joao]

Thanks a lot, now it worked fine.

The reason I wanted to use iframe it’s because besides the next and previews buttons, I have little images that also make reference to the iframe, so whenever you click the smaller images they show on the iframe as well. When I first started thinking about how to do this page that is how I figured It would work, I really didn’t think of any other possible way.