Форум

рони · #11 (**permalink**) 28.11.2017, 00:05

dglushkov,
сделайте минимальный макет этого блока с живыми картинками (любыми)
и css

[HTML run]тут ваш код целиком html и css[/HTML]

dglushkov · #12 (**permalink**) 28.11.2017, 01:25

что я добавил после 9-ой строки:

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

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

dglushkov · #13 (**permalink**) 28.11.2017, 01:27

ой пред. сообщение не видел, ок щас сделаю

dglushkov · #14 (**permalink**) 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 · #15 (**permalink**) 28.11.2017, 01:42

почему картинки не отображаются не знаю

рони · #16 (**permalink**) 28.11.2017, 01:54

Сообщение от dglushkov

почему картинки не отображаются не знаю

потому что это бред

Цитата:

<img src="<img src="

dglushkov · #17 (**permalink**) 28.11.2017, 01:59

исправил

рони · #18 (**permalink**) 28.11.2017, 02:25

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 · #19 (**permalink**) 28.11.2017, 02:51

Рони большое спасибо! Опять помогли в кратчайшие оперативные строки.
добавил еще

var destination = $this.offset().top - $this.height()/4;

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

dglushkov · #20 (**permalink**) 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 выполняется только на сервере, но как быть то?
Понимаю, что вопросы примитивные, однако мне кажется лучше спросить, чем тратить много дней на решение проблемы

Кстати, почему то не могу добавить тебе в карму - пишет нужно еще кого плюсануть, а кого плюсовать, если только ты мне помогаешь

Форум

Справочник

Discord чат

Курсы javascript