/*--Main Container--*/ .main-image { float: left; position: relative; } /*--Window/Masking Styles--*/ .window { height:350px; width:350px; overflow: hidden; /*--Hides anything outside of the set width/height--*/ position: relative; } .image_reel { position: absolute; top: 0; left: 0; } .image_reel img {float: left;}
1 / 2 / 3 / 4 / 5 / 6 / 7 / 8
$(document).ready(function() { //Set Default State of each portfolio piece $(".main-image-navi").show(); $(".main-image-navi a:first").addClass("main-image-active"); //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}); //main-image-navi + 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 $(".main-image-navi a").removeClass('main-image-active'); //Remove all active class $active.addClass('main-image-active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation if(image_reelPosition==0) {$(".image_reel").css('left',0)} else {$(".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 = $('.main-image-navi a.main-image-active').next(); if ( $active.length === 0) { //If main-image-navi reaches the end... $active = $('.main-image-navi a:first'); //go back to first } rotate(); //Trigger the main-image-navi and slider function }, 8000); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation }); //On Click $(".main-image-navi a").click(function() { $active = $(this); //Activate the clicked main-image-navi //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); });