Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

simple gallery code - next previous onclick gallery

Posted on 2012-03-10
11
516 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

839 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