Solved

simple gallery code - next previous onclick gallery

Posted on 2012-03-10
11
515 Views
Last Modified: 2012-03-25
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

0
Comment
Question by:webdott
  • 6
  • 5
11 Comments
 
LVL 10

Expert Comment

by:aboo_s
ID: 37706226
<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
 

Author Comment

by:webdott
ID: 37706237
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
 
LVL 10

Expert Comment

by:aboo_s
ID: 37708501
Ok, I will have another look at it when I get back home from work!
0
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 

Author Comment

by:webdott
ID: 37714873
thanks
0
 
LVL 10

Expert Comment

by:aboo_s
ID: 37718359
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
 
LVL 10

Accepted Solution

by:
aboo_s earned 500 total points
ID: 37718407
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
 

Author Comment

by:webdott
ID: 37720257
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
 
LVL 10

Expert Comment

by:aboo_s
ID: 37727933
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
 
LVL 10

Expert Comment

by:aboo_s
ID: 37727940
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
 

Author Comment

by:webdott
ID: 37761177
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
 

Author Closing Comment

by:webdott
ID: 37763185
thanks -that worked
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to dynamically set the form action using jQuery.

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question