simple gallery code - next previous onclick gallery

i have a simple code that works great
but instead of the onclick links being numbered, 1,2,3

i need it to be just, next and previous to show the next or previous image

if there is any html5 or something that is simpler [ less code ]
i am open to that.

any help is appreciated. thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>

<script>function changeImage(thisDiv){document.getElementById('my_image').src = thisDiv.id+".jpeg"}
</script>

</head>

<body>

<img id="my_image" class="icon" src="gallery/test1.jpeg" alt="gallery/test1.jpeg" border="0"; width="300px" />
<a onclick="changeImage(this)" href="#" id="gallery/test1">1</a>
<a onclick="changeImage(this)" href="#" id="gallery/test2">2</a>
<a onclick="changeImage(this)" href="#" id="gallery/test3">3</a>

</body>

</html>

Open in new window

webdottAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

aboo_sCommented:
<script>
 
function changeImage_next(thisDiv){

var next_index=document.getElementById('my_image').src.substring(4,4)+1; //extract the number only from filename.

document.getElementById('my_image').src = "test"+next_index+".jpeg"

}

function changeImage_prev(thisDiv){

var prev_index=document.getElementById('my_image').src.substring(4,4)-1; //extract the number only from filename.

document.getElementById('my_image').src = "test"+prev_index+".jpeg"

}
// this is the main idea and ofcourse it can be improved!
</script>
0
webdottAuthor Commented:
not getting it to work,
her is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>

<script>
 
function changeImage_next(thisDiv){

var next_index=document.getElementById('my_image').src.substring(4,4)+1; //extract the number only from filename.

document.getElementById('my_image').src = "gallery/test"+next_index+".jpeg"

}

function changeImage_prev(thisDiv){

var prev_index=document.getElementById('my_image').src.substring(4,4)-1; //extract the number only from filename.

document.getElementById('my_image').src = "gallery/test"+prev_index+".jpeg"

}
// this is the main idea and ofcourse it can be improved!
</script>

<style>
.imgborder			{border: 5px solid #fff;}
.imgborder:hover 	{border: 5px solid #ddd;}
</style>
</head>

<body>

<p>
<a onclick="changeImage_prev(this)" href="#" id="gallery/test1">prev</a>
<a onclick="changeImage_next(this)" href="#" id="gallery/test2">next</a>
</p>
<img id="my_image" class="imgborder" src="gallery/test1.jpeg" border="0"; width="300px" />

</body>

</html>

Open in new window

0
aboo_sCommented:
Ok, I will have another look at it when I get back home from work!
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

webdottAuthor Commented:
thanks
0
aboo_sCommented:
Alright I found out why it is not working.
It's because the browser is getting the full path to the file as a source rather than just the name "test1.jpg" so I will alter the functions accordingly!
0
aboo_sCommented:
Ok, so I altered the functions accordingly:
Note that max_index contains the number of photos you have in your gallery.
You need to update in the two functions!
I have replaced .jpeg to  .jpg , you can change it back if you like! Good Luck:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>

<script>
 
function changeImage_next(thisDiv){
var max_index=3;
var pos1=document.getElementById('my_image').src.indexOf("test"); //extract the number only from filename.
pos1 += 4 ;
var pos2=document.getElementById('my_image').src.indexOf(".jp");
var sliced = document.getElementById('my_image').src.slice(pos1,pos2);
var cur_index = sliced;
if(cur_index < max_index) {cur_index++;} else {cur_index=1;}
document.getElementById('my_image').src=document.getElementById('my_image').src.replace(sliced,cur_index);


}

function changeImage_prev(thisDiv){
var max_index=3;
var pos1=document.getElementById('my_image').src.indexOf("test");
pos1 += 4 ;
var pos2=document.getElementById('my_image').src.indexOf(".jp");
var sliced = document.getElementById('my_image').src.slice(pos1,pos2);
var cur_index = sliced;
if(cur_index > 1) {cur_index--;} else {cur_index=max_index;}
document.getElementById('my_image').src=document.getElementById('my_image').src.replace(sliced,cur_index);

}
// this is the main idea and ofcourse it can be improved!
</script>

<style>
.imgborder                  {border: 5px solid #fff;}
.imgborder:hover       {border: 5px solid #ddd;}
</style>
</head>

<body>

<p>
<a onclick="changeImage_prev(this)" href="#" id="gallery/test1">prev</a>
<a onclick="changeImage_next(this)" href="#" id="gallery/test1">next</a>
</p>
<img id="my_image" class="imgborder" src="gallery/test1.jpg" border="0"; width="300px" />

</body>

</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
webdottAuthor Commented:
i like this, but this is what happens.

when i hit the next button - gallery/test2.jpeg shows

when i hit the prev or next button again - nothing shows up
i tried to see what it is trying to pull, but it is blank

i have 10 images in it.  

i tried changing the numbers you had in the script, same thing happens.

- i really like this - it seems nice like it does not have to have every image loaded in it by script, that it pulls the next number from the gallery folder.
0
aboo_sCommented:
you photos should have the names: test1.jpg test2.jpg test3.jpg and so on ..

check for the extensio .jpg not jpeg
see that all the images are in one folder: gallery
and that this folder is in the same place with your html file!
0
aboo_sCommented:
also make sure that your path to the files doesn't have 'test' mentioned in it!

example:

c:\work\gallery\test1.jpg     will work, but not:
c:\test\gallery\test1.jpg
0
webdottAuthor Commented:
Thanks for helping on this.

I still have not been able to get it to work.

I am going to put it on a live website, instead of the C:\ drive
this weekend to see if it will work.

Thanks
0
webdottAuthor Commented:
thanks -that worked
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.