User:Meagan/Image Slider

From 2010.igem.org

(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() ...)
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
+
}, 7000); //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>

Revision as of 15:37, 7 July 2010

1 2 3 4