User:Meagan/Image scroller







/***********************************************
 * 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



.stepcarousel{ position: relative; /*leave this value alone*/ /*border: 10px 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. */ }



stepcarousel.setup({	galleryid: 'imagegallerylong', //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: {false:true, moveby:1, pause:3000},	panelbehavior: {speed:300, wraparound:true, persist:true},	defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://2009.igem.org/wiki/images/a/a6/Left_arrow_50px.png', -50, 80], rightnav: ['http://2009.igem.org/wiki/images/4/45/Right_arrow_50px.png', -20, 80]},	statusvars: ['statusAlong', 'statusBlong', 'statusClong'], //register 3 variables that contain current panel (start), current panel (last), and total panels	contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file'] })



















stepcarousel.setup({	galleryid: 'imagegallery', //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, 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 ['external', 'path_to_external_file'] })





<img src="http://2009.igem.org/wiki/images/5/57/Igem_banner_xsmall.jpg" />

<img src="http://i31.tinypic.com/119w28m.jpg" />

<img src="http://i27.tinypic.com/34fcrxz.jpg" />

Current Panel: <b style="margin-left: 30px">Total Panels:</b>

<a href="javascript:stepcarousel.stepBy('imagegallery', -1)">Back 1 Panel</a> <a href="javascript:stepcarousel.stepBy('imagegallery', 1)" style="margin-left: 80px">Forward 1 Panel</a>

<a href="javascript:stepcarousel.stepTo('imagegallery', 1)">To 1st Panel</a> <a href="javascript:stepcarousel.stepBy('imagegallery', 2)" style="margin-left: 80px">Forward 2 Panels</a>

<script type="text/javascript">

stepcarousel.setup({	galleryid: 'mygallerylong', //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:true, moveby:1, pause:3000},	panelbehavior: {speed:300, wraparound:false, persist:true},	defaultbuttons: {enable: true, moveby: 1, leftnav: ['arrowl.gif', -10, 100], rightnav: ['arrowr.gif', -10, 100]},	statusvars: ['statusAlong', 'statusBlong', 'statusClong'], //register 3 variables that contain current panel (start), current panel (last), and total panels	contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file'] })

<img src="fruits.jpg" />

<img src="cave.jpg" />

<img src="pool.jpg" />

<img src="autumn.jpg" />

<img src="dog.jpg" />

User:Meagan/Image_scroller/test