3 Bilder durch anklicken abwechselnd vergrößern/verkleinern

[Matthias Apsel]

Om nah hoo pez nyeetz, Chriss!

Meine Lösungsskizze hat den Nachteil, dass alle Bilder in groß geladen werden und den Vorteil, dass beim Ändern keine Unterbrechungen zu sehen sind.

HTML

<figure class="gallery">  
  <img scr="..." alt="aussagekräftiger Alernativtext" class="zoom">  
  <img scr="..." alt="aussagekräftiger Alernativtext">  
  <img scr="..." alt="aussagekräftiger Alernativtext">  
</figure>

JavaScript (JQuery)

$('.gallery > img').click(function(){  
  $('.gallery > .zoom').removeClass('zoom');  
  $(this).addClass('zoom');  
});

CSS

.gallery > img {  
  width: 30%;  
  transition: width 0.2s ease-in-out;  
}  
.gallery > img.zoom {  
  width: 100%;  
  transition: width 0.2s ease-in-out;  
}

Matthias