SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    js previous link not working

    Hi, I have some jquery functionality in place where by clicking on "more" a div replaces the old div. This works fine but I can#t seem to
    get the "previous" link to work, it simply refreshes the current content instead of replacing the div with the old one.

    Here's the code. Any help would be much appreciated:

    HTML Code:
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){
    
    //Larger thumbnail preview 
    
    $("ul.thumb li").hover(function() {
    	$(this).css({'z-index' : '10'});
    	$(this).find('img').addClass("hover").stop()
    		.animate({
    			marginTop: '-40px', 
    			marginLeft: '-40px', 
    			top: '50%', 
    			left: '50%', 
    			//width: '174px', 
    			//height: '174px',
    			width: '70px', 
    			height: '66px',
    			//padding: '20px'
    		}, 200);
    	
    	} , function() {
    	$(this).css({'z-index' : '0'});
    	$(this).find('img').removeClass("hover").stop()
    		.animate({
    			marginTop: '0', 
    			marginLeft: '0',
    			top: '0', 
    			left: '0', 
    			//width: '100px', 
    			//height: '100px',
    			width: '65px', 
    			height: '58px', 
    			//padding: '5px'
    		}, 400);
    });
    
    //Swap Image on Click
    	$("ul.thumb li a").click(function() {
    		
    		var mainImage = $(this).attr("href"); //Find Image Name
    		$("#main_view img").attr({ src: mainImage });
    		return false;		
    	});
     
    });
    
            $(function()
            {
    
     $('div.showarea').fadeOut(0);
        $('div.showarea:first').fadeIn(500);
        
        $('a.leftarrow, a.rightarrow').click( function (ev) {
            //prevent browser jumping to top
            ev.preventDefault();
    
            //get current visible item
            var $visibleItem = $('div.showarea:visible');
            
            //get total item count
            var total =  $('div.showarea').length;
    
            //get index of current visible item
            var index = $visibleItem.prevAll().length;
              
            //if we click next increment current index, else decrease index
            $(this).attr('href') === '#carouselNext' ? index++ : index--;
    		
    		//if we click next increment current index, else decrease index
            //$(this).attr('href') === '#carouselPrev' ? index-- : index++;
    
            //if we are now past the beginning or end show the last or first item
            if (index === -1){
               index = total-1;
            }
            if (index === total){
               index = 0
            }
            
            //hide current show item
            $visibleItem.hide();
    
            //fade in the relevant item
            $('div.showarea:eq(' + index + ')').fadeIn(500);
        
        });
    
            });
    </script>
    
    
        <div class="maincarousel">
           <div class="showarea">
    	   
    			<div class="container">
    			
    			<div id="main_view">
    			<a href="#" title="" target="_blank"><img src="images/test.jpg" alt="" /></a><br />
    			</div>
    			
    			<ul class="thumb">
    			
    				<li><a href="images/test-1.jpg"><img src="images/test-1.jpg" alt="" /></a></li>
    				<li><a href="images/test-2.jpg"><img src="images/test-2.jpg" alt="" /></a></li>
    				<li><a href="images/test-3.jpg"><img src="images/test-3.jpg" alt="" /></a></li>
    				<li><a href="#carouselNext" class="rightarrow" title="Next">More</a></li>
    			
    			</ul>
    			</div> 
    	   
    	   </div>
    	   
        <div class="maincarousel">
           <div class="showarea">
    	   
    			<div class="container">
    			
    			<div id="main_view">
    			<a href="#" title="" target="_blank"><img src="images/test-1.jpg" alt="" /></a><br />
    			</div>
    			
    			<ul class="thumb">
    			
    				<li><a href="images/test-1.jpg"><img src="images/test-1.jpg" alt="" /></a></li>
    				<li><a href="images/test-2.jpg"><img src="images/test-2.jpg" alt="" /></a></li>
    				<li><a href="images/test-3.jpg"><img src="images/test-3.jpg" alt="" /></a></li>
    				<li><a href="#carouselPrev" class="leftarrow" title="Previous">Previous</a></li>
    			
    			</ul>
    			</div>  
    	   
    	   </div>

  2. #2
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the functionality doesn#t appear to be working at all in ie, grr.

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone know why the previous link isn't working? Thanks

    GP

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by gluttonous_pet View Post
    Anyone know why the previous link isn't working?
    It seems to work for me. Both of them.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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