Team:MSOE Milwaukee/Undergrads

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<HTML>
<HTML>
 +
<HEAD>
  <script type="text/javascript>
  <script type="text/javascript>
/**
/**
Line 931: Line 932:
</script>
</script>
 +
</HEAD>
 +
<body>
 +
<div id="wrapper">
 +
 +
<div id="examples_outer">
 +
<h2>Sliderman.js &mdash; Demo 1</h2>
 +
 +
<div id="slider_container_1">
 +
 +
<div id="SliderName">
 +
 +
<a href="#1">
 +
<img src="img/1.jpg" title="Description from Image Title" />
 +
</a>
 +
<div class="SliderNameDescription">
 +
<img src="img/2.jpg" height="40" style="float:left;margin-right:5px;" />
 +
<strong>Nulla luctus congue fermentum.</strong><br />Integer <a href="javascript:void(0);">elementum</a> convallis lorem eu volutpat. Suspendisse fermentum arcu in lorem fringilla ultricies. Nam vel diam nisi.
 +
</div>
 +
<a href="#2">
 +
<img src="img/2.jpg" />
 +
</a>
 +
<img src="img/3.jpg" />
 +
<div class="SliderNameDescription"><a href="#3">Link</a></div>
 +
<img src="img/4.jpg" />
 +
<div class="SliderNameDescription"><strong>Nullam nec velit vel leo tristique commodo.</strong><br />Nulla facilisi. Fusce lacus massa, ullamcorper sed hendrerit quis, venenatis eget tortor.</div>
 +
</div>
 +
<div class="c"></div>
 +
<div id="SliderNameNavigation"></div>
 +
<div class="c"></div>
 +
 +
<script type="text/javascript">
 +
 +
// we created new effect and called it 'demo01'. We use this name later.
 +
Sliderman.effect({name: 'demo01', cols: 10, rows: 5, delay: 10, fade: true, order: 'straight_stairs'});
 +
 +
var demoSlider = Sliderman.slider({container: 'SliderName', width: 640, height: 300, effects: 'demo01',
 +
display: {
 +
pause: true, // slider pauses on mouseover
 +
autoplay: 3000, // 3 seconds slideshow
 +
always_show_loading: 200, // testing loading mode
 +
description: {background: '#ffffff', opacity: 0.5, height: 50, position: 'bottom'}, // image description box settings
 +
loading: {background: '#000000', opacity: 0.2, image: 'img/loading.gif'}, // loading box settings
 +
buttons: {opacity: 1, prev: {className: 'SliderNamePrev', label: ''}, next: {className: 'SliderNameNext', label: ''}}, // Next/Prev buttons settings
 +
navigation: {container: 'SliderNameNavigation', label: '&nbsp;'} // navigation (pages) settings
 +
}});
 +
 +
</script>
 +
 +
<div class="c"></div>
 +
</div>
 +
<div class="c"></div>
 +
</div>
 +
 +
<div class="c"></div>
 +
</div>
 +
</body>
</HTML>
</HTML>

Revision as of 23:08, 17 June 2013

Sliderman.js — Demo 1

Nulla luctus congue fermentum.
Integer elementum convallis lorem eu volutpat. Suspendisse fermentum arcu in lorem fringilla ultricies. Nam vel diam nisi.
Link
Nullam nec velit vel leo tristique commodo.
Nulla facilisi. Fusce lacus massa, ullamcorper sed hendrerit quis, venenatis eget tortor.

Retrieved from "http://2013.igem.org/Team:MSOE_Milwaukee/Undergrads"