Mansory галерея

[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'});
				});		
		});
	});

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

[рони]

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")
    });
});

[dglushkov]

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

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

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

[рони]

хотелось бы пояснения по принципу работы скрытого элемента.

если не указано иное, ширина расчитывается по первому блоку itemSelector, поэтому нужна
замена первого элемента itemSelector, потому что после клика по нему этот элемент изменяет свою ширину и не может быть эталоном для расчётов.

сетка пересчитывается коряво

ширину скрытого блока сделать 10%

зависит от вашего css

masonry("layout");

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

[dglushkov]

если не указано иное, ширина расчитывается по первому блоку itemSelector, поэтому нужна
замена первого элемента itemSelector, потому что после клика по нему этот элемент изменяет свою ширину и не может быть эталоном для расчётов.

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

[рони]

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

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

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

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

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

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

[dglushkov]

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

[рони]

Можно ли организовать скроллинг к элементу

да
после строки 9 пост №3 назначить одноразовое срабатывание на завершение перестановки и в этот обработчик поставить скролл

offset().top и scrollTop

ссылка пост №5 - там есть пример, добавить только скролл

Сколько вопросов можно задать в одной теме?

много, если это не пустое бла-бла-бла

[dglushkov]

да
назначить одноразовое срабатывание на завершение перестановки и в этот обработчик поставить скролл

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