Adding Masonry JQuery Plugin

I am trying to add this into Hype.
http://masonry.desandro.com

The idea is I then can create a symbol and have it re-size / reorder the divs on different screen sizes and there not nee different scenes.

On the codeine I have entered :slight_smile:

<h1>Masonry - columnWidth</h1>

<div class="grid">
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--height3"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--width3"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--width2 grid-item--height3"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height3"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height3"></div>
</div>

CSS

* { box-sizing: border-box; }

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #EEE;
  max-width: 1200px;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  width: 140px;
  height: 100px;
  float: left;
  background: #D26;
  background-image: url('https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/12006152_701783646619711_4425858407111016898_n.jpg?oh=da5aa201511dc17d7a48562dafa76dfe&oe=5851205A');
  background-repeat: no-repeat;
    background-position:50% 50%;
    background-size:cover;
    position:fixed;
    left:10%;
    top:10%;
    right:10%;
    bottom:10%;
  box-shadow: 3px 3px 5px grey;
  border: 5px solid ;
  border-color: #000000;
  border-radius: 5px;
  margin: 10px 10px 10px 10px;
  padding : 0px;
}

.grid-item--width2 { width: 300px; margin: 10px 10px 10px 10px; }
.grid-item--width3 { width: 460px; margin: 10px 10px 10px 10px;}
.grid-item--width4 { width: 620px; margin: 10px 10px 10px 10px;}

.grid-item--height2 { height: 180px; margin :10px 10xp 10px 10px;}
.grid-item--height3 { height: 240px; margin: 10px 10px 10px 10px;}
.grid-item--height4 { height: 340px; margin: 10px 10px 10px 10px;}

Javascript

// external js: masonry.pkgd.js

$('.grid').masonry({
 itemSelector: '.grid-item',
 columnWidth: 160
});

This gives me what I need in code pen.

But as usual I’m struggling to get this to work within hype.

I added JQuery
I added the plugin
I added the masonary1.css file
I added the HTML to a HTML Element
I added the javascript on scene load

I tried added the css to the header as well.

I added the CSS & HTML directly into the HTML element and it show but the tiles were over each other.

Cheers

Steve WarbyMasonary.hype.zip (54.0 KB)

This is with everything in the HTML Element.

All the divs are on top of each other.

Masonary2.hype.zip (53.3 KB)

Cheers

Steve Warby

1 Like

Bump on this guys???

Cheers

Steve Warby

Hi Guys,

I have played with another plugin called freewall

I have it working in the attached app.

I have 2 problems I cannot solve.

  1. On web I can’t scroll. Although the container is set to visible or scrollbars.
  2. On mobile the scene is wider than the device.

Cheers

Steve Warby

Freewall3.hype.zip (445.9 KB)

  1. The container (group) even though it has scrollbars set it has no overflow so will not scroll. To show what I mean, change the height of the group to less than the scene height and you will get scrollbars.

  2. Depending on what mobile you view it on. Anything with a width approximately less than the cell amounts plus all the other added pixel space, will not render. If you decrease the cellW and cellH it will show.

I haven’t worked with this plugin so can’t really advise you on it’s use. Especially within Hype.