Форум

рони · #21 (**permalink**) 28.11.2017, 06:21

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

dglushkov · #22 (**permalink**) 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>

рони · #23 (**permalink**) 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 · #24 (**permalink**) 30.11.2017, 08:19

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

рони · #25 (**permalink**) 30.11.2017, 09:02

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

dglushkov · #26 (**permalink**) 30.11.2017, 10:00

я имел ввиду чтобы они появлялись в одном и том же месте

рони · #27 (**permalink**) 30.11.2017, 10:05

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

я имел ввиду чтобы они появлялись в одном и том же месте

не могли бы вы уточнить, что это за место?

рони · #28 (**permalink**) 30.11.2017, 10:18

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 · #29 (**permalink**) 30.11.2017, 12:14

Именно так, оч круто! большое спасибо!

dglushkov · #30 (**permalink**) 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 не исчезает

Форум

Справочник

Discord чат

Курсы javascript