Hello,
I have big problem with masonry js beacause i would like to hide/appear my gallery
but it’s actually impossible because i must to use the basic code html masonry
indent preformatted text by 4 spaces
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
I tried Jquery code and Js code vanilla describe on the masonry web site but it’s not working
at all, it doesnt interact with blocs. I trying everything to resolve the problem but it’s still not working. I work with wamp which works perfectly so its not a problem about serveur.
Here is the html code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<link rel="stylesheet" href="main.css">
<script src="masonry.pkgd.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.grid').masonry({
/ / options
itemSelector: '.grid-item',
columnWidth: 200
});
</head>
<body>
<div id="test">
<p> 3dTESTLOL </p>
</div>
<div class="grid">
<div class="grid-item grid-item--portrait"> <img src="img/img1%20.jpg"> </div>
<div class="grid-item grid-item--rectangle"> <img src="img/img2.jpg"> </div>
<div class="grid-item grid-item--portrait"> <img src="img/img3.jpg"> </div>
<div class="grid-item grid-item--carre"> <img src="img/img4.jpg"> </div>
<div class="grid-item grid-item--portrait"> <img src="img/img5.jpg"> </div>
<div class="grid-item grid-item--rectangle2"> <img src="img/img6.jpg"> </div>
<div class="grid-item grid-item--portrait"> <img src="img/img7.jpg"> </div>
<div class="grid-item grid-item--carre"> <img src="img/img8.gif"> </div>
<div class="grid-item grid-item--rectangle3"> <img src="img/img9.jpg"> </div>
<div class="grid-item grid-item--carre5"> <img src="img/img10.jpg"> </div>
<div class="grid-item grid-item--carre2"> </div>
<div class="grid-item grid-item--rectangle4"> <img src="img/img12.jpg"> </div>
<div class="grid-item grid-item--rectangle5"> <img src="img/img13.jpg"> </div>
<div class="grid-item grid-item--carre4"> <img src="img/img15.jpg"> </div>
<div class="grid-item grid-item--carre8"> <img src="img/img16.jpg"> </div>
<div class="grid-item grid-item--rectangle6"> <img src="img/img17.jpg"> </div>
</body>
</html>
CSS
body {
background: black;
}
#test {
color:white;
margin-left:30%;
margin-top : 25%;
}
#test2{
color:white;
margin-left:30%;
margin-top : 40%;
}
.grid {
background: #black;
max-width: 1635px;
margin: 0 auto;
}
.grid:after {
content: ‘’;
display: block;
clear: both;
}
.grid-item {
margin-bottom: 10px;
margin-left: 10px;
width: 760px;
height: 600px;
background: #D26;
float:left;
background-color: rose;
border-color: hsla(0, 0%, 0%, 0.5);
border-radius: 5px;
}
.grid-item–portrait { width: 420px; height: :600px }
.grid-item–rectangle { width: 760px; height: 600px }
.grid-item–carre { width: 420px; height: 420px }
.grid-item–rectangle2 { width: 760px; height: 420px }
.grid-item–rectangle3 { width: 760px; height: 720px }
.grid-item–carre2 { width: 420px; height: 670px }
.grid-item–rectangle4 { width: 760px; height: 550px }
.grid-item–rectangle5 { width: 785px; height: 550px }
.grid-item–carre3 { width: 325px; height: 500px }
.grid-item–carre4 { width: 450px; height: 650px }
.grid-item–carre5 { width: 420px; height: 670px }
.grid-item–carre8 { width: 370px; height: 420px }
.grid-item–rectangle6 { width: 785px; height: 650px }
.grid-item:hover {
background: #A2C;
border-color: white;
cursor: pointer;
}
Thank a lot for your answer !
And sorry for my english
Here is my site Read-Only: LINK
(how to share your site Read-Only link)