Mansory галерея
 

Привет, хочу прикрутить к 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'});
				});		
		});
	});

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

dglushkov,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

dglushkov,
добавьте скрытый элемент в контейнере и его укажите его селектор в качестве источника ширины в строке 3.

.grid  .standard { width: 20%; height: 0;  visibility: hidden; border: none;}

<div class='grid'>...<div class="standard"></div></div>

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

Большое спасибо! :dance: :dance: :dance: Всё прекрасно срабатывает, но только если :stop: ширину скрытого блока сделать 10%. В целях саморазвития, конечно, хотелось бы пояснения по принципу работы скрытого элемента. :help:

Видел это свойство? в документации к скрипту, но ничего не понял. :blink:

$('.grid').masonry("layout");

:victory:

если не указано иное, ширина расчитывается по первому блоку itemSelector, поэтому нужна
замена первого элемента itemSelector, потому что после клика по нему этот элемент изменяет свою ширину и не может быть эталоном для расчётов. зависит от вашего css
перерасчёт положения блоков в контейнере.
если указать фиксированную ширину (число а не селектор) в columnWidth - дополнительного блока не нужно, но не будет адаптации.
в документации это всё есть, и даже пример на увеличение, но с фиксированной шириной.
Click item to toggle size https://masonry.desandro.com/methods.html

не понимаю как и когда происходит замена itemSelector :write:

не понимаю ...
было

$('.grid').masonry({itemSelector: '.grid-item', transitionDuration: '1.2s'});

так идёт по первому блоку
так стало

$('.grid').masonry({itemSelector: '.grid-item', transitionDuration: '1.2s', columnWidth: ".grid .standard"});

расчёт по скрытому блоку

Сколько вопросов можно задать в одной теме? :)
Можно ли организовать скроллинг к элементу - например, если картинка внизу плитки, чтобы по клику на нее она увеличивалась, плитка пересчитывалась, а экран скроллило по верхней границе элемента.
Пробовал сам через offset().top и scrollTop - не получилось :blink:

да
после строки 9 пост №3 назначить одноразовое срабатывание на завершение перестановки и в этот обработчик поставить скролл ссылка пост №5 - там есть пример, добавить только скролл
много, если это не пустое бла-бла-бла

принцип то я понимаю, а вот в коде организовать не могу - покажите пожалуйста :help: