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.4.1/jquery.min.js"></script>
+
<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() {
-
//Show the paging and activate its first link
 
-
$(".paging").show();
 
-
$(".paging a:first").addClass("active");
 
-
//Get size of the image, how many images there are, then determin the size of the image reel.
+
//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
-
//Adjust the image reel to its new size
+
$(".paging a").removeClass('active'); //Remove all active class
-
$(".image_reel").css({'width' : imageReelWidth});
+
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
-
 
+
-
//Paging  and Slider Function
+
//Slider Animation
-
rotate = function(){
+
$(".image_reel").animate({  
-
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
+
left: -image_reelPosition
-
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
+
}, 500 );
-
 
+
-
    $(".paging a").removeClass('active'); //Remove all active class
+
};  
-
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
+
-
 
+
//Rotation + Timing Event
-
    //Slider Animation
+
rotateSwitch = function(){
-
    $(".image_reel").animate({
+
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
-
        left: -image_reelPosition
+
$active = $('.paging a.active').next();
-
    }, 500 );
+
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 and Timing Event
+
}, 5000); //Timer speed in milliseconds (3 seconds)
-
rotateSwitch = function(){
+
};
-
    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
+
-
        $active = $('.paging a.active').next(); //Move to the next paging
+
rotateSwitch(); //Run function on launch
-
        if ( $active.length === 0) { //If paging reaches the end...
+
-
            $active = $('.paging a:first'); //go back to first
+
//On Hover
-
        }
+
$(".image_reel a").hover(function() {
-
        rotate(); //Trigger the paging and slider function
+
clearInterval(play); //Stop the rotation
-
    }, 7000); //Timer speed in milliseconds (7 seconds)
+
}, 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
-
    clearInterval(play); //Stop the rotation
+
//Reset Timer
-
}, function() {
+
clearInterval(play); //Stop the rotation
-
    rotateSwitch(); //Resume rotation timer
+
rotate(); //Trigger rotation immediately
-
});
+
rotateSwitch(); // Resume rotation
-
 
+
return false; //Prevent browser jump to link anchor
-
//On Click
+
});
-
$(".paging a").click(function() {
+
-
    $active = $(this); //Activate the clicked paging
+
-
    //Reset Timer
+
-
    clearInterval(play); //Stop the rotation
+
-
    rotate(); //Trigger rotation immediately
+
-
    rotateSwitch(); // Resume rotation timer
+
-
    return false; //Prevent browser jump to link anchor
+
});
});
 +
</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: 790px;
+
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: 40px; right: -7px;
+
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">
-
            <a href="#"><img src="reel_1.jpg" alt="" /></a>
+
                    <img src="https://static.igem.org/mediawiki/2010/1/1d/Jam_09_jillians_rotator.jpg" alt="" />
-
            <a href="#"><img src="reel_2.jpg" alt="" /></a>
+
                    <img src="https://static.igem.org/mediawiki/2010/8/86/Jam_09_rotator_1.jpg" alt="" />
-
            <a href="#"><img src="reel_3.jpg" alt="" /></a>
+
                    <img src="https://static.igem.org/mediawiki/2010/2/23/Jam_09_awards_rotator.jpg" alt="" />
-
            <a href="#"><img src="reel_4.jpg" alt="" /></a>
+
                    <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

1 2 3 4
Include:
  • team list
  • team wikis