Streaming live at 10am (PST)

Masonry and Js Jquery Bug

#1

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)

#2

@Laura_Bac

Since this is a custom code issue could can you move this post to that? This is not a webflow bug.

If you don’t share your published site URL and share the Read Only Preview it will be very hard to help.

https://forum.webflow.com/t/how-to-enable-a-webflow-share-link/2573/2

closed #3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.