http://2009.igem.org/wiki/index.php?title=User:Meagan/Image_scroller&feed=atom&action=history
User:Meagan/Image scroller - Revision history
2024-03-29T08:15:06Z
Revision history for this page on the wiki
MediaWiki 1.16.5
http://2009.igem.org/wiki/index.php?title=User:Meagan/Image_scroller&diff=1341&oldid=prev
Meagan at 14:50, 14 April 2009
2009-04-14T14:50:16Z
<p></p>
<table style="background-color: white; color:black;">
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 14:50, 14 April 2009</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 3:</td>
<td colspan="2" class="diff-lineno">Line 3:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><head></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><head></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div><script type="text/javascript" src="<del class="diffchange diffchange-inline">http</del>://<del class="diffchange diffchange-inline">www</del>.<del class="diffchange diffchange-inline">dynamicdrive</del>.<del class="diffchange diffchange-inline">com</del>/<del class="diffchange diffchange-inline">jquery</del>/jquery-1.2.6.pack.js"></script></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><script type="text/javascript" src="<ins class="diffchange diffchange-inline">https</ins>://<ins class="diffchange diffchange-inline">2009</ins>.<ins class="diffchange diffchange-inline">igem</ins>.<ins class="diffchange diffchange-inline">org</ins>/<ins class="diffchange diffchange-inline">User:Meagan/Scripts</ins>/jquery-1.2.6.pack.js<ins class="diffchange diffchange-inline">&action=raw</ins>"></script></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div><script type="text/javascript" src="<del class="diffchange diffchange-inline">http</del>://<del class="diffchange diffchange-inline">www</del>.<del class="diffchange diffchange-inline">dynamicdrive</del>.<del class="diffchange diffchange-inline">com</del>/<del class="diffchange diffchange-inline">dynamicindex4</del>/stepcarousel.js"></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><script type="text/javascript" src="<ins class="diffchange diffchange-inline">https</ins>://<ins class="diffchange diffchange-inline">2009</ins>.<ins class="diffchange diffchange-inline">igem</ins>.<ins class="diffchange diffchange-inline">org</ins>/<ins class="diffchange diffchange-inline">User:Meagan/Scripts</ins>/stepcarousel.js<ins class="diffchange diffchange-inline">&action=raw</ins>"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>/***********************************************</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>/***********************************************</div></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 154:</td>
<td colspan="2" class="diff-lineno">Line 154:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><!-- ### END OF DEMO #2 ### --></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><!-- ### END OF DEMO #2 ### --></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"><!-- ### START OF DEMO from website code ### --></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"><script type="text/javascript"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">stepcarousel.setup({</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"> galleryid: 'mygallerylong', //id of carousel DIV</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"> beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"> panelclass: 'panel', //class of panel DIVs each holding content</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"> autostep: {enable:true, moveby:1, pause:3000},</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"> panelbehavior: {speed:300, wraparound:false, persist:true},</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"> defaultbuttons: {enable: true, moveby: 1, leftnav: ['arrowl.gif', -10, 100], rightnav: ['arrowr.gif', -10, 100]},</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"> statusvars: ['statusAlong', 'statusBlong', 'statusClong'], //register 3 variables that contain current panel (start), current panel (last), and total panels</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"> contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">})</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></script></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"><div id="mygallerylong" class="stepcarousel" style="width: 540px"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"><div class="belt"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"><div class="panel"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"><img src="fruits.jpg" /><br /></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></div></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"><div class="panel"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"><img src="cave.jpg" /></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></div></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"><div class="panel"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"><img src="pool.jpg" /></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></div></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"><div class="panel"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"><img src="autumn.jpg" /></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></div></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"><div class="panel"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"><img src="dog.jpg" /></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></div></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></div></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></div></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div></body></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div></body></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div></html></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div></html></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">[[User:Meagan/Image_scroller/test]]</ins></div></td></tr>
</table>
Meagan
http://2009.igem.org/wiki/index.php?title=User:Meagan/Image_scroller&diff=1319&oldid=prev
Meagan: New page: <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <script type="text/javascript" src="http://www.dynamicdrive.com/jquery/jquery-1.2.6.pack.js"></script> <script...
2009-04-14T14:02:21Z
<p>New page: <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <script type="text/javascript" src="http://www.dynamicdrive.com/jquery/jquery-1.2.6.pack.js"></script> <script...</p>
<p><b>New page</b></p><div><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<br />
<head><br />
<br />
<script type="text/javascript" src="http://www.dynamicdrive.com/jquery/jquery-1.2.6.pack.js"></script><br />
<br />
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex4/stepcarousel.js"><br />
<br />
/***********************************************<br />
* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)<br />
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts<br />
* This notice must stay intact for legal use<br />
***********************************************/<br />
<br />
</script><br />
<br />
<style type="text/css"><br />
<br />
.stepcarousel{<br />
position: relative; /*leave this value alone*/<br />
/*border: 10px solid black;*/<br />
overflow: scroll; /*leave this value alone*/<br />
width: 270px; /*Width of Carousel Viewer itself*/<br />
height: 200px; /*Height should enough to fit largest content's height*/<br />
}<br />
<br />
.stepcarousel .belt{<br />
position: absolute; /*leave this value alone*/<br />
left: 0;<br />
top: 0;<br />
}<br />
<br />
.stepcarousel .panel{<br />
float: left; /*leave this value alone*/<br />
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/<br />
margin: 10px; /*margin around each panel*/<br />
width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */<br />
}<br />
<br />
</style><br />
</head><br />
<br />
<body><br />
<br />
<!-- ### START OF DEMO #1 ### --><br />
<br />
<script type="text/javascript"><br />
<br />
stepcarousel.setup({<br />
galleryid: 'imagegallerylong', //id of carousel DIV<br />
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs<br />
panelclass: 'panel', //class of panel DIVs each holding content<br />
autostep: {false:true, moveby:1, pause:3000},<br />
panelbehavior: {speed:300, wraparound:true, persist:true},<br />
defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://static.igem.org/mediawiki/2009/a/a6/Left_arrow_50px.png', -50, 80], rightnav: ['https://static.igem.org/mediawiki/2009/4/45/Right_arrow_50px.png', -20, 80]},<br />
statusvars: ['statusAlong', 'statusBlong', 'statusClong'], //register 3 variables that contain current panel (start), current panel (last), and total panels<br />
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']<br />
})<br />
<br />
<br />
</script><br />
<br />
<div id="imagegallerylong" class="stepcarousel" style="width: 790px; margin-left:50px;"><br />
<div class="belt"><br />
<br />
<div class="panel"><br />
<img src="https://static.igem.org/mediawiki/2009/0/00/Freezer_plates_xsmall.jpg" /><br />
</div><br />
<br />
<div class="panel"><br />
<img src="https://static.igem.org/mediawiki/2009/3/3d/Slovenia_mascot_xsmall.jpg" /><br />
</div><br />
<br />
<div class="panel"><br />
<img src="https://static.igem.org/mediawiki/2009/5/57/Igem_banner_xsmall.jpg" /><br />
</div><br />
<br />
<div class="panel"><br />
<img src="https://static.igem.org/mediawiki/2009/3/37/Finalist_announce_xsmall.jpg" /><br />
</div><br />
<br />
<div class="panel"><br />
<img src="https://static.igem.org/mediawiki/2009/3/38/Blackboard_xsmall.jpg" /><br />
</div><br />
<br />
<div class="panel"><br />
<img src="https://static.igem.org/mediawiki/2009/3/3a/Phage_mascot_xsmall.jpg" /><br />
</div><br />
<br />
<div class="panel"><br />
<img src="https://static.igem.org/mediawiki/2009/9/9e/Presentation_room_xsmall.jpg" /><br />
</div><br />
<br />
<div class="panel"><br />
<img src="https://static.igem.org/mediawiki/2009/a/ab/Kit_plates_xsmall.jpg" /><br />
</div><br />
<br />
</div><br />
</div><br />
<br />
<!-- ### END OF DEMO #1 ### --><br />
<br />
<!-- ### START OF DEMO #2 ### --><br />
<script type="text/javascript"><br />
<br />
stepcarousel.setup({<br />
galleryid: 'imagegallery', //id of carousel DIV<br />
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs<br />
panelclass: 'panel', //class of panel DIVs each holding content<br />
autostep: {enable:false, moveby:1, pause:3000},<br />
panelbehavior: {speed:500, wraparound:true, persist:true},<br />
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},<br />
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels<br />
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']<br />
})<br />
<br />
</script><br />
<br />
<div id="imagegallery" class="stepcarousel"><br />
<div class="belt"><br />
<br />
<div class="panel"><br />
<img src="https://static.igem.org/mediawiki/2009/0/00/Freezer_plates_xsmall.jpg" /><br />
</div><br />
<br />
<div class="panel"><br />
<img src="https://static.igem.org/mediawiki/2009/3/3d/Slovenia_mascot_xsmall.jpg" /><br />
</div><br />
<br />
<div class="panel"><br />
<img src="https://static.igem.org/mediawiki/2009/5/57/Igem_banner_xsmall.jpg" /><br />
</div><br />
<br />
<div class="panel"><br />
<img src="http://i31.tinypic.com/119w28m.jpg" /><br />
</div><br />
<br />
<div class="panel"><br />
<img src="http://i27.tinypic.com/34fcrxz.jpg" /><br />
</div><br />
<br />
</div><br />
</div><br />
<br />
<br />
<p><br />
<b>Current Panel:</b> <span id="statusA"></span> <b style="margin-left: 30px">Total Panels:</b> <span id="statusC"></span><br /><br />
<br />
<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> <br /><br />
<br />
<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><br />
<br />
</p><br />
<br />
<!-- ### END OF DEMO #2 ### --><br />
</body><br />
</html></div>
Meagan