User:Meagan/Image Slider
From 2010.igem.org
< User:Meagan(Difference between revisions)
(New page: <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() ...) |
|||
(8 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<head> | <head> | ||
- | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1. | + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> |
<script type="text/javascript"> | <script type="text/javascript"> | ||
$(document).ready(function() { | $(document).ready(function() { | ||
- | |||
- | |||
- | |||
- | //Get size of | + | //Set Default State of each portfolio piece |
- | var imageWidth = $(".window").width(); | + | $(".paging").show(); |
- | var imageSum = $(".image_reel img").size(); | + | $(".paging a:first").addClass("active"); |
- | var imageReelWidth = imageWidth * imageSum; | + | |
+ | //Get size of images, how many there are, then determin the size of the image reel. | ||
+ | var imageWidth = $(".window").width(); | ||
+ | var imageSum = $(".image_reel img").size(); | ||
+ | var imageReelWidth = imageWidth * imageSum; | ||
+ | |||
+ | //Adjust the image reel to its new size | ||
+ | $(".image_reel").css({'width' : imageReelWidth}); | ||
+ | |||
+ | //Paging + 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 + Timing Event | |
- | + | rotateSwitch = function(){ | |
- | + | play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds | |
- | + | $active = $('.paging a.active').next(); | |
- | + | if ( $active.length === 0) { //If paging reaches the end... | |
- | + | $active = $('.paging a:first'); //go back to first | |
- | }; | + | } |
- | + | rotate(); //Trigger the paging and slider function | |
- | //Rotation | + | }, 5000); //Timer speed in milliseconds (3 seconds) |
- | rotateSwitch = function(){ | + | }; |
- | + | ||
- | + | rotateSwitch(); //Run function on launch | |
- | + | ||
- | + | //On Hover | |
- | + | $(".image_reel a").hover(function() { | |
- | + | clearInterval(play); //Stop the rotation | |
- | + | }, function() { | |
- | }; | + | rotateSwitch(); //Resume rotation |
- | + | }); | |
- | rotateSwitch(); //Run function on launch | + | |
- | + | //On Click | |
- | //On Hover | + | $(".paging a").click(function() { |
- | $(".image_reel a").hover(function() { | + | $active = $(this); //Activate the clicked paging |
- | + | //Reset Timer | |
- | }, function() { | + | clearInterval(play); //Stop the rotation |
- | + | rotate(); //Trigger rotation immediately | |
- | }); | + | rotateSwitch(); // Resume rotation |
- | + | return false; //Prevent browser jump to link anchor | |
- | //On Click | + | }); |
- | $(".paging a").click(function() { | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
}); | }); | ||
+ | </script> | ||
- | |||
<style> | <style> | ||
Line 70: | Line 73: | ||
float: left; | float: left; | ||
position: relative; | position: relative; | ||
+ | border: 2px solid black; | ||
+ | width: 960px; | ||
} | } | ||
/*--Window/Masking Styles--*/ | /*--Window/Masking Styles--*/ | ||
.window { | .window { | ||
- | height:286px; width: | + | height:286px; width: 650px; |
overflow: hidden; /*--Hides anything outside of the set width/height--*/ | overflow: hidden; /*--Hides anything outside of the set width/height--*/ | ||
position: relative; | position: relative; | ||
Line 86: | Line 91: | ||
.paging { | .paging { | ||
position: absolute; | position: absolute; | ||
- | bottom: | + | bottom: 10px; right: 357px; |
width: 178px; height:47px; | width: 178px; height:47px; | ||
z-index: 100; /*--Assures the paging stays on the top layer--*/ | z-index: 100; /*--Assures the paging stays on the top layer--*/ | ||
Line 116: | Line 121: | ||
<div class="window"> | <div class="window"> | ||
<div class="image_reel"> | <div class="image_reel"> | ||
- | + | <img src="https://static.igem.org/mediawiki/2010/1/1d/Jam_09_jillians_rotator.jpg" alt="" /> | |
- | + | <img src="https://static.igem.org/mediawiki/2010/8/86/Jam_09_rotator_1.jpg" alt="" /> | |
- | + | <img src="https://static.igem.org/mediawiki/2010/2/23/Jam_09_awards_rotator.jpg" alt="" /> | |
- | + | <a href="http://www.designbombs.com/tag/slider/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_4.jpg" alt="" /></a> | |
</div> | </div> | ||
</div> | </div> | ||
Line 129: | Line 134: | ||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
+ | Include: | ||
+ | <ul> | ||
+ | <li>team list</li> | ||
+ | <li>team wikis</li> | ||
+ | </ul> | ||
+ | |||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 01:03, 29 September 2010
Include:
- team list
- team wikis