Solved

simple gallery code - next previous onclick gallery

Posted on 2012-03-10
11
513 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

863 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now