Javascript: Image Swapping Help!

[bri3047]

This is probably a really easy question, but any help would be greatly appreciated.

So I have a script that changes an image from a thumbnail to the full size as follows:

<script>
function swap(it) {
tmp1 = it.src.split("_thumb.jpg");
tmp2 = it.src.split(".jpg");
if (it.src.indexOf("_thumb") > -1)
{it.src = tmp1[0] + ".jpg" + tmp1[1];} // make it big
else
{it.src = tmp2[0] + "_thumb.jpg" + tmp2[1];} // make it small
}
</script>

<img src="pic_thumb.jpg" onclick="swap(this)"/>

Works great.

Now what I'm trying to do is go from the thumbnail to image # 1 on the first click, image # 2 on the second click, and back to the thumbnail on the third click. Can this be executed?

Thanks again for any help you guys have to offer.
-Brian

[PeejAvery]

Well, I would use a much simpler approach with your first example. Then, it can easily be adapted into this...

<script type="text/javascript">
function swap(img) {
if (img.src.search(/_thumb.jpg/) > -1) {img.src = img.src.replace('_thumb.jpg', '.jpg');}
else {img.src = img.src.replace('.jpg', '_thumb.jpg');}
}
</script>

[bri3047]

Well, I would use a much simpler approach with your first example. Then, it can easily be adapted into this...

<script type="text/javascript">
function swap(img) {
if (img.src.search(/_thumb.jpg/) > -1) {img.src = img.src.replace('_thumb.jpg', '.jpg');}
else {img.src = img.src.replace('.jpg', '_thumb.jpg');}
}
</script>

Ok so I think I understand what you're proposing...I'm just not quite skilled enough to know specifically how to adapt to adding the second image. Would it be something like this?

<script type="text/javascript">
function swap(img) {
if (img.src.search(/_thumb.jpg/) > -1) {img.src = img.src.replace('_thumb.jpg', '.jpg');}
if (img.src.search(/_thumb.jpg/) > 1) {img.src = img.src.replace('.jpg', '2.jpg');}
else {img.src = img.src.replace('.jpg', '_thumb.jpg');}

I feel dumb.
-Brian

[PeejAvery]

Very close! :thumb: I believe the following should work for you!

<script type="text/javascript">
function swap(img) {
if (img.src.search(/_thumb.jpg/) > -1) {img.src = img.src.replace('_thumb.jpg', '2.jpg');}
else if (img.src.search(/2.jpg/) > -1) {img.src = img.src.replace('2.jpg', '.jpg');}
else {img.src = img.src.replace('.jpg', '_thumb.jpg');}
}
</script>

[bri3047]

It didn't appear to work. I checked to make sure I have all my images straight, but it's only going from the thumb to the first image and back to the thumb. Here's the site if it's any help.

http://soxmetsyanks.blogspot.com/

Upper right, the bio (I only applied the code to the top image, hadn't tried the other two yet...figured I'd just do it all once I figured out how to work it).

Any ideas what I might not be doing properly?

Thanks again for all your help :)

-Brian

[PeejAvery]

It is working properly...you have a JavaScript function named swap() in your code three times. You can only have one function name...anything else is invalid JavaScript. Delete the other two so that it looks like this.

<script type="text/javascript">
function swap(img) {
if (img.src.search(/_thumb.jpg/) > -1) {img.src = img.src.replace('_thumb.jpg', '2.jpg');}
else if (img.src.search(/2.jpg/) > -1) {img.src = img.src.replace('2.jpg', '.jpg');}
else {img.src = img.src.replace('.jpg', '_thumb.jpg');}
}
</script>

<img src="http://bri3047.ehost-services104.com/BLOG/bkmets_thumb.jpg" onclick="swap(this)"/>
<img src="http://bri3047.ehost-services104.com/BLOG/clsox_thumb.jpg" onclick="swap(this)"/>
<img src="http://bri3047.ehost-services104.com/BLOG/ebyanks_thumb.jpg" onclick="swap(this)"/>

[bri3047]

Ohhhhhhhhhh. SWEET. You sir, are a gentleman and a scholar...and you kick ***. Thanks again for all your help, *much* appreciated!!
-Brian