SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Location
    Atlanta, GA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help: Simple jQuery click swap image gallery

    This is what I'm trying to do:

    I want a simple image container to swap the image inside it by clicking the nav buttons on the right like 1, 2, 3

    Here's my code:

    HTML
    Code HTML4Strict:
    <div id="item1">
    			<div class="img-container shadow" style="background-image:url(images/gallery/tcg1.jpg)">
    				<img src="images/gallery/tcg1.jpg" width="530" height="421">
    				<img src="images/gallery/tcg2.jpg" width="530" height="421">
    				<img src="images/gallery/tcg3.jpg" width="530" height="421">
    			</div>
     
    			<ul class="nav">
    				<li>1</li>
    				<li>2</li>
    				<li>3</li>
    			</ul>
    		</div>


    Code CSS:
    .img-container {
    	display: block;
        float: left;
        height: 421px;
        margin: 0 20px 65px 0;
        width: 530px;
    	}
    .img-container img {display:none}
    .img-container .show {display:block}
     
    .nav {}
     
    .nav li {
    	background: none repeat scroll 0 0 #eee;
        color: #444444;
        display: block;
        float: left;
        font-family: Courier,Verdana,Geneva,sans-serif;
        font-size: 12px;
        height: 30px;
        line-height: 30px;
        margin: 0;
        text-align: center;
        text-decoration: none;
        width: 30px;
    	border:1px dotted #999;
    }
     
    	.nav li.hover {background:#e23d25; color:white;}


    jQuery
    Code JavaScript:
    $('.nav li').css('cursor','pointer');
     
    	$('.nav li').eq(0).click(function () {
    		$('.img-container img').eq(0).toggleClass("show");
    		$(this).toggleClass("hover");
    	});
    	$('.nav li').eq(1).click(function () {
    		$('.img-container img').eq(1).toggleClass("show");
    		$(this).toggleClass("hover");
    	});
    	$('.nav li').eq(2).click(function () {
    		$('.img-container img').eq(2).toggleClass("show");
    		$(this).toggleClass("hover");
    	});

    My jQuery code is not right. I want it to turn off the "hover" class and the "show" class of the others when you click one. I think I need some kind of if..else? Can someone point me in the right direction on how to write it?

    I have a bg image set on the container div so there's an initial image to view.

    I also need multiple of these on the same page!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by cAPS lOCK View Post
    My jQuery code is not right. I want it to turn off the "hover" class and the "show" class of the others when you click one.
    The standard technique is to turn off all of them, and then to turn on the one that you require.

    Quote Originally Posted by cAPS lOCK View Post
    I also need multiple of these on the same page!
    You can use the context selector to achieve that.

    For example, going up to the parent element where the id starts with item:

    Code javascript:
    var container = $(this).parents('div[id^="item"]');
    $('.img-container img', container).eq(0).toggleClass("show");
    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
  •