Solved

simple gallery code - next previous onclick gallery

Posted on 2012-03-10
11
521 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
[X]
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
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

724 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