Взаимные Исключительные Изображения

Question

Я хотел бы иметь группу изображений, где только один расширяется за раз. Остальные будут сокращены до 10% их натурального размера. Через событие щелчка я хотел бы иметь возможность выбрать одно изображение, а другая фотография, выбранная в то время, будет уменьшаться до 10%.

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

Не давая уникальный идентификатор времени каждого изображения, и тратить лота, чтобы сжиматься другие, как бы я сделать изображение исключительно полный размер?

Для тех, кто хотел бы видеть 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> 

Answer 1

Вы можете создать один класс CSS с шириной 100%, вы можете добавлять и удалять, когда IMG щелкают

CSS:

.maxSize{ 
    width:100%; 
} 

JS

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

Fiddle

Answer 2

Используйте следующее:

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