PDA

View Full Version : Change image using previous/next buttons



GordonBennett
08-12-2008, 06:30 PM
Hello all.

I'm making a painting portfolio for my friend and have constructed the gallery side so far but am slightly stuck with a prev/next button that scrolls through the paintings.

Here is the gallery so far - http://carrionwebdesign.com/forums/arrow_next/gallery1.html -

There is attached js and css that enables thumbnail rollovers to replace a full size image. I've also managed to include a getElementById to include a little bit of info about the paintings.

Is it possible to attach some scripting to the previous and next arrows that will scroll through the images and also include the relevant info?

Much obliged of any assistance, please let me know if you need any more info.

Kind regards

Gordon

Nile
08-12-2008, 08:17 PM
Your gonna have to make the whole script over again. You need to use arrays. So you can skip through. I'm gonna remake this script for you.

jscheuer1
08-13-2008, 05:36 AM
This is an odd sort of thing, but on your test page you have:


<link href="test.js" type="text/javascript" />

That's not a valid external script tag. But when I fixed it:


<script src="test.js" type="text/javascript"></script>

I found that it led to a copy of one of my scripts without the credit! If you are going to use this script, it is illegal to do so without the credit:


/* Cross Browser Fader 2008 John Davenport Scheuer
This comment must remain for Legal Use */

So, you really shouldn't have a copy of it lying around on your server without the credit. Preferably, if using it as an external script, the credit should also appear in the source code of the page:


<script src="test.js" type="text/javascript">

/* Cross Browser Fader 2008 John Davenport Scheuer
This comment must remain for Legal Use */

</script>

GordonBennett
08-14-2008, 10:26 AM
Your gonna have to make the whole script over again. You need to use arrays. So you can skip through. I'm gonna remake this script for you.

Thanks Nile.

I had a bad feeling i was going to have to change the script entirely.

Thanks again for your help.

Gordon





I found that it led to a copy of one of my scripts without the credit! If you are going to use this script, it is illegal to do so without the credit:

So, you really shouldn't have a copy of it lying around on your server without the credit. Preferably, if using it as an external script, the credit should also appear in the source code of the page:


/* Cross Browser Fader 2008 John Davenport Scheuer
This comment must remain for Legal Use */


Thanks for pointing that out jscheuer1.

I'm really sorry. I can only blame my ignorance and inexperience as a coder for the mistake. I thought by linking the js and css it would make things clearer for me and had no intention in not crediting you. Be sure that i've updated the pages straight away on both my server and computer.

Please accept my apologies.

Gordon.

Nile
08-14-2008, 02:05 PM
So, should I make a new one for you? Or are you good?

GordonBennett
08-14-2008, 02:16 PM
If you could do a re-write that would be fantastic, thanks so much.

Let me know if you need any more info.

Gordon

jscheuer1
08-14-2008, 02:39 PM
Give this a shot:


<!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>your title here</title>

<link href="test.css" rel="stylesheet" type="text/css">
<style type="text/css">
.nextprev img {
cursor: pointer;
}
</style>
</head>

<body>
<div id="main">
<div id="top">
Test <span class="orange">Page</span> </div>
<div id="year"></div>
<div id="gallery">
<div id="contentRight">
<div id="largeImage">
<div align="left"><span class="imgholder"><img src="image/gallery1/g1_large_01.jpg" alt="" name="mypicture" id="mypicture" /></span></div>
</div>
<div id="imageText">This part is changed by getElementById on thumbnail rollover - can this be changed too by clicking the next/previous buttons?</div>
</div>
<table width="150" border="0" cellpadding="0" cellspacing="3" id="thumbs">
<tr>
<td width="75" height="75"><a href="#" class="activator" onmouseover="nextPrev.count=0;mypicture.src='image/gallery1/g1_large_01.jpg'; document.getElementById('imageText').innerHTML ='Image 1 title here. This should be updatable'" onmouseout="mypicture.src='image/gallery1/g1_large_01.jpg'"><img src="image/gallery1/thumbs/g1_thumb_01.jpg" width="75" height="75" border="0" /></a></td>
<td width="75"><a href="#" class="activator" onmouseover="nextPrev.count=1;mypicture.src='image/gallery1/g1_large_02.jpg'; document.getElementById('imageText').innerHTML ='Image 2 title here. This should be updatable'" onmouseout="mypicture.src='image/gallery1/g1_large_02.jpg'"><img src="image/gallery1/thumbs/g1_thumb_02.jpg" width="75" height="75" border="0" /></a></td>
</tr>
<tr>
<td width="75" height="75"><a href="#" class="activator" onmouseover="nextPrev.count=2;mypicture.src='image/gallery1/g1_large_03.jpg'; document.getElementById('imageText').innerHTML ='Image 3 title here. This should be updatable'" onmouseout="mypicture.src='image/gallery1/g1_large_03.jpg'"><img src="image/gallery1/thumbs/g1_thumb_03.jpg" width="75" height="75" border="0" /></a></td>
<td width="75"><a href="#" class="activator" onmouseover="nextPrev.count=3;mypicture.src='image/gallery1/g1_large_04.jpg'; document.getElementById('imageText').innerHTML ='Image 4 title here. This should be updatable'" onmouseout="mypicture.src='image/gallery1/g1_large_04.jpg'"><img src="image/gallery1/thumbs/g1_thumb_04.jpg" width="75" height="75" border="0" /></a></td>
</tr>
<tr>
<td width="75" height="75" ><a href="#" class="activator" onmouseover="nextPrev.count=4;mypicture.src='image/gallery1/g1_large_05.jpg'; document.getElementById('imageText').innerHTML ='Image 5 title here. This should be updatable'" onmouseout="mypicture.src='image/gallery1/g1_large_05.jpg'"><img src="image/gallery1/thumbs/g1_thumb_05.jpg" width="75" height="75" border="0" /></a></td>
<td width="75"><a href="#" class="activator" onmouseover="nextPrev.count=5;mypicture.src='image/gallery1/g1_large_06.jpg'; document.getElementById('imageText').innerHTML ='Image 6 title here. This should be updatable'" onmouseout="mypicture.src='image/gallery1/g1_large_06.jpg'"><img src="image/gallery1/thumbs/g1_thumb_06.jpg" width="75" height="75" border="0" /></a></td>
</tr>
<tr>
<td width="75" height="75"><a href="#" class="activator" onmouseover="nextPrev.count=6;mypicture.src='image/gallery1/g1_large_07.jpg'; document.getElementById('imageText').innerHTML ='Image 7 title here. This should be updatable'" onmouseout="mypicture.src='image/gallery1/g1_large_07.jpg'"><img src="image/gallery1/thumbs/g1_thumb_07.jpg" width="75" height="75" border="0" /></a></td>
<td width="75"><a href="#" class="activator" onmouseover="nextPrev.count=7;mypicture.src='image/gallery1/g1_large_08.jpg'; document.getElementById('imageText').innerHTML ='Image 8 title here. This should be updatable'" onmouseout="mypicture.src='image/gallery1/g1_large_08.jpg'"><img src="image/gallery1/thumbs/g1_thumb_08.jpg" width="75" height="75" border="0" /></a></td>
</tr>
<tr>
<td width="75" height="75"><a href="#" class="activator" onmouseover="nextPrev.count=8;mypicture.src='image/gallery1/g1_large_09.jpg'; document.getElementById('imageText').innerHTML ='Image 9 title here. This should be updatable'" onmouseout="mypicture.src='image/gallery1/g1_large_09.jpg'"><img src="image/gallery1/thumbs/g1_thumb_09.jpg" width="75" height="75" border="0" /></a></td>
<td width="75"><a href="#" class="activator" onmouseover="nextPrev.count=9;mypicture.src='image/gallery1/g1_large_10.jpg'; document.getElementById('imageText').innerHTML ='Image 10 title here. This should be updatable'" onmouseout="mypicture.src='image/gallery1/g1_large_10.jpg'"><img src="image/gallery1/thumbs/g1_thumb_10.jpg" width="75" height="75" border="0" /></a></td>
</tr>
<tr>
<td height="75"><a href="#" class="activator" onmouseover="nextPrev.count=10;mypicture.src='image/gallery1/g1_large_11.jpg'; document.getElementById('imageText').innerHTML ='Image 11 title here. This should be updatable'" onmouseout="mypicture.src='image/gallery1/g1_large_11.jpg'"><img src="image/gallery1/thumbs/g1_thumb_11.jpg" width="75" height="75" border="0" /></a></td>
<td><a href="#" class="activator" onmouseover="nextPrev.count=11;mypicture.src='image/gallery1/g1_large_12.jpg'; document.getElementById('imageText').innerHTML ='Image 12 title here. This should be updatable'" onmouseout="mypicture.src='image/gallery1/g1_large_12.jpg'"><img src="image/gallery1/thumbs/g1_thumb_12.jpg" width="75" height="75" border="0" /></a></td>
</tr>
<tr class="nextprev">
<td height="21"><img onclick="nextPrev(-1);" src="prev.gif" title="Previous" alt="Previous Image" width="75" height="25" border="0" /></td>
<td><span class="imgholder"><img onclick="nextPrev(1);" src="next.gif" title="Next" alt="Next Image" width="75" height="25" border="0" /></span></td>
</tr>
</table>
<p>&nbsp;</p>
</div>
</div>
<script type="text/javascript" defer>

/* Next/Previous by Classed Elements script
2008 John Davenport Scheuer - as first
seen in: http://www.dynamicdrive.com/forums/
username: jscheuer1
This notice must remain for legal use
*/

function nextPrev(way){
if(!nextPrev.ready) return;
nextPrev.count = nextPrev.count + way;
nextPrev.count = nextPrev.count >= nextPrev.ar.length? 0 : nextPrev.count < 0? nextPrev.ar.length - 1 : nextPrev.count;
nextPrev.ar[nextPrev.count].onmouseover();
}
nextPrev.count = 0;
;(function(){
if(!document.getElementById) return;
if (!document.getElementsByClassName){
document.getElementsByClassName = function(cn){
cn = cn.replace(/ +/g, ' ').split(' ');
var ar = [], testname = function(n){
for (var re, i = cn.length - 1; i > -1; --i){
re = new RegExp('(^|\W)' + cn[i] + '(\W|$)');
if(!re.test(n)) return false;
}
return true;
}
for(var d = document.all || document.getElementsByTagName('*'), i = 0; i < d.length; ++i)
if(testname(d[i].className))
ar[ar.length] = d[i];
return ar;
};
document.getElementsByClassName.spoof = true;
}
nextPrev.ar = document.getElementsByClassName('activator');
if (document.getElementsByClassName.spoof)
document.getElementsByClassName.spoof = document.getElementsByClassName = null;
nextPrev.ready = true;
})();
</script>
</body>
</html>

You might want to preload, and certainly optimize the larger images.

jscheuer1
08-14-2008, 03:39 PM
You may like this even better:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>your title here</title>

<link href="test.css" rel="stylesheet" type="text/css">
<style type="text/css">
.nextprev img {
cursor: pointer;
}

/* Style for Fader script */
#fadeDivCover {
position:absolute;
z-index:10000;
top:0;
left:0;
display:none;
width:100%; /* Set to width of container */
height:100%; /* Leave as 100% for full coverage */
background-color:#666; /* Set to covered element's background, may use full background styles including image */
}
/* End Style for Fader script */
</style>

<script src="test.js" type="text/javascript">

/* Cross Browser Fader 2008 John Davenport Scheuer
This comment must remain for Legal Use */

</script>
</head>

<body>
<div id="main">
<div id="top">
Test <span class="orange">Page</span> </div>
<div id="year"></div>
<div id="gallery">
<div id="contentRight" style="position:relative;">
<div id="largeImage">
<div align="left"><span class="imgholder"><script type="text/javascript">
document.write('<img onload="fade(\'fadeDivCover\', \'out\', \'\', 2, 40, true);" src="image/gallery1/g1_large_01.jpg" alt="" name="mypicture" id="mypicture">');
</script></span></div>
</div>
<div id="imageText"><script type="text/javascript">
document.write('Image 1 title here. This should be updatable');
</script><noscript>
This Page is best viewed with javascript enabled. Without it you may still click on the images to see larger versions
</noscript></div>
<div id="fadeDivCover">
<div style="position:relative;top:49%;left:3%;">
Loading . . .
</div>
</div> </div>
<table width="150" border="0" cellpadding="0" cellspacing="3" id="thumbs">
<tr>
<td width="75" height="75"><a href="image/gallery1/g1_large_01.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=0;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 1 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_01.jpg" width="75" height="75" border="0" alt=""></a></td>
<td width="75"><a href="image/gallery1/g1_large_02.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=1;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 2 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_02.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr>
<td width="75" height="75"><a href="image/gallery1/g1_large_03.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=2;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 3 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_03.jpg" width="75" height="75" border="0" alt=""></a></td>
<td width="75"><a href="image/gallery1/g1_large_04.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=3;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 4 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_04.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr>
<td width="75" height="75" ><a href="image/gallery1/g1_large_05.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=4;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 5 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_05.jpg" width="75" height="75" border="0" alt=""></a></td>
<td width="75"><a href="image/gallery1/g1_large_06.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=5;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 6 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_06.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr>
<td width="75" height="75"><a href="image/gallery1/g1_large_07.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=6;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 7 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_07.jpg" width="75" height="75" border="0" alt=""></a></td>
<td width="75"><a href="image/gallery1/g1_large_08.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=7;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 8 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_08.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr>
<td width="75" height="75"><a href="image/gallery1/g1_large_09.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=8;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 9 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_09.jpg" width="75" height="75" border="0" alt=""></a></td>
<td width="75"><a href="image/gallery1/g1_large_10.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=9;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 10 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_10.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr>
<td height="75"><a href="image/gallery1/g1_large_11.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=10;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 11 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_11.jpg" width="75" height="75" border="0" alt=""></a></td>
<td><a href="image/gallery1/g1_large_12.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=11;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 12 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_12.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr class="nextprev">
<td height="21"><img onclick="nextPrev(-1);" src="prev.gif" title="Previous" alt="Previous Image" width="75" height="25" border="0"></td>
<td><span class="imgholder"><img onclick="nextPrev(1);" src="next.gif" title="Next" alt="Next Image" width="75" height="25" border="0"></span></td>
</tr>
</table>
<p>&nbsp;</p>
</div>
</div>
<script type="text/javascript" defer>

/* Next/Previous by Classed Elements script
2008 John Davenport Scheuer - as first
seen in: http://www.dynamicdrive.com/forums/
username: jscheuer1
This notice must remain for legal use
*/

function nextPrev(way){
if(!nextPrev.ready) return;
nextPrev.count = nextPrev.count + way;
nextPrev.count = nextPrev.count >= nextPrev.ar.length? 0 : nextPrev.count < 0? nextPrev.ar.length - 1 : nextPrev.count;
nextPrev.ar[nextPrev.count].onmouseover();
}
nextPrev.count = 0;
;(function(){
if(!document.getElementById) return;
if (!document.getElementsByClassName){
document.getElementsByClassName = function(cn){
cn = cn.replace(/ +/g, ' ').split(' ');
var ar = [], testname = function(n){
for (var re, i = cn.length - 1; i > -1; --i){
re = new RegExp('(^|\W)' + cn[i] + '(\W|$)');
if(!re.test(n)) return false;
}
return true;
}
for(var d = document.all || document.getElementsByTagName('*'), i = 0; i < d.length; ++i)
if(testname(d[i].className))
ar[ar.length] = d[i];
return ar;
};
document.getElementsByClassName.spoof = true;
}
nextPrev.ar = document.getElementsByClassName('activator');
for (var i = nextPrev.ar.length - 1; i > -1; --i){
nextPrev.ar[i].onclick = function(){return false;};
nextPrev.ar[i].style.cursor = 'default';
}
if (document.getElementsByClassName.spoof)
document.getElementsByClassName.spoof = document.getElementsByClassName = null;
nextPrev.ready = true;
})();
</script>
</body>
</html>

GordonBennett
08-15-2008, 08:20 AM
Thanks a million John,

once again you've astounded me with you're knowledge and quick work. This time i'll be sure to credit you.

Thanks again

Gordon

jscheuer1
08-15-2008, 04:03 PM
I have yet another version of this that I think is even better - so good in fact that I will probably work it up into an object oriented, or at least multi-use version script in its own right. But for now, here is the bare bones of it for your layout:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>your title here</title>

<link href="test.css" rel="stylesheet" type="text/css">
<style type="text/css">
.nextprev img {
cursor: pointer;
}

/* Style for Fader script */
#fadeDivCover {
position:absolute;
z-index:10000;
top:0;
left:0;
display:none;
width:100%; /* Set to width of container */
height:100%; /* Leave as 100% for full coverage */
background-color:#666; /* Set to covered element's background, may use full background styles including image */
background-position: left 3px;
background-repeat: no-repeat;
color: white;
}
/* End Style for Fader script */
</style>

<script src="test.js" type="text/javascript">

/* Cross Browser Fader 2008 John Davenport Scheuer
This comment must remain for Legal Use */

</script>

</head>

<body>
<div id="main">
<div id="top">
Test <span class="orange">Page</span> </div>
<div id="year"></div>
<div id="gallery">
<div id="contentRight" style="position:relative;">
<div id="largeImage">
<div align="left"><span class="imgholder">
</span></div>
</div>
<div id="imageText"><noscript>
This Page is best viewed with javascript enabled. Without it you may still click on the images to see larger versions
</noscript></div>
<div id="fadeDivCover">
<div style="position:relative;top:49%;left:3%;">
Loading . . .
</div>
</div> </div>
<table width="150" border="0" cellpadding="0" cellspacing="3" id="thumbs">
<tr>
<td width="75" height="75"><a href="image/gallery1/g1_large_01.jpg" class="activator" rev="mouseover::Image 1 title here. This should be updatable"><img src="image/gallery1/thumbs/g1_thumb_01.jpg" width="75" height="75" border="0" alt=""></a></td>
<td width="75"><a href="image/gallery1/g1_large_02.jpg" class="activator" rev="mouseover::Image 2 title here. This should be updatable"><img src="image/gallery1/thumbs/g1_thumb_02.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr>
<td width="75" height="75"><a href="image/gallery1/g1_large_03.jpg" class="activator" rev="mouseover::Image 3 title here. This should be updatable"><img src="image/gallery1/thumbs/g1_thumb_03.jpg" width="75" height="75" border="0" alt=""></a></td>
<td width="75"><a href="image/gallery1/g1_large_04.jpg" class="activator" rev="mouseover::Image 4 title here. This should be updatable"><img src="image/gallery1/thumbs/g1_thumb_04.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr>
<td width="75" height="75" ><a href="image/gallery1/g1_large_05.jpg" class="activator" rev="mouseover::Image 5 title here. This should be updatable"><img src="image/gallery1/thumbs/g1_thumb_05.jpg" width="75" height="75" border="0" alt=""></a></td>
<td width="75"><a href="image/gallery1/g1_large_06.jpg" class="activator" rev="mouseover::Image 6 title here. This should be updatable"><img src="image/gallery1/thumbs/g1_thumb_06.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr>
<td width="75" height="75"><a href="image/gallery1/g1_large_07.jpg" class="activator" rev="mouseover::Image 7 title here. This should be updatable"><img src="image/gallery1/thumbs/g1_thumb_07.jpg" width="75" height="75" border="0" alt=""></a></td>
<td width="75"><a href="image/gallery1/g1_large_08.jpg" class="activator" rev="mouseover::Image 8 title here. This should be updatable"><img src="image/gallery1/thumbs/g1_thumb_08.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr>
<td width="75" height="75"><a href="image/gallery1/g1_large_09.jpg" class="activator" rev="mouseover::Image 9 title here. This should be updatable"><img src="image/gallery1/thumbs/g1_thumb_09.jpg" width="75" height="75" border="0" alt=""></a></td>
<td width="75"><a href="image/gallery1/g1_large_10.jpg" class="activator" rev="mouseover::Image 10 title here. This should be updatable"><img src="image/gallery1/thumbs/g1_thumb_10.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr>
<td height="75"><a href="image/gallery1/g1_large_11.jpg" class="activator" rev="mouseover::Image 11 title here. This should be updatable"><img src="image/gallery1/thumbs/g1_thumb_11.jpg" width="75" height="75" border="0" alt=""></a></td>
<td><a href="image/gallery1/g1_large_12.jpg" class="activator" rev="mouseover::Image 12 title here. This should be updatable"><img src="image/gallery1/thumbs/g1_thumb_12.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr class="nextprev">
<td height="21"><img onclick="nextPrev(-1);" src="prev.gif" title="Previous" alt="Previous Image" width="75" height="25" border="0"></td>
<td><span class="imgholder"><img onclick="nextPrev(1);" src="next.gif" title="Next" alt="Next Image" width="75" height="25" border="0"></span></td>
</tr>
</table>
<p>&nbsp;</p>
</div>
</div>
<script type="text/javascript" defer>

/* Next/Previous by Classed Elements script
2008 John Davenport Scheuer - as first
seen in: http://www.dynamicdrive.com/forums/
username: jscheuer1
This notice must remain for legal use
*/

function nextPrev(way){
if(!nextPrev.ready) return;
nextPrev.count = nextPrev.count + way;
nextPrev.count = nextPrev.count >= nextPrev.ar.length? 0 : nextPrev.count < 0? nextPrev.ar.length - 1 : nextPrev.count;
nextPrev.active = true;
nextPrev.ar[nextPrev.count]['on' + nextPrev.ar[nextPrev.count].rev.split('::')[0]]();
nextPrev.active = false;
}
nextPrev.count = 0;
;(function(){
if(!document.getElementById) return;
if (!document.getElementsByClassName){
document.getElementsByClassName = function(cn){
cn = cn.replace(/ +/g, ' ').split(' ');
var ar = [], testname = function(n){
for (var re, i = cn.length - 1; i > -1; --i){
re = new RegExp('(^|\s)' + cn[i] + '(\s|$)');
if(!re.test(n)) return false;
}
return true;
}
for(var d = document.all || document.getElementsByTagName('*'), i = 0; i < d.length; ++i)
if(testname(d[i].className))
ar[ar.length] = d[i];
return ar;
};
document.getElementsByClassName.spoof = true;
}
nextPrev.ar = document.getElementsByClassName('activator');
var activateFunc = function(){
if(nextPrev.count == this.rel && !nextPrev.active) return;
document.getElementById('fadeDivCover').style.backgroundImage = 'url(' + document.getElementById('mypicture').src + ')';
fade.reset('fadeDivCover', 'in', true);
nextPrev.count = this.rel - 0;
document.getElementById('mypicture').src = this.href;
document.getElementById('imageText').innerHTML = this.rev.split('::')[1];
}, im = document.createElement('img');
im.id = 'mypicture';
im.alt = '';
im.onload = function(){fade('fadeDivCover', 'out', '', 2, 40, true);};
document.getElementsByClassName('imgholder')[0].appendChild(im);
im.src = nextPrev.ar[0].href;
document.getElementById('imageText').innerHTML = nextPrev.ar[0].rev.split('::')[1];
for (var i = nextPrev.ar.length - 1; i > -1; --i){
nextPrev.ar[i].onclick = function(){return false;};
nextPrev.ar[i].style.cursor = 'default';
nextPrev.ar[i]['on' + nextPrev.ar[nextPrev.count].rev.split('::')[0]] = activateFunc;
nextPrev.ar[i].rel = i;
}
if (document.getElementsByClassName.spoof)
document.getElementsByClassName.spoof = document.getElementsByClassName = null;
nextPrev.ready = true;
})();
</script>
</body>
</html>

GordonBennett
08-16-2008, 09:07 AM
Amazing response!

That's a terrific script.

Thanks again John.

auntnini
08-18-2008, 07:20 PM
Just want to mark this so I can refer to it later. Looks interesting.

I will always be a "novice" and have lots to learn about a lot of things (e.g., JASON, rel / rev). But could someone clue me in on using the event (instead of event handler onMouseOver) and the double colons in
REV="MOUSEOVER::Image Title" (instead of = equal sign)?

<a href="g1_large_10.jpg" class="activator" rev="mouseover::Image 10 title"><img src="/g1_thumb_10.jpg" alt=""></a>

Is there a book or online tutorial that would help explain this?

workhardplayhard
08-19-2008, 09:59 PM
Very nice bit of code. I started learning javascript 4 hours ago (well started reading a book on it) after finding DynamicDrive which has opened my eyes to the world of Javascripting. I was trying to make a simple gallery image gallery, well I had done it all but ran into problems doing the next and back buttons and I also wanted to implement a 1 of 10 for example under the placeholder image.

Just wondering how easy it would be to add under the place holder an updated image counter and a total number of images counter.

..would spit out some html something like:

<img src="back.gif"> 1 of 10 <img src="next.gif">

where 1 is the current image number being viewed and 10 is the total number of images that we have.

If that's easy to add I would be well happy to see how you did it. Really am liking Javascript so far but pretty overwhelmed. I'm beginning to understand the concept's it's just using those in a project is pretty mental. But I'll get there I hope :)

Nile
08-19-2008, 10:02 PM
Please make a new thread in the javascript forum. And include your whole entire code. I'm sure whatever your trying to do is possible. I'd be happy to help you.