[dglushkov]

Привет, хочу прикрутить к mansory js увеличение картинки по клику, чтобы при этом вся остальные картинки перестраивались. Вот код:

.grid-item {
		width: 20%;
		padding: 4px;
		box-sizing: border-box;
	}
	.w2 {
		width: 40%;
	}
	.grid-item img {
		width: 100%;
		height: auto;
	}

<div class="grid">
  <div class="grid-item">
				<a href="#">
					<img src="/portfolio/img/02-jaguar_1600.jpg" alt="02-jaguar_1600.jpg"/>
				</a>
  </div>

...

  <div class="grid-item">
				<a href="#">
					<img src="/portfolio/img/vystavka-zhurnala-national-geographic-2015-v-peterburge.jpg" alt="vystavka-zhurnala-national-geographic-2015-v-peterburge.jpg"/>
				</a>
  </div>			
</div>

$(document).ready(function() {
		$('.grid').imagesLoaded( function() {
			$('.grid').masonry({itemSelector: '.grid-item'});
		});

		$('.grid-item').click(function(){
				$(this).siblings().removeClass('w2');
				$(this).addClass('w2');
				$('.grid').imagesLoaded( function() {
				  	$('.grid').masonry({itemSelector: '.grid-item', transitionDuration: '1.2s'});
				});		
		});
	});

Всё хорошо работает, кроме первого элемента - сетка пересчитывается коряво - помогите исправить.
Как можно заметить, я также не знаю как правильно объявить функцию, чтобы при событии по клику вызывать ее просто по названию.