Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Mansory галерея (https://javascript.ru/forum/events/71521-mansory-galereya.html)

dglushkov 26.11.2017 05:20
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'});
				});		
		});
	});


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

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

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


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

рони 26.11.2017 20:20
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 26.11.2017 21:12
Большое спасибо! :dance: :dance: :dance: Всё прекрасно срабатывает, но только если :stop: ширину скрытого блока сделать 10%. В целях саморазвития, конечно, хотелось бы пояснения по принципу работы скрытого элемента. :help:

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


:victory:

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

dglushkov 26.11.2017 21:56
Цитата:
Сообщение от рони (Сообщение 471285)
если не указано иное, ширина расчитывается по первому блоку itemSelector, поэтому нужна
замена первого элемента itemSelector, потому что после клика по нему этот элемент изменяет свою ширину и не может быть эталоном для расчётов.
не понимаю как и когда происходит замена itemSelector :write:

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

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

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

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

рони 27.11.2017 09:09
Цитата:
Сообщение от dglushkov
Можно ли организовать скроллинг к элементу
да
после строки 9 пост №3 назначить одноразовое срабатывание на завершение перестановки и в этот обработчик поставить скролл
Цитата:
Сообщение от dglushkov
offset().top и scrollTop
ссылка пост №5 - там есть пример, добавить только скролл
Цитата:
Сообщение от dglushkov
Сколько вопросов можно задать в одной теме?
много, если это не пустое бла-бла-бла

dglushkov 27.11.2017 23:46
Цитата:
Сообщение от рони (Сообщение 471305)
да
назначить одноразовое срабатывание на завершение перестановки и в этот обработчик поставить скролл
принцип то я понимаю, а вот в коде организовать не могу - покажите пожалуйста :help:

рони 28.11.2017 00:05
dglushkov,
сделайте минимальный макет этого блока с живыми картинками (любыми)
и css
[HTML run]тут ваш код целиком html и css[/HTML]

dglushkov 28.11.2017 01:25
что я добавил после 9-ой строки:
$this = $(this);
$('.grid').masonry( 'on', 'layoutComplete', function() {
destination = $($this).offset().top;
	$('body').animate({scrollTop: destination}, 500).off();	
});

все работает, только многократно, как вы и сказали нужно чтобы срабатывало один раз - с этим разобраться не могу - покажите :help:

dglushkov 28.11.2017 01:27
ой пред. сообщение не видел, ок щас сделаю

dglushkov 28.11.2017 01:34 
<style>
	.grid {
		width: 90%;
		margin: 7.5%;
		box-sizing: border-box;
	}
	.grid-item {
		width: 18%;
		margin-right: 2px;
		margin-bottom: 8px;
	}

	.w2 {
		width: 36%;
	}
	.standard { 
		width: 9%; 
		height: 0;  
		visibility: hidden; 
		border: none;
	}

	.grid-item img {
		width: 100%;
		height: auto;
	}
	.grid-item img:hover {
		-webkit-filter: brightness(75%);
	}
	.grid-item a:visited img {
		-webkit-filter: sepia(100%);
	}
	
</style>

<body>

<div class="grid">

 <div class="grid-item">
	<a href="#">
	<img src="http://via.placeholder.com/350x150/"/>
	</a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
	<a href="#">
	<img src="https://cdn.lifehacker.ru/wp-content/uploads/2010/02/4980CD4D-23DB-4551-A637-E0C8EFABA2AA.jpg"/>
	</a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
	<a href="#">
	<img src="http://dummyimage.com/480x320/"/>
	</a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
	<a href="#">
	<img src="http://dummyimage.com/240x480/"/>
	</a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
	<a href="#">
	<img src="http://dummyimage.com/320x480/"/>
	</a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
	<a href="#">
	<img src="http://dummyimage.com/640x480/"/>
	</a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
	<a href="#">
	<img src="http://dummyimage.com/320x640/"/>
	</a>
  <div class="standard"></div>
 </div>
		
</div>

</body>

</html>


<script>
	$(document).ready(function() {
    $('.grid').imagesLoaded( function() {
      $('.grid').masonry({itemSelector: '.grid-item', transitionDuration: '1.2s', horizontalOrder: true, columnWidth: ".grid .standard"});
	    });
	    $('.grid').masonry("layout");

		$('.grid-item').click(function(event){
	        event.preventDefault();
	      
	        $(this).siblings().removeClass('w2');
	        $(this).addClass('w2');

			$this = $(this);
	        $('.grid').masonry( 'on', 'layoutComplete', function() {
  				
	        	destination = $($this).offset().top;
		  		$('body').animate({scrollTop: destination}, 500).off();	


			});

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

	});
	
</script>

dglushkov 28.11.2017 01:42
почему картинки не отображаются не знаю

рони 28.11.2017 01:54
Цитата:
Сообщение от dglushkov
почему картинки не отображаются не знаю
потому что это бред
Цитата:
<img src="<img src="

dglushkov 28.11.2017 01:59
исправил

рони 28.11.2017 02:25
masonry скролинг к увеличенному блоку
 
dglushkov,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
  .grid {
    width: 90%;
    margin: 7.5%;
    box-sizing: border-box;
  }
  .grid-item {
    width: 18%;
    margin-right: 2px;
    margin-bottom: 8px;
  }

  .w2 {
    width: 36%;
  }
  .standard {
    width: 9%;
    height: 0;
    visibility: hidden;
    border: none;
  }

  .grid-item img {
    width: 100%;
    height: auto;
  }
  .grid-item img:hover {
    -webkit-filter: brightness(75%);
  }
  .grid-item a:visited img {
    -webkit-filter: sepia(100%);
  }

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.js"></script>
<script src="https://imagesloaded.desandro.com/imagesloaded.pkgd.js"></script>
<script>
  $(function() {
    var grid = $('.grid');
    grid.imagesLoaded( function() {
      grid.masonry({itemSelector: '.grid-item', transitionDuration: '1.2s', horizontalOrder: true, columnWidth: ".grid .standard"});
      grid.masonry("layout");
      });


    grid.find('.grid-item').click(function(event){
          event.preventDefault();
          $(this).siblings().removeClass('w2');
          $(this).toggleClass('w2');
          $this = $(this);
          grid.masonry( 'once', 'layoutComplete', function() {
          	var destination = $this.offset().top;
      		$('body,html').stop().animate({scrollTop: destination}, 500);
      });

    grid.masonry("layout")
    });

  });

</script>

</head>




<body>

<div class="grid">

 <div class="grid-item">
  <a href="#">
  <img src="http://via.placeholder.com/350x150/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="https://cdn.lifehacker.ru/wp-content/uploads/2010/02/4980CD4D-23DB-4551-A637-E0C8EFABA2AA.jpg"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/480x320/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/240x480/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/320x480/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/640x480/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/320x640/"/>
  </a>
  <div class="standard"></div>
 </div>

</div>


</body>
</html>

dglushkov 28.11.2017 02:51
Рони большое спасибо! Опять помогли в кратчайшие оперативные строки.
добавил еще 
var destination = $this.offset().top - $this.height()/4;

так стало еще лучше. Тему пожалуйста пока не закрывайте.

dglushkov 28.11.2017 04:54
Рони, смотри получаю src для картинок таким кодом:
<?php 	
	$root = $_SERVER['DOCUMENT_ROOT'];
	$dir = '/gallery/xmas';
	$f_arr = scandir($root.$dir);
	foreach ($f_arr as $key => $file) {
		if(preg_match('/\.(jpg)/', $file)) {
			$t = explode(' ',$file,2);
			echo '<div class="grid-item">
				<a href="#'.$key.'">
					<img id="'.$key.'" src="'.$dir.'/'.$file.'" alt="'.$t[0].'"/>
				</a><div class="standard"></div>
				</div>';
		}
	}
?>

как на php сделать чтобы $dir менялось кликом по ссылкам 
<a href='#'>xmas</a> // передать $dir = '/gallery/xmas';
<a href='#'>23f</a> // передать $dir = '/gallery/23f';
<a href='#'>8m</a> // передать $dir = '/gallery/8m';

Хотелось бы что то типа 
<a href="#" onclick="<?php $dir = '/gallery/xmas'; ?>">Новый год</a>
<a href="#" onclick="<?php $dir = '/gallery/23f'; ?>">23-е февраля</a>
<a href="#" onclick="<?php $dir = '/gallery/8m'; ?>">8 марта</a>

Но так почему не срабатывает, подозреваю что это из за того что php выполняется только на сервере, но как быть то?
Понимаю, что вопросы примитивные, однако мне кажется лучше спросить, чем тратить много дней на решение проблемы :victory:
Кстати, почему то не могу добавить тебе в карму - пишет нужно еще кого плюсануть, а кого плюсовать, если только ты мне помогаешь

рони 28.11.2017 06:21
dglushkov,
не могу помочь, это лучше к специалистам по php

dglushkov 30.11.2017 04:14
Можно ли организовать увеличение элемента плитки в строго заданном месте, в документации есть описание stamp, я пробую, но увеличение происходит в разных местах
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
  .grid {
    width: 90%;
    margin: 7.5%;
    box-sizing: border-box;
  }
  .grid-item {
    width: 18%;
    margin-right: 2px;
    margin-bottom: 8px;
  }

  .w2 {
    width: 36%;
  }
.stamp {
  		position: absolute;
  		width: 36%;
  		left: 25%;
  		top: 0;
  	}
  .standard {
    width: 9%;
    height: 0;
    visibility: hidden;
    border: none;
  }

  .grid-item img {
    width: 100%;
    height: auto;
  }
  .grid-item img:hover {
    -webkit-filter: brightness(75%);
  }
  .grid-item a:visited img {
    -webkit-filter: sepia(100%);
  }

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.js"></script>
<script src="https://imagesloaded.desandro.com/imagesloaded.pkgd.js"></script>
<script>
	$(document).ready(function() {
    $('.grid').imagesLoaded( function() {
      $('.grid').masonry({itemSelector: '.grid-item', transitionDuration: '1.2s', horizontalOrder: true, columnWidth: ".grid .standard", stamp: '.stamp'});
	    });
	    $('.grid').masonry("layout");

		$('.grid-item').click(function(event){
	        event.preventDefault();
	      
	        $(this).siblings().removeClass('stamp');
	        $(this).addClass('stamp');

			$this = $(this);
	        $('.grid').masonry( 'once', 'layoutComplete', function() {
	            var destination = $this.offset().top - 100;
	            $('body, html').stop().animate({scrollTop: destination}, 750);
	        });

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

	});
	
</script>

</head>




<body>

<div class="grid">

 <div class="grid-item">
  <a href="#">
  <img src="http://via.placeholder.com/350x150/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="https://cdn.lifehacker.ru/wp-content/uploads/2010/02/4980CD4D-23DB-4551-A637-E0C8EFABA2AA.jpg"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/480x320/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/240x480/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/320x480/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/640x480/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/320x640/"/>
  </a>
  <div class="standard"></div>
 </div>

</div>


</body>
</html>

рони 30.11.2017 07:51
dglushkov,
строка 55 у вас в который раз не на своём месте!!! нету ещё никакого masonry в этой строке.
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
  .grid {
    width: 90%;
    margin: 7.5%;
    box-sizing: border-box;
  }
  .grid-item {
    width: 18%;
    margin-right: 2px;
    margin-bottom: 8px;
  }

  .w2 {
    width: 36%;
  }
.stamp {
  		position: absolute;
  		width: 36%;
  		left: 25%;
  		top: 0;
  	}
  .standard {
    width: 9%;
    height: 0;
    visibility: hidden;
    border: none;
  }

  .grid-item img {
    width: 100%;
    height: auto;
  }
  .grid-item img:hover {
    -webkit-filter: brightness(75%);
  }
  .grid-item a:visited img {
    -webkit-filter: sepia(100%);
  }

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.js"></script>
<script src="https://imagesloaded.desandro.com/imagesloaded.pkgd.js"></script>
<script>
  $(document).ready(function() {
    $('.grid').imagesLoaded( function() {
      $('.grid').masonry({itemSelector: '.grid-item', transitionDuration: '1.2s', horizontalOrder: true, columnWidth: ".grid .standard"});
      $('.grid').masonry("layout");

     });


    $('.grid-item').click(function(event){
          event.preventDefault();
          $this = $(this);
          $('.grid').masonry( 'unstamp', $('.stamp'));
          $('.grid-item').removeClass('stamp');
          $this.addClass('stamp');
          $('.grid').masonry( 'stamp', $this);
          $('.grid').masonry( 'once', 'layoutComplete', function() {
              var destination = $this.offset().top - 100;
              $('body, html').stop().animate({scrollTop: destination}, 750);
          });
          $('.grid').masonry("layout")
    });

  });
</script>

</head>




<body>

<div class="grid">

 <div class="grid-item">
  <a href="#">
  <img src="http://via.placeholder.com/350x150/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="https://cdn.lifehacker.ru/wp-content/uploads/2010/02/4980CD4D-23DB-4551-A637-E0C8EFABA2AA.jpg"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/480x320/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/240x480/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/320x480/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/640x480/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/320x640/"/>
  </a>
  <div class="standard"></div>
 </div>

</div>


</body>
</html>

dglushkov 30.11.2017 08:19
Увеличиваемый элемент все равно не имеет статического положения , в описании же показано что stamp всегда находиться на одном месте.

рони 30.11.2017 09:02
dglushkov,
элемент имеет то месторасположение которое было у него на момент клика.

dglushkov 30.11.2017 10:00
я имел ввиду чтобы они появлялись в одном и том же месте

рони 30.11.2017 10:05
Цитата:
Сообщение от dglushkov
я имел ввиду чтобы они появлялись в одном и том же месте
не могли бы вы уточнить, что это за место?

рони 30.11.2017 10:18
masonry фиксация элемента
 
dglushkov,
возможно вы хотели так ...
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>.grid{
    width:90%;
    margin:7.5%;
    box-sizing:border-box;
    position:relative;
  }

  .grid-item{
    width:18%;
    margin-right:2px;
    margin-bottom:8px;
    position:absolute;
  }

  .w2{
    width:36%;
  }

  .stamp{
    position:absolute;
    width:36%;
    left:19.5%;
    top:0;
  }

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

  .grid-item img{
    width:100%;
    height:auto;
  }

  .grid-item img:hover{
    -webkit-filter:brightness(75%);
  }

  .grid-item a:visited img{
    -webkit-filter:sepia(100%);
  }
  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.js"></script>
<script src="https://imagesloaded.desandro.com/imagesloaded.pkgd.js"></script>
<script>
 $(function() {
    $(".grid").imagesLoaded(function() {
        $(".grid").masonry({
            itemSelector: ".grid-item",
            transitionDuration: "1.2s",
            horizontalOrder: true,
            columnWidth: ".grid .standard"
        });
        $(".grid").masonry("layout")
    });
    $(".grid-item").click(function(event) {
        event.preventDefault();
        $this = $(this);
        $(".grid").masonry("unstamp", $(".stamp").removeClass("stamp"));
        $this.addClass("stamp").removeAttr("style");
        $(".grid").masonry("stamp", $this);
        $(".grid").masonry("once", "layoutComplete", function() {
            var destination = $this.offset().top -
                100;
            $("body, html").stop().animate({
                scrollTop: destination
            }, 750)
        });
        $(".grid").masonry("layout")
    })
});
</script>

</head>




<body>

<div class="grid">

 <div class="grid-item">
  <a href="#">
  <img src="http://via.placeholder.com/350x150/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="https://cdn.lifehacker.ru/wp-content/uploads/2010/02/4980CD4D-23DB-4551-A637-E0C8EFABA2AA.jpg"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/480x320/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/240x480/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/320x480/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/640x480/"/>
  </a>
  <div class="standard"></div>
 </div>
 <div class="grid-item">
  <a href="#">
  <img src="http://dummyimage.com/320x640/"/>
  </a>
  <div class="standard"></div>
 </div>

</div>


</body>
</html>

dglushkov 30.11.2017 12:14
Именно так, оч круто! большое спасибо! :dance:

dglushkov 01.12.2017 09:21
Можно ли как то сделать прелоадер не по всему окну, а по блоку ('.grid') ?
.prldr {
		position: fixed;
		left: 0;
		top: 0;
		right:0;
		bottom:0;
		background: #9A12B3;
		z-index: 30;
	}


$(window).load(function(){
 		$('.prldr').delay(500).fadeOut('slow');
 		$(".grid").imagesLoaded(function() {
	        $(".grid").masonry({
	            itemSelector: ".grid-item",
	            transitionDuration: "1.2s",
	            horizontalOrder: true,
	            columnWidth: ".grid .standard"
	        });
	        $(".grid").masonry("layout")
	    });
 	});

так всё работает, но если (window) заменить на ('.grid') .prldr не исчезает :(

рони 01.12.2017 09:41
dglushkov,
не понимаю что вы хотите сделать, но imagesLoaded внутри load немного бессмысленно.
попробуйте так
$(function(){
 		$('.prldr').delay(500).fadeOut('slow');
 		$(".grid").imagesLoaded(function() {
	        $(".grid").masonry({
	            itemSelector: ".grid-item",
	            transitionDuration: "1.2s",
	            horizontalOrder: true,
	            columnWidth: ".grid .standard"
	        });
	        $(".grid").masonry("layout")
	    });
 	});

dglushkov 02.12.2017 20:35
ок


Часовой пояс GMT +3, время: 00:39.