jQuery Element Swap

Question

I have 3 divs where only one is visible by default, they each contain information about a product. Below this divs is a list of 3 images which are images of the products. By default of course the 1st list item is selected and has class="selected". When a different product image is clicks then class="selected" moves to that list item and the div above it changes to hidden and the div containing the other product information needs to appear.

I have searched all over the place for a plugin which can do what I want, they are all limited in some way which stops me doing from doing it.

And I have just noticed the blatant mispelling in the title to this question, sorry guys :) — zuk1
– zuk1, Commented Oct 24, 2008 at 12:02

Jeff Fritz · Accepted Answer · 2008-10-24 12:14:10Z

2

Consider the following code:

<img id="img1" src="1.jpg" desc="d1" class="selected prodImg" />
<img id="img2" src="2.jpg" desc="d2" class="prodImg" />
<img id="img3" src="3.jpg" desc="d3" class="prodImg"/>

<div id="d1">description 1</div>
<div id="d2" class="hidden">description 2</div>
<div id="d3" class="hidden">description 3</div>

<script>

    $(".prodImg").click(function() {

        if ($(this).hasClass("selected")) return;

        $("#" + $(".selected").attr("desc")).addClass("hidden");
        $(".selected").removeClass("selected");

        $("#" + $(this).attr("desc")).removeClass("hidden");
        $(this).addClass("selected");

    });

</script>

This should get you pretty close. You need to define the relationship between your images and divs... so I added a 'desc' attribute to the images. The extra 'prodImg' class on the images allows you to ensure that only those images are being wired up for this type of swap in and out behavior.

answered Oct 24, 2008 at 12:14

Jeff Fritz

9,8817 gold badges45 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zuk1 Over a year ago

Can you not just hook it up so you can link the images to #prod1 #prod2 etc etc? And the divs that are linked too are the ones which will be displayed?

redsquare Over a year ago

yeah, custom attributes are grim, just use index if there is a 1 to 1 relationship

Markus Jarderot · Accepted Answer · 2008-10-24 12:22:23Z

1

The Acordian widget has some similar functionality. If you place the images in the headers you would get the effect you want.

Look at http://docs.jquery.com/UI/Accordion for more information.

answered Oct 24, 2008 at 12:22

Markus Jarderot

89.7k23 gold badges141 silver badges142 bronze badges

1 Comment

zuk1 Over a year ago

Sorry, cannot do due to the way it would be formatted. It has to be like a product window with the three product images below, and the product info in the product window just changes.

gacon · Accepted Answer · 2009-08-10 08:29:02Z

0

<script>

    $(".prodImg").click(function() {

        if ($(this).hasClass("selected")) return;


        $('.prodImg').removeClass('selected');

        $(this).addClass('selected');

        var name = $(this).attr('desc');

        $('.'+name).removeClass();
        $('.'+name).addClass('');       

    });

</script>

I hope this can help you!

answered Aug 10, 2009 at 8:29

gacon

2,1354 gold badges21 silver badges32 bronze badges

Collectives™ on Stack Overflow

jQuery Element Swap

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related