...

View Full Version : How to make a image viewer



conware
12-15-2010, 01:20 AM
Hi I was wondering I really like the image viewer Gamespot uses.
example:
http://www.gamespot.com/wii/action/supermariogalaxy2/images/0/1/?om_act=convert&om_clk=gsimage&tag=thumb%3B1

Anyone know how to make one like that?
Thanks for any replies.:)

Old Pedant
12-15-2010, 02:07 AM
There are *TONS* of them out there just like that. Do you want one that use jQuery or not? Anyway, google for "lightbox" or especially "lightbox with thumbnails".

conware
12-15-2010, 05:28 PM
Well what Im looking for is lightweight javascript/css solution.
I prefer no jquery or ajax.

And basically I only want to have the Horizontal slider.
Sins I already use lightbox to display the large images.

Now what I was thinking to do is something like:




<style type="text/css">
#gallery img {
float:left;
border:1px solid #000;
}
#gallery {
width: 500px;
overflow: hidden;
}
<style>
<a href="#">PREV</a>
<div id="gallery">
<img src="myimage.jpg">
<img src="myimage.jpg">
<img src="myimage.jpg">
<img src="myimage.jpg">
<img src="myimage.jpg">
</div>
<a href="#">NEXT</a>



So sins of course some images will be hidden I want to make the navagation with javascript. To display the hidden images.
Of course if there is a better way to do it. Please let me know. :)

And mabey get the images from a xml file?
But I think i can do that with a bit php.

Old Pedant
12-15-2010, 08:32 PM
Yes, something like that could work fine.

But you want *another* nested div.

That is:


<style type="text/css">
#gallery {
position: relative;
width: 500px;
overflow: hidden;
}
#showing {
position: absolute;
left: 0px;
width: 1000px;
#showing img {
width: 100px;
float: left;
border: 1px solid #000;
}
<style>
<a href="#">PREV</a>
<div id="gallery">
<div id="showing">
<img src="myimage1.jpg">
<img src="myimage2.jpg">
<img src="myimage3.jpg">
<img src="myimage4.jpg">
<img src="myimage5.jpg">
<img src="myimage6.jpg">
<img src="myimage7.jpg">
<img src="myimage8.jpg">
<img src="myimage9.jpg">
<img src="myimage10.jpg">
</div>
</div>
<a href="#">NEXT</a>

And then you just slide the entire #showing div left or right by adjusting its style.left value. So that 5 of the images are visible at a time.

I think that would work fine.

conware
12-16-2010, 03:22 PM
Hmm. I tried a few things but I can't really get it to work.
Also now I took a closer look.

I also want to be able when I click next to slide 5 images over and do that untill ive reached the end. Then I want to remove the link from the next button so people can't click it anymore.
Same for the prev button but opposite direction.
Also is it possible to add a sliding duration with only javascript?

Thanks for any tips or examples.

My code so far:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<script type="text/javascript" language="javascript">
<!--
function next(gal)
{
document.getElementById(gal).style.left = "-127px";
}
function prev(gal)
{
document.getElementById(gal).style.left = "45px";
}
//-->
</script>
<style type="text/css" media="screen">
#gallery {
position: relative;
width: 660px;
height: 102px;
overflow: hidden;
border: 2px solid #000;
background: #454545;
}
#showing {
position: absolute;
left: 0px;
width: 1000px;
}
#showing img {
width: 120px;
height: 90px;
float: left;
margin: 5px;
border: 1px solid #000;
}
#next,
#prev {
padding: 10px;
background: #1c1c1c;
border: 1px solid #000;
font-weight: bold;
}
#next:link,
#next:hover,
#next:visited,
#next:active,
#prev:link,
#prev:hover,
#prev:visited,
#prev:active {
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<td><a href="#" onclick="prev('showing');" id="prev">PREV</a></td>
<td>
<div id="gallery">
<div id="showing">
<img src="http://www.nes-roms.com/img/games/NES_Super_Mario_Bros-1.png">
<img src="myimage2.jpg">
<img src="myimage3.jpg">
<img src="myimage4.jpg">
<img src="myimage5.jpg">
<img src="myimage6.jpg">
<img src="myimage7.jpg">
<img src="myimage8.jpg">
<img src="myimage9.jpg">
<img src="myimage10.jpg">
</div>
</div>
</td>
<td><a href="#" onclick="next('showing');" id="next">Next</a></td>
</tr>
</table>
</body>
</html>

vwphillips
12-16-2010, 04:47 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

#tstH {
position:absolute;left:20px;top:120px;width:407px;height:180px;background-Color:#FFCC66;border:solid black 1px;
}

.slideH {
position:absolute;left:0px;top:20px;width:407px;height:200px;
}

#tstV {
position:absolute;left:600px;top:20px;width:300px;height:320px;background-Color:#FFCC66;border:solid black 1px;
}

.slideV {
position:absolute;left:20px;top:0px;width:207px;height:320px;
}

.active {
border:solid red 1px;
}

/*]]>*/
</style>
<script src="http://www.vicsjavascripts.org.uk/Animate/Animate.js" type="text/javascript"></script>

</head>

<body>
<input type="button" name="" value="Forward" id="forward"/>
<input type="button" name="" value="Back" id="back"/>
<input type="button" name="" value="GoTo 1" onclick="S1.GoTo(0);" />
<input type="button" name="" value="GoTo 2" onclick="S1.GoTo(1);" />
<input type="button" name="" value="GoTo 3" onclick="S1.GoTo(2);" />
<input type="button" name="" value="GoTo 4" onclick="S1.GoTo(3);" />
<br />
<input type="button" name="" value="Forward V" id="forwardV"/>
<input type="button" name="" value="Back V" id="backV"/>

<div id="tstH" >

<div class="slideH" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Egypt 1" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Egypt 2" />
</div>

<div class="slideH" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Egypt 3" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="Egypt 4" />
</div>

<div class="slideH" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="Egypt 5" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" alt="Egypt 6" />
</div>

<div class="slideH" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" alt="Egypt 7" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt13.jpg" alt="Egypt 8" />
</div>

</div>

<div id="tstV" >

<div class="slideV" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Egypt" />
</div>

<div class="slideV" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="Egypt" />
</div>

<div class="slideV" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" alt="Egypt" />
</div>

<div class="slideV" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt13.jpg" alt="Egypt" />
</div>

</div>


<script type="text/javascript">
/*<![CDATA[*/
// Move Slider (05-December-2010) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// The script slides DIV elements into a parent node and when slide elements are moused over the element may be moved.
// With animated 'Horizontal' and 'Vertical' modes of display and execution.
// Options allow:
// slide elements may be images or identified by a common class name,
// the slides to be wrapped first to last or stopped on first or last,
// opacity to be applied to slide elements,
// adding event calls to 'forward' and 'back' buttons,
// opacity applied to the forward and back buttons when in nowrap mode,
// inline 'GoTo' event calls,
// auto rotation,
// application of an 'active' class name,
// and persistence to restored the last slide on initialisation.

// There may be as many applications on a page as required.

// The script utilises my animation script 'Animate' http://www.vicsjavascripts.org.uk/Animate/Animate.htm


// ****** Application Notes.
//
// **** The HTML and CSS Code.
//
// ** The Parent DIV.
// The slide DIV elements are nested in a parent DIV.
// This parent DIV must be assigned a unique ID name and have a CSS stye position of 'relative' or 'absolute'
// and width and height defined by CSS class name or inline style.
// The parent DIV be assigned a style overflow of 'hidden' during initialisation.
//
// ** The Side DIV Elements
// The side DIV elements must be assigned a common class name.
// The side DIV elements are assigned a style position of 'absolute'
// and style left(Horizontal Mode) or top(vertical Mode) during initialisation.
// By default the mouseover event call to move slide elements will be applied to nested image elements,
// alternatively the elements may be assigned a common class name.
//
//
// **** Initialising the Script.
// Each instance of the script is initialise by creating a new instance of 'zxcMoveSlider' passing script options as an object.
// Where the instance is to be controlled by inline event calls the instance must be assigned to a global variable.
// e.g.
// var S1=new zxcMoveSlider({
// ID:'tstH', // the unique ID name of the parent DIV. (string)
// SlideClassName:'slideH', // the common class name of the slider DIVs. (string)
// Mode:'Horizontal', //(optional) the mode of display and execution, 'Horizontal' or 'Vertical'. ('Horizontal' or 'Vertical', default = 'Horizontal')
// ElementClassName:'element', //(optional) the common class name of the slider elements. (string, default = image elements)
// ActiveClassName:'active', //(optional) the additional class name of active slider elements. (string, default = '')
// ObjectMoveBy:-10, //(optional) the distance to move the slide objects on mouseover. (digits, default = -10)
// ObjectSpeed:200, //(optional) the duration of the slide object move animation in milli seconds. (digits, default = 500)
// ObjectOpacity:50, //(optional) the mouse out opacity of the slide objects. (digits, default = 100)
// SlideSpeed:1000, //(optional) the duration of the slide move animation in milli seconds. (digits, default = 500)
// SlideMoveBy:408, //(optional) the distance to move the slides forward or back. (digits, default = the parent node width)
// Wrap:false, //(optional) true = wrap from last to first, false = no wrap. (boolean, default = true)
// ForwardID:'forward', //(optional) the unique ID name of the object to rotate the slides forward on mouseup. (string, default = inline event calls)
// BackID:'back', //(optional) the unique ID name of the object to rotate the slides back on mouseup. (string, default = inline event calls)
// ButtonOpacity:50, //(optional) the opacity of the buttons when at first or last in no wrap mode. (digits, default = 100)
// AutoRotateHold:1000, //(optional) the auto rotation hold duration in milli seconds. (digits, default = SlideSpeed*3)
// AutoRotateStart:true, //(optional) true = start auto rotation on initialisation. (boolean, default = false)
// AutoRotateEvents:true, //(optional) add mouseover 'pause' and mouseout 'start' auto rotation events to the parent DIV. (boolean, default = false = no events)
// DaysPersistance:50 //(optional) the number of days the last slide will be restored on initialisation. (digits, default = no persistence)
// });
//

// **** Controlling the Script by InLine Event calls.
//
// The script may be controlling by inline event calls to functions 'Slide' 'GoTo' 'Pause' and 'Auto'.
//
// ** Function 'Slide'.
// The event call to function 'Slide' may be added to two elements during initialisation
// to slide in the next or previous slide or may be called by inline event calls.
// example:
// <input type="button" name="" value="Forward" onclick="S1.Slide(1);"/>
// where:
// S1 = the global variable referencing the script instance. (global variable)
// parameter 0 = (optional) 1 = slide in the next slide, -1 = slide in the previous slide. (digits, default = 1)
//
// ** Function 'GoTo'.
// An event call to function 'GoTo' will slide in a specified slide.
// example:
// <input type="button" name="" value="GoTo" onclick="S1.GoTo(1);"/>
// where:
// S1 = the global variable referencing the script instance. (global variable)
// parameter 0 = the side index number. (digits)
//
// ** Function 'Pause'.
// An event call to function 'Pause' will pause auto rotation.
// example:
// <input type="button" name="" value="GoTo" onclick="S1.Pause();"/>
// where:
// S1 = the global variable referencing the script instance. (global variable)
//
// ** Function 'Auto'.
// An event call to function 'Auto' will start auto rotation.
// example:
// <input type="button" name="" value="GoTo" onclick="S1.Auto();"/>
// where:
// S1 = the global variable referencing the script instance. (global variable)
//


// ****** Functional Code(4.89K) - NO NEED to Change.

function zxcMoveSlider(o){
var obj=document.getElementById(o.ID),slides=this.bycls(o.SlideClassName,obj),imgs,z0,z0a,oop,but,nu=0,m de=typeof(o.Mode)=='string'&&o.Mode.charAt(0).toUpperCase()=='V'?['top','left','Height']:['left','top','Width'];
var elcls=typeof(o.ElementClassName)=='string'?o.ElementClassName:false,acls=typeof(o.ActiveClassName)== 'string'?o.ActiveClassName:'',cls,cnt=0;
obj.style.overflow='hidden';
this.days=typeof(o.DaysPersistance)=='number'?o.DaysPersistance:false;
this.nme=o.ID+'=';
if (this.days&&this.cookie&&this.cookie(this.nme)){
nu=this.cookie(this.nme)*1;
}
this.slides=[];
this.lgth=slides.length-1;
this.objmoveby=typeof(o.ObjectMoveBy)=='number'?o.ObjectMoveBy:-10;
this.oms=typeof(o.ObjectSpeed)=='number'?o.ObjectSpeed:500;
this.opac=typeof(o.ObjectOpacity)=='number'?o.ObjectOpacity:100;
this.moveby=typeof(o.SlideMoveBy)=='number'?o.SlideMoveBy:obj['offset'+mde[2]];
this.sms=typeof(o.SlideSpeed)=='number'?o.SlideSpeed:500;
this.clss=[];
for (z0=0;z0<=this.lgth;z0++){
slides[z0].style.position='absolute';
slides[z0].style.visibility=z0!=nu?'hidden':'visible';
slides[z0].style[mde[0]]=(z0!=nu?this.moveby:0)+'px';
this.slides[z0]=new zxcAnimate(mde[0],slides[z0],0);
this.slides[z0].oop=this;
this.slides[z0].Complete=function(){
this.oop.lst.style.visibility='hidden';
}
imgs=elcls&&this.bycls(elcls,slides[z0])[0]?this.bycls(elcls,slides[z0]):slides[z0].getElementsByTagName('IMG');
for (z0a=0;z0a<imgs.length;z0a++){
cls=imgs[z0a].className||'';
this.clss.push([cls,cls+' '+acls]);
oop=[new zxcAnimate(mde[1],imgs[z0a],0),new zxcAnimate('opacity',imgs[z0a],this.opac),cnt++];
imgs[z0a].style.position='relative';
imgs[z0a].style.top='0px';
zxcOpacity(imgs[z0a],this.opac);
this.addevt(imgs[z0a],'mouseover','rise',oop);
this.addevt(imgs[z0a],'mouseout','rise',oop);
}
}
this.nowrap=typeof(o.Wrap)=='boolean'&&!o.Wrap?true:false;
but=document.getElementById(o.ForwardID);
if (but){
this.fwd=but;
this.addevt(but,'mouseup','Slide',1);
}
but=document.getElementById(o.BackID);
if (but){
this.bac=but;
this.addevt(but,'mouseup','Slide',-1);
}
this.butopac=typeof(o.ButtonOpacity)=='number'?o.ButtonOpacity:100;
this.cnt=nu;
this.lst=slides[nu];
this.buttons(nu);
this.ud=1;
this.hold=typeof(o.AutoRotateHold)=='number'?o.AutoRotateHold+this.sms:this.sms*4;
if (typeof(o.AutoRotateEvents)!='boolean'||o.AutoRotateEvents){
this.addevt(obj,'mouseover','Pause');
this.addevt(obj,'mouseout','Auto');
}
if (typeof(o.AutoRotateStart)=='boolean'&&o.AutoRotateStart){
this.Auto(this.hold);
}
}

zxcMoveSlider.prototype={

Slide:function(ud,e){
var cnt=e?this.cnt+(typeof(ud)=='number'&&ud<0?-1:1):ud;
if (this.nowrap&&(cnt<0||cnt>this.lgth)){
this.ud*=-1;
return;
}
if (e){
this.ud=ud;
}
this.lst=this.slides[this.cnt].obj;
this.lst.style.zIndex='1';
this.cnt=cnt<0?this.lgth:cnt>this.lgth?0:cnt;
this.buttons(this.cnt);
var nxt=this.slides[this.cnt];
nxt.obj.style.zIndex='2';
nxt.obj.style.visibility='visible';
nxt.animate(this.moveby*(ud<0?-1:1),0,this.sms,[0,this.moveby]);
if (this.days&&this.cookie){
document.cookie=this.nme+this.cnt+';expires='+(new Date(new Date().getTime()+this.days*86400000).toGMTString())+';path=/';
}
},

Auto:function(ms){
this.Pause();
var oop=this;
this.to=setTimeout(function(){ oop.auto(); },ms||500);
},

Pause:function(){
clearTimeout(this.to);
},

GoTo:function(nu){
if (this.slides[nu]&&this.slides[nu].obj!=this.lst){
this.Slide(nu);
}
},

auto:function(nu){
this.Slide(this.ud,true);
var oop=this;
this.to=setTimeout(function(){ oop.auto(); },this.hold);
},

buttons:function(cnt){
if (this.nowrap){
if (this.bac){
zxcOpacity(this.bac,cnt<=0?this.butopac:100);
}
if (this.fwd){
zxcOpacity(this.fwd,cnt>=this.lgth?this.butopac:100);
}
}
},

rise:function(oop,e){
var ud=e.type=='mouseover';
oop[0].animate(oop[0].data[0],ud?this.objmoveby:0,this.oms);
oop[1].animate(oop[1].data[0],ud?100:this.opac,this.oms);
oop[0].obj.className=this.clss[oop[2]][ud?1:0];
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
},

bycls:function (nme,el){
for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)){
ary.push(els[z0]);
}
}
return ary;
},

cookie:function(nme){
var split=document.cookie.split(';'),s,z0;
for(z0=0;z0<split.length;z0++){
s=split[z0];
while (s.charAt(0)==' '){
s=s.substring(1,s.length);
}
if (s.indexOf(nme)==0){
return s.substring(nme.length,s.length);
}
}
return null;
}

}



var S1=new zxcMoveSlider({
ID:'tstH', // the unique ID name of the parent DIV. (string)
SlideClassName:'slideH', // the common class name of the slider DIVs. (string)
Mode:'Horizontal', //(optional) the mode of display and execution, 'Horizontal' or 'Vertical'. ('Horizontal' or 'Vertical', default = 'Horizontal')
ElementClassName:'element', //(optional) the common class name of the slider elements. (string, default = image elements)
ActiveClassName:'active', //(optional) the additional class name of active slider elements. (string, default = '')
ObjectMoveBy:-10, //(optional) the distance to move the slide objects on mouseover. (digits, default = -10)
ObjectSpeed:200, //(optional) the duration of the slide object move animation in milli seconds. (digits, default = 500)
ObjectOpacity:50, //(optional) the mouse out opacity of the slide objects. (digits, default = 100)
SlideSpeed:1000, //(optional) the duration of the slide move animation in milli seconds. (digits, default = 500)
SlideMoveBy:408, //(optional) the distance to move the slides forward or back. (digits, default = the parent node width)
Wrap:false, //(optional) true = wrap from last to first, false = no wrap. (boolean, default = true)
ForwardID:'forward', //(optional) the unique ID name of the object to rotate the slides forward on mouseup. (string, default = inline event calls)
BackID:'back', //(optional) the unique ID name of the object to rotate the slides back on mouseup. (string, default = inline event calls)
ButtonOpacity:50, //(optional) the opacity of the buttons when at first or last in no wrap mode. (digits, default = 100)
AutoRotateHold:1000, //(optional) the auto rotation hold duration in milli seconds. (digits, default = SlideSpeed*3)
AutoRotateStart:true, //(optional) true = start auto rotation on initialisation. (boolean, default = false)
AutoRotateEvents:true, //(optional) add mouseover 'pause' and mouseout 'start' auto rotation events to the parent DIV. (boolean, default = false = no events)
DaysPersistance:-50 //(optional) the number of days the last slide will be restored on initialisation. (digits, default = no persistance)
});

/*
new zxcMoveSlider({
ID:'tstV',
SlideClassName:'slideV',
Mode:'V',
ObjectMoveBy:-10,
ObjectSpeed:200,
ObjectOpacity:50,
ForwardID:'forwardV',
BackID:'backV',
SlideSpeed:1000
});
*/
/*]]>*/
</script>
</body>

</html>

conware
12-16-2010, 05:32 PM
Hey vwphillips,
Thanks for you code but It seems kind of much just for a gallery.
But in anycase I tried google ones more and found a script that olmost does what I want.
The only thing I would like to change to it is the way it reads the images.
Now the script is getting the images in a javascript array.
But I think search engines bots won't find those images sins the don't read javascript.
So can someone help me change that code to work with normal html images?
I would also like to add a prev and next button with that code if possible.

Here is the link:

http://www.dynamicdrive.com/dynamicindex4/photoalbum.htm

vwphillips
12-17-2010, 12:09 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

#tst {
position:relative;width:630px;height:440px;border:solid red 1px;
}

.panel {
width:630px;height:440px;
}

.row {
width:680px;height:200px;margin-top:20px;
}

.img {
width:180px;height:180px;border:solid red 1px;text-Align:center;float:left;margin-Left:20px;
}

#nav {
position:relative;width:230px;height:50px;
}

.nav {
width:20px;height:20px;text-Align:center;background-Color:#FFFFCC;float:left;margin-Left:20px;border:solid red 1px;cursor:pointer;
}

.navactive {
background-Color:#FFCC66;
}

/*]]>*/
</style></head>

<body>
<div id="tst" >
<div class="panel" >
<div class="row" >
<div class="img" >
<img src="http://www.dynamicdrive.com/dynamicindex4/gallery/stopdesign.gif" alt="image" />
<br />
Image 1
</div>
<div class="img" >
<img src="http://www.dynamicdrive.com/dynamicindex4/gallery/pixelplain.gif" alt="image" />
<br />
Image 2
</div>
<div class="img" >
<img src="http://www.dynamicdrive.com/dynamicindex4/gallery/southerncoastal.gif" alt="image" />
<br />
Image 3
</div>
</div>
<div class="row" >
<div class="img" >
<img src="http://www.dynamicdrive.com/dynamicindex4/gallery/zenfulcreations.gif" alt="image" />
</div>
<div class="img" >
<img src="http://www.dynamicdrive.com/dynamicindex4/gallery/followtherhinos.gif" alt="image" />
</div>
<div class="img" >
<img src="http://www.dynamicdrive.com/dynamicindex4/gallery/autismvictoria.gif" alt="image" />
</div>
</div>
</div>

<div class="panel" >
<div class="row" >
<div class="img" >
<img src="http://www.dynamicdrive.com/dynamicindex4/gallery/phonophunk.gif" alt="image" />
</div>
<div class="img" >
<img src="http://www.dynamicdrive.com/dynamicindex4/gallery/naturalnutrition.gif" alt="image" />
</div>
<div class="img" >
<img src="http://www.dynamicdrive.com/dynamicindex4/gallery/thomasbloor.gif" alt="image" />
</div>
</div>
<div class="row" >
<div class="img" >
<img src="http://www.dynamicdrive.com/dynamicindex4/gallery/blogger.gif" alt="image" />
</div>
<div class="img" >
<img src="http://www.dynamicdrive.com/dynamicindex4/gallery/extel.gif" alt="image" />
</div>
<div class="img" >
<img src="http://www.dynamicdrive.com/dynamicindex4/gallery/release1.gif" alt="image" />
</div>
</div>
</div>

<div class="panel" >
<div class="row" >
<div class="img" >
<img src="http://www.dynamicdrive.com/dynamicindex4/gallery/jeffwerner.gif" alt="image" />
</div>
<div class="img" >
<img src="http://www.dynamicdrive.com/dynamicindex4/gallery/firewheeldesign.gif" alt="image" />
</div>
</div>
</div>
</div>
<br />

<div id="nav" >
<div class="nav" >1</div>
<div class="nav" >2</div>
<div class="nav" >3</div>
</div>

<script type="text/javascript">
/*<![CDATA[*/

function Gallery(o){
var obj=document.getElementById(o.ID),cls=o.NavClassName;
obj.style.overflow='hidden';
this.panels=this.bycls(o.PanelClassName,obj);
for (var z0=0;z0<this.panels.length;z0++){
this.panels[z0].style.position='absolute';
this.panels[z0].style.top='0px';
this.panels[z0].style.left='0px';
this.panels[z0].style.visibility=z0>0?'hidden':'visible';
}
obj=document.getElementById(o.NavID);
this.navs=this.bycls(cls,obj);
this.clss=[cls,cls+' '+(o.NavActiveClassName||'')];
for (var z1=0;z1<this.navs.length;z1++){
if (this.panels[z1]){
this.navs[z1].className=this.clss[z1>0?0:1];
this.addevt(this.navs[z1],'mouseup','GoTo',z1);
}
}
this.lst=0;
}

Gallery.prototype={

GoTo:function(nu){
this.panels[this.lst].style.visibility='hidden';
this.navs[this.lst].className=this.clss[0];
this.lst=nu;
this.panels[this.lst].style.visibility='visible';
this.navs[this.lst].className=this.clss[1];
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
},

bycls:function (nme,el){
for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)){
ary.push(els[z0]);
}
}
return ary;
}


}

new Gallery({
ID:'tst',
PanelClassName:'panel',
NavID:'nav',
NavClassName:'nav',
NavActiveClassName:'navactive'
});
/*]]>*/
</script>
</body>

</html>

conware
12-17-2010, 05:01 PM
Thanks so much vwphillips, works great now!
:) This topic is solved! lol.:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum