|
|
Line 6: |
Line 6: |
| 1098 XH Amsterdam | | 1098 XH Amsterdam |
| | | |
- | <html>
| |
- | <div class="main_view">
| |
- | <div class="window">
| |
- | <div class="image_reel">
| |
- | <a href="foto1"><img src="https://static.igem.org/mediawiki/2011/d/dc/P1130190.jpg" /></a>
| |
- | <a href="foto2"><img src="https://static.igem.org/mediawiki/2011/9/9a/P1130193.jpg" /></a>
| |
- | <a href="foto3"><img src="https://static.igem.org/mediawiki/2011/4/45/P1130194.jpg" /></a>
| |
- | <a href="foto4"><img src="https://static.igem.org/mediawiki/2011/8/82/Igem_amsterdam_logo.jpg" /></a>
| |
- | </div>
| |
- | </div>
| |
- | <div class="paging">
| |
- | <a href="foto1" rel="1">1</a>
| |
- | <a href="foto2" rel="2">2</a>
| |
- | <a href="foto3" rel="3">3</a>
| |
- | <a href="foto4" rel="4">4</a>
| |
- | </div>
| |
- | <script type="text/javascript"
| |
- | src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
| |
- |
| |
- | <script>
| |
- | $(document).ready(function() {
| |
- | //Paging and Slider Function
| |
- | rotate = function(){
| |
- | var triggerID = $active.attr("rel") - 1; //Get number of times to slide
| |
- | var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
| |
- |
| |
- | $(".paging a").removeClass('active'); //Remove all active class
| |
- | $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
| |
- |
| |
- | //Slider Animation
| |
- | $(".image_reel").animate({
| |
- | left: -image_reelPosition
| |
- | }, 500 );
| |
- |
| |
- | };
| |
- |
| |
- | //Rotation and Timing Event
| |
- | rotateSwitch = function(){
| |
- | play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
| |
- | $active = $('.paging a.active').next(); //Move to the next paging
| |
- | if ( $active.length === 0) { //If paging reaches the end...
| |
- | $active = $('.paging a:first'); //go back to first
| |
- | }
| |
- | rotate(); //Trigger the paging and slider function
| |
- | }, 7000); //Timer speed in milliseconds (7 seconds)
| |
- | };
| |
- |
| |
- | rotateSwitch(); //Run function on launch
| |
- | });
| |
- | </script>
| |
- |
| |
- | </div>
| |
- | </html>
| |
| =17 June 2011= | | =17 June 2011= |
| | | |