CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jShoop
jShoop

Reputation: 411

Mutually Exclusive Images

I would like to have a group of images where only one is expanded at a time. The others will be shrunken down to 10% their natural size. Through a click event I would like to be able to select a single image and the other photo that is selected at the time will shrink back to 10%. 

<script>      //To expand an image back to full size
    $(document).ready(function(){
        $("img").click(function(){
            $(this).css("width","100%");
        });
    });
</script>

Without giving a unique ID to each image and spending lot's of time to shrink back the others, how would I make the image exclusively full size?

For those that would like to see the HTML:

<div>
    <img class="shrink thick-border" src="img/bentley.jpg">
</div>
<div>
    <img class="shrink thick-border" src="img/classic.jpg">
</div>
<div>
    <img class="shrink thick-border" src="img/ferrari.jpg">
</div>
<div>
    <img class="shrink thick-border" src="img/maseratti.jpg">
</div>

Upvotes: 1

Views: 103

Answers (2)

Balachandran
Balachandran

Reputation: 9637

You can create one css class with width 100% , you can add and remove when img is clicked

css:

.maxSize{
    width:100%;
}

JS

 $("img").click(function(){
            $("img").removeClass('maxSize')
            $(this).addClass('maxSize');
        });

Fiddle

Upvotes: 5

raviture
raviture

Reputation: 1059

Use following:

$(document).ready(function(){
    $("img").click(function(){
        $('img').each(function(){$(this).css('width', '10%');});
        $(this).css("width","100%");
    });
});

Upvotes: 1

Related Questions