Страница 2 из 4 < 1 2 34 >
Показывать 40 сообщений этой темы на одной странице

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

рони 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:
Кстати, почему то не могу добавить тебе в карму - пишет нужно еще кого плюсануть, а кого плюсовать, если только ты мне помогаешь


Часовой пояс GMT +3, время: 10:26.
Страница 2 из 4 < 1 2 34 >
Показывать 40 сообщений этой темы на одной странице