jQuery Forum

Hey people,

I have this image slider from the internet but it doesn't work properly.

I have changed the position of the first image so it would fit in the squary where I want to place it.

The CSS:

1.  /*--Main Container--*/
   .main_view {
    float: left;
    position: relative;
    
   }
   /*--Window/Masking Styles--*/
   .window {
    height: 264px; width: 240px;
    overflow: hidden; /*--Hides anything outside of the set width/height--*/
    position: absolute;
    left:914px;
    top:377px;
   }
   .image_reel {
    position: absolute;
    top: 0; left: 0;
    
   }
   .image_reel img {float: left;
   position: relative;}
2. /*--Paging Styles--*/
   .paging {
    position: absolute;
    bottom: -90px; right: 190px;
    width: 178px; height:47px;
    z-index: 10; /*--Assures the paging stays on the top layer--*/
    text-align: center;
    line-height: 40px;
    background: url(paging_bg2.png) no-repeat;
    display: none; /*--Hidden by default, will be later shown with jQuery--*/
   }
   .paging a {
    padding: 5px;
    text-decoration: none;
    color: #ffff;
   }
   .paging a.active {
    font-weight: bold;
    background: #920000;
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
   }
   .paging a:hover {font-weight: bold;}

The jq:

1. $(document).ready(function() {
    //Code goes here
    //Show the paging and activate its first link
   $(".paging").show();//Zet hier de getallen aan of uit
   $(".paging a:first").addClass("active");
2. //Get size of the image, how many images there are, then determin the size of the image reel.
   var imageWidth = $(".window").width ();
   var imageSum = $(".image_reel img").size();
   var imageReelWidth = imageWidth * imageSum;
3. //Adjust the image reel to its new size
   $(".image_reel").css({'width' : imageReelWidth});
4. //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
5.     $(".paging a").removeClass('active'); //Remove all active class
       $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
6.     //Slider Animation
       $(".image_reel").animate({
           left: -image_reelPosition
       }, 500 );//animation duration
7. };
8. //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)
   };
9. rotateSwitch(); //Run function on launch
   //On Hover
   $(".image_reel a").hover(function() {
       clearInterval(play); //Stop the rotation
   }, function() {
       rotateSwitch(); //Resume rotation timer
   }); 
10. //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
    });
    });

I searched I changed and I asked… but nobody seems to know how.. so I hoped you guys can help me out? Thanks for reading.

Bram.

Sorry for my bad English.