SitePoint Sponsor

User Tag List

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

    basic jquery help!

    Hi

    I'm new to jquery and have been trying to do something which is probably really simple! My client would like a photo gallery and on the left hand side is a thumbnail with a description of a project and when this is clicked on the image turns from black and white to colour, the text becomes darker and the large image related to the thumbnail is show on the right hand side.

    I'm stumbling at the first hurdle. I can get the text to turn darker and have found a piece of jquery which makes the thumbnail turn to colour BUT I'd like these changes to revert back to B&W thumbnail & lighter text when I click on another thumbnail. At the moment when I click elsewhere they stay as the changed state. Have tried a few things but I'm clearly missing the obvious.

    Any help much appreciated!

    This is my jquery:
    HTML Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
    
    $(document).ready(function() {
    	
    	$("ul.gallery li").click(function() { //On click...
    		
    		var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
    		
    		//Set a background image(thumbOver) on the &lt;a&gt; tag 
    		$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
    		//Fade the image to 0 
    		$(this).find("span").stop().fadeTo('normal', 0 , function() {
    			$(this).hide() //Hide the image after fade
    		}); 
    	} , function() { //on hover out...
    		//Fade the image to 1 
    		$(this).find("span").stop().fadeTo('normal', 1).show();
    	});
    
    });
    
    
    //Change H2 colour
    $(document).ready(function() {
    	
    	$("ul.gallery li h2").click(function() { //On click...
    	$(this).css("color","#666");	
    		
    	});
    
    });
    </script>
    This is my code:
    HTML Code:
    <ul class="gallery">
    <li><a href="#" class="thumb"><span><img src="" alt="" /></span></a>
    <h2><strong>Title goes here</strong>Description goes here</h2>
    <div class="large"><img src="" alt="" /></div>
    </li>
    </ul>
    The CSS is:
    HTML Code:
    #gallery {float: left;position:relative; width:800px; height:433px; padding-top: 160px;}
    #gallery .con {height: 360px;width:400px;}
    
    ul.gallery {width: 300px;list-style: none;margin: 0; padding: 0;}
    ul.gallery li {float: left;	margin: 0px; padding: 0;display: inline;height: 92px;}
    ul.gallery li a.thumb {width: 92px;height: 69px;cursor: pointer;display:block;float:left;}
    ul.gallery li span { /*--Used to crop image--*/	width: 92px;height: 69px;overflow: hidden;	display: block;}
    ul.gallery li a.thumb:hover {}
    ul.gallery li h2 {font-size: 1em;font-weight: normal;margin: 0; padding: 0px;width: 260px;display:block;position:relative; left: 102px; top: -73px;color: #ccc;}
    ul.gallery li h2:hover {cursor:pointer;}
    ul.gallery li a {text-decoration: none; display: block;}
    
    ul.gallery li div.large {display:none; border:0; width:400px; background:#fff; text-align:center;height:593px;}
    ul.gallery li:hover div.large {display:block; position:absolute; left:400px; top:0px; z-index:10; height:593px;}
    ul.gallery li:active div.large {display:block; position:absolute; left:400px; top:0px; z-index:5; height:593px;}
    ul.gallery li:focus div.large {display:block; position:absolute; left:400px; top:0px; z-index:5; outline:0; height:593px;width: 400px;}

  2. #2
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first issue I see is that your function to change the thumbs back isn't actually bound to anything. It looks like part of a .hover() set, but is being passed to .click()

    I would personally approach this by binding the click function to the gallery, then use a handler to sort out what happened.

    I don't have the time to write the full code for this right now, but I will describe the process so that you can see the steps involved.

    Code:
    $('ul.gallery').click(function(evt){
     //Get the target of the event
    
     //If that target does not have the class 'activeThumb' find the element that does have .activeThumb, and fade it back to normal.
    
     //If the target was a thumb and does not have .activeThumb class, fade it to color and give it the class 'activeThumb'
    
    })
    I hope this helps. I wish I had more time to go into depth here. If you need any more help, I would be glad to assist you later.

    Good luck!


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
  •