Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Mar 2010
    Posts
    199
    Thanks
    78
    Thanked 5 Times in 5 Posts

    How to make a image viewer

    Hi I was wondering I really like the image viewer Gamespot uses.
    example:
    http://www.gamespot.com/wii/action/s...&tag=thumb%3B1

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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,620
    Thanks
    78
    Thanked 4,388 Times in 4,353 Posts
    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".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    conware (12-17-2010)

  • #3
    Regular Coder
    Join Date
    Mar 2010
    Posts
    199
    Thanks
    78
    Thanked 5 Times in 5 Posts
    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:


    Code:
    <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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,620
    Thanks
    78
    Thanked 4,388 Times in 4,353 Posts
    Yes, something like that could work fine.

    But you want *another* nested div.

    That is:
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    conware (12-17-2010)

  • #5
    Regular Coder
    Join Date
    Mar 2010
    Posts
    199
    Thanks
    78
    Thanked 5 Times in 5 Posts
    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:
    Code:
    <!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>

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    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" 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,mde=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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    conware (12-17-2010)

  • #7
    Regular Coder
    Join Date
    Mar 2010
    Posts
    199
    Thanks
    78
    Thanked 5 Times in 5 Posts
    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/dynamici...photoalbum.htm

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    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" 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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    conware (12-17-2010)

  • #9
    Regular Coder
    Join Date
    Mar 2010
    Posts
    199
    Thanks
    78
    Thanked 5 Times in 5 Posts
    Thanks so much vwphillips, works great now!
    This topic is solved! lol.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •