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 1 of 1

Thread: jQuery arrows

  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Location
    Maryland, USA
    Posts
    165
    Thanks
    12
    Thanked 0 Times in 0 Posts

    jQuery arrows

    Hi,

    I'm trying to make a thumbnail slider that has a left and right arrow for sliding in a new set of thumbnails. I'm new to jQuery and javascript so I may be missing something obvious, but I can't figure out what's wrong with my code. When I click on the arrows, nothing happens. Here's a code for the left arrow, take a look:

    Code:
    	$(function arrows(i) {
    		
    		$('#left_arrow').click( function (){
    			var number = i +1;
    			var next = i + 2;
    
    			$('#cluster' + number).animate({opacity: 0,right:"400px"}, 400, function(){
                                  $(this).css({right:"-3000px",opacity:1});
    			});
    		
    			if($(".thumb_cluster").length > number){
    				$('#cluster'+ next).animate({left:"100px"},400);
    			}
    			else{
    				$('#cluster1').animate({left:"100px"},400);
    			}
    			return false;
    		});
    
    	});
    Here's some sample HTML:

    Code:
        <div id="thumbs">
    	<img src="images/left_arrow.png" id="left_arrow">
    	<div class="thumb_cluster" id="cluster1">
                <img src='/exhibition_1/piece_thumbs/GCaldwellAugurweb.jpg' alt='The Augur' class='piece_thumb'/>
                <img src='/exhibition_1/piece_thumbs/GCaldwellAugurdetweb.jpg' alt='The Augur' class='piece_thumb'/>
                <img src='/exhibition_1/piece_thumbs/GCaldwellteethsmallweb.jpg' alt='Twenty-two teeth' class='piece_thumb'/>
                <img src='/exhibition_/piece_thumbs/ADymond2small.jpg' alt='I’m Pretty Sure That Bruce Wayne is Batman' class='piece_thumb'/>
            </div> 
    
            <div class='thumb_cluster' id='cluster2'> 
                 <img src='/exhibition_1/piece_thumbs/ADymondbrucesmallweb.jpg' alt='I’m Pretty Sure That Bruce Wayne is Batman' class='piece_thumb'/>
                 <img src='/exhibition_1/piece_thumbs/ZFriedphone2smallweb.jpg' alt='Untitled' class='piece_thumb'/>
                 <img src='/exhibition_1/piece_thumbs/ZFriedGoodsmallweb.jpg' alt='It’s Good Sometimes' class='piece_thumb'/>
                 <img src='/exhibition_1/piece_thumbs/ZFriedSauvageweb.jpg' alt='Untitled (Triptych Sauvage)' class='piece_thumb'/>
                 <img src='/exhibition_1/piece_thumbs/CJonesblindsmallweb.jpg' alt='Double Blind' class='piece_thumb'/>
            </div> 
        <img src="images/right_arrow.png" id="right_arrow">
    </div>
    here's the css:

    Code:
    #thumbs {
    	margin: 10px auto;
    	height: 64px;
    	padding: 10px;
    	width: 860px;
    	position:relative;
    	overflow:visible;
    }
    #left_arrow {
    	float: left;
    }
    #right_arrow {
    	float: right;
    }
    .thumb_cluster{
    	position:absolute;
    	top:0;
    	left:-3000px;
    	width: 715px;
    }
    #cluster1{
    left: 100px;
    }
    I have feeling the the problem is with the jQuery, can any please tell me if they see the problem? I'd really appreciate it.

    Thanks
    Last edited by madmatter23; 12-05-2008 at 07:26 PM.


 

Posting Permissions

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