PDA

View Full Version : Step Carousel Viewer (auto step)



Mission Impossible
04-22-2013, 03:24 AM
1) Script Title:
Step Carousel Viewer
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm
3) Describe problem:
I have this code, how ative autostep? (solved)
It's possible to do auto zoom when you hover the image?



http://jsfiddle.net/MyNameIsJoe/FmTgv/

vwphillips
04-22-2013, 08:54 AM
<!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>

Mission Impossible
04-22-2013, 11:48 AM
Thanks!