Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JQuery image slider not working, oh my head please help!

    So I've struggled for the last while trying to get this to work, but I can't figure it out, I am basically using the code from this site.
    This is what I've done so far (I'm a complete rookie to JQ)

    I've added the:
    Code:
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    inbetween <head> and </head> on my index.htm page.

    then I added

    Code:
    <script>$(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.
    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  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
    
        $(".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  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)
    };
    
    rotateSwitch(); //Run function on launch
    
    //On Hover
    $(".image_reel a").hover(function() {
        clearInterval(play); //Stop the rotation
    }, function() {
        rotateSwitch(); //Resume rotation timer
    });	
    
    //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>
    right after the last chunk of code (but still inside of the <head> tag.

    I went ahead and added the appropriate CSS codes to my css sheet:

    Code:
    /*--Main Container--*/
    .main_view {
    	float: left;
    	position: relative;
    }
    /*--Window/Masking Styles--*/
    .window {
    	height:286px;	width: 790px;
    	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;}
    
    /*--Paging Styles--*/
    .paging {
    	position: absolute;
    	bottom: 40px; right: -7px;
    	width: 178px; height:47px;
    	z-index: 100; /*--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: #fff;
    }
    .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;}
    and lastly I've placed the html <div> codes inside the custom html boxes for my CMS: (I've changed the url inbetween <img src=" " > to my links.

    Code:
    <div class="main_view">
        <div class="window">
            <div class="image_reel">
                <a href="#"><img src="reel_1.jpg" alt="" /></a>
                <a href="#"><img src="reel_2.jpg" alt="" /></a>
                <a href="#"><img src="reel_3.jpg" alt="" /></a>
                <a href="#"><img src="reel_4.jpg" alt="" /></a>
            </div>
        </div>
        <div class="paging">
            <a href="#" rel="1">1</a>
            <a href="#" rel="2">2</a>
            <a href="#" rel="3">3</a>
            <a href="#" rel="4">4</a>
        </div>
    </div>
    Everything on my page works, all my custom styling I've done in css and any html i've input in the HTML files. But I can't for the life of me get this to work. The pictures I've linked to show up stacked one on top of each other in the editor (CMS) BUT when I publish I only see the first linked image and it wont rotate!

    I don't know if i've placed them in the wrong places or in the wrong order or something, I just have no clue where I've gone wrong. Can someone spot a mistake or a workaround or a better script? any help is appreciated!

  • #2
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    BAH HAHA, i figured it out...
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

    forgot that...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •