Javascript-function zum Austauschen von Bildern

Ich versuche, eine einfache function zu machen, die kleine Bilder mit einem großen Bild onclick ausschaltet.

Das folgende Setup funktioniert beim ersten Klick, aber danach geht es irgendwie drunter und drüber und die Bilder beginnen merkwürdig zu wechseln.

Ich habe den kleinen Bildelementen, die “data-largeSrc” genannt werden, ein Attribut hinzugefügt, das die URL einer größeren Version des Bildes anstelle des Miniaturbildes verwendet, wenn es in der größeren Größe angezeigt wird.

Kann jemand sehen, was ich falsch mache?

Html:

'hero-image')); ?>

Skript:

  $('.gallery-image').on('click',function(){ var big_src = $('.hero-image').attr('src'); $('.hero-image').attr('src', $(this).attr('data-largeSrc')); $(this).attr('src', big_src); $(this).attr('data-largSrc', big_src); });  

Sie können die Live-Seite sehen, mit der ich hier arbeiten möchte: http://www.theatreoffjackson.org/sara-torres/project/45/test-project-1/

Solutions Collecting From Web of "Javascript-function zum Austauschen von Bildern"