Results 1 to 3 of 3

Thread: Step Carousel Viewer (auto step)

  1. #1
    Join Date
    Apr 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Step Carousel Viewer (auto step)

    1) Script Title:
    Step Carousel Viewer
    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...epcarousel.htm
    3) Describe problem:
    I have this code, how ative autostep? (solved)
    It's possible to do auto zoom when you hover the image?

    Code:
    http://jsfiddle.net/MyNameIsJoe/FmTgv/
    Last edited by Mission Impossible; 04-22-2013 at 03:39 AM.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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>
    <!--Make sure page contains valid doctype at the very top!-->
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="stepcarousel.js">
    
    /***********************************************
    * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    </script>
    
    <style type="text/css">
    
    .stepcarousel{
    position: relative; /*leave this value alone*/
    border: 1px solid black;
    overflow: scroll; /*leave this value alone*/
    width: 270px; /*Width of Carousel Viewer itself*/
    height: 200px; /*Height should enough to fit largest content's height*/
    }
    
    .stepcarousel .belt{
    position: absolute; /*leave this value alone*/
    left: 0;
    top: 0;
    }
    
    .stepcarousel .panel{
    float: left; /*leave this value alone*/
    overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
    margin: 10px; /*margin around each panel*/
    width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
    text-Align:center;
    }
    
    </style>
    
    
    
    <script type="text/javascript">
    
    stepcarousel.setup({
    	galleryid: 'mygallery', //id of carousel DIV
    	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    	panelclass: 'panel', //class of panel DIVs each holding content
    	autostep: {enable:false, moveby:1, pause:3000},
    	panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide', persist:true},
    	defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
    	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
    })
    
    </script></head>
    
    <body>
    <center>
    
    <div id="mygallery" class="stepcarousel">
    <div class="belt">
    
    
    <div class="panel">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
    </div>
    
    <div class="panel">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
    </div>
    
    <div class="panel">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
    </div>
    
    <div class="panel">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" />
    </div>
    
    </div>
    </div>
    
    <p>
    <b>Current Panel:</b> <span id="statusA"></span> <b style="margin-left: 30px">Total Panels:</b> <span id="statusC"></span>
    </p>
    
    <p id="mygallery-paginate" style="width: 250px; text-align:center">
    <img src="opencircle.png" data-over="graycircle.png" data-select="closedcircle.png" data-moveby="1" />
    </p>
    
    <p>
    <a href="javascript:stepcarousel.stepBy('mygallery', -1)">Back 1 Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 1)" style="margin-left: 80px">Forward 1 Panel</a> <br />
    
    <a href="javascript:stepcarousel.stepTo('mygallery', 1)">To 1st Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 2)" style="margin-left: 80px">Forward 2 Panels</a>
    </p>
    </center>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcImageZoom={
    
     init:function(o){
      var id=o.ID,p=document.getElementById(id);
      if (p){
       var ms=o.Speed,z=o.Zoom,imgs=p.getElementsByTagName('IMG'),c,z0=0;
       o.ary=[];
       for (;z0<imgs.length;z0++){
        c=document.createElement('IMG');
        c.src=imgs[z0].src;
        c.style.position='absolute';
        c.style.zIndex='101';
        c.style.left='-3000px';
        c.style.top='-3000px';
        document.body.appendChild(c);
        o.ary[z0]=[imgs[z0],[c,'width'],[c,'height'],[c,'left'],[c,'top']];
        this.addevt(imgs[z0],'mouseover','zoom',o,o.ary[z0],true);
        this.addevt(c,'mouseout','zoom',o,o.ary[z0],false);
       }
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.z=typeof(z)=='number'&&z>1?z:2;
      }
     },
    
     zoom:function(o,a,ud){
      var w=a[0].width,h=a[0].height,d=new Date();
      ud?a[5]=this.pos(a[0]):null;
      this.animate(o,a[1],ud?a[0].width:a[1][2],a[0].width*(ud?2:1),d,o.ms);
      this.animate(o,a[2],ud?a[0].height:a[2][2],a[0].height*(ud?2:1),d,o.ms);
      this.animate(o,a[3],ud?a[5][0]:a[3][2],a[5][0]+(ud?(w-w*2)/2:0),d,o.ms);
      this.animate(o,a[4],(ud?a[5][1]:a[4][2]),a[5][1]+(ud?(h-h*2)/2:0),d,o.ms,ud);
     },
    
     animate:function(o,a,f,t,srt,mS,ud){
      clearTimeout(a[3]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[2]=n;
       a[0].style[a[1]]=n+'px';
      }
      if (ms<mS){
       a[3]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,ud); },10);
      }
      else {
       ud===false?a[0].style.top='-3000px':null;
       a[2]=t;
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p,p1,p2){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,p2);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); });
      }
     }
    
    }
    
    zxcImageZoom.init({
     ID:'mygallery',
     Zoom:2,
     Speed: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/

  3. #3
    Join Date
    Apr 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks!

Similar Threads

  1. auto change image Step Carousel Viewer
    By afcbob in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-14-2010, 07:19 PM
  2. Resolved Step Carousel Auto Play starts before images load
    By lsavard in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 04-22-2009, 12:17 PM
  3. Step Carousel - Auto problem
    By jkl47 in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 03-09-2009, 06:15 PM
  4. Resolved Step Carousel Viewer v1.6.1
    By armababy in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 01-24-2009, 09:00 PM
  5. loading Step Carousel Viewer in middle of carousel
    By sam4682 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 12-31-2008, 10:07 PM

Bookmarks

Posting Permissions

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