Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.11.2017, 05:20
Интересующийся
Отправить личное сообщение для dglushkov Посмотреть профиль Найти все сообщения от dglushkov
 
Регистрация: 22.03.2016
Сообщений: 19

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, 26.11.2017 в 20:03.
Ответить с цитированием
  #2 (permalink)  
Старый 26.11.2017, 09:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

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


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 26.11.2017, 20:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

Последний раз редактировалось рони, 26.11.2017 в 20:26.
Ответить с цитированием
  #4 (permalink)  
Старый 26.11.2017, 21:12
Интересующийся
Отправить личное сообщение для dglushkov Посмотреть профиль Найти все сообщения от dglushkov
 
Регистрация: 22.03.2016
Сообщений: 19

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

Видел это свойство? в документации к скрипту, но ничего не понял.
$('.grid').masonry("layout");


Ответить с цитированием
  #5 (permalink)  
Старый 26.11.2017, 21:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

Последний раз редактировалось рони, 26.11.2017 в 21:33.
Ответить с цитированием
  #6 (permalink)  
Старый 26.11.2017, 21:56
Интересующийся
Отправить личное сообщение для dglushkov Посмотреть профиль Найти все сообщения от dglushkov
 
Регистрация: 22.03.2016
Сообщений: 19

Сообщение от рони Посмотреть сообщение
если не указано иное, ширина расчитывается по первому блоку itemSelector, поэтому нужна
замена первого элемента itemSelector, потому что после клика по нему этот элемент изменяет свою ширину и не может быть эталоном для расчётов.
не понимаю как и когда происходит замена itemSelector
Ответить с цитированием
  #7 (permalink)  
Старый 26.11.2017, 22:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от dglushkov
не понимаю как и когда происходит замена itemSelector
не понимаю ...
было

$('.grid').masonry({itemSelector: '.grid-item', transitionDuration: '1.2s'});
так идёт по первому блоку
так стало
$('.grid').masonry({itemSelector: '.grid-item', transitionDuration: '1.2s', columnWidth: ".grid .standard"});

расчёт по скрытому блоку
Ответить с цитированием
  #8 (permalink)  
Старый 27.11.2017, 05:32
Интересующийся
Отправить личное сообщение для dglushkov Посмотреть профиль Найти все сообщения от dglushkov
 
Регистрация: 22.03.2016
Сообщений: 19

Сколько вопросов можно задать в одной теме?
Можно ли организовать скроллинг к элементу - например, если картинка внизу плитки, чтобы по клику на нее она увеличивалась, плитка пересчитывалась, а экран скроллило по верхней границе элемента.
Пробовал сам через offset().top и scrollTop - не получилось
Ответить с цитированием
  #9 (permalink)  
Старый 27.11.2017, 09:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от dglushkov
Можно ли организовать скроллинг к элементу
да
после строки 9 пост №3 назначить одноразовое срабатывание на завершение перестановки и в этот обработчик поставить скролл
Сообщение от dglushkov
offset().top и scrollTop
ссылка пост №5 - там есть пример, добавить только скролл
Сообщение от dglushkov
Сколько вопросов можно задать в одной теме?
много, если это не пустое бла-бла-бла
Ответить с цитированием
  #10 (permalink)  
Старый 27.11.2017, 23:46
Интересующийся
Отправить личное сообщение для dglushkov Посмотреть профиль Найти все сообщения от dglushkov
 
Регистрация: 22.03.2016
Сообщений: 19

Сообщение от рони Посмотреть сообщение
да
назначить одноразовое срабатывание на завершение перестановки и в этот обработчик поставить скролл
принцип то я понимаю, а вот в коде организовать не могу - покажите пожалуйста
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перестает работать галерея при загрузке через Ajax (Need help) Clodan jQuery 0 20.04.2015 20:18
что за галерея vladimircape Общие вопросы Javascript 1 06.10.2012 21:52
Галерея Ad-Gallery Анатолий Саратовцев Events/DOM/Window 2 28.06.2012 16:35
Выпадающее меню на jQuery + галерея t_i_m_o_n Элементы интерфейса 3 09.05.2012 22:05
Галерея на jQuery flame jQuery 1 14.04.2011 21:53