Fixed item in the grid when using Isotope

Question

Case: I got a grid with images and two textboxes. I'm using Isotope to layout the grid and shuffle it.

Problem: The textboxes should have a fixed position in the grid (no shuffle). The images can shuffle.

Question: How can I get elements in the grid to be fixed? I found a site where it's been done, I just can't figure out how... (http://www.facesofnyfw.com/) Here, the first boxes (with the title and filter, ...) are fixed and do not move.

Thanks in advance,

Ibe

Answer 1

The previous answer is on the right path, but Isotope has released a new version that uses 'stamps' instead of 'corner-stamps'. Check out the documentation here. It allows to you specify the position of certain elements on the page and then isotope will arrange all other items below/(around?) them. I used it to fix an element in the top left corner of the container div, and it worked like a charm. I imagine it might be more difficult to position things elsewhere, but I'm sure it possible!

HTML:

<div class="grid">
  <div class="stamp stamp1"></div>
  <div class="stamp stamp2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ....
</div>

JS:

// specify itemSelector so stamps do get laid out
itemSelector: '.grid-item',
// stamp elements
stamp: '.stamp'

CSS:

/* position stamp elements with CSS */
.grid {
  position: relative;
}
.stamp {
  position: absolute;
  background: orange;
  border: 4px dotted black;
}

Answer 2

You want the images to shuffle like water flows around stones in a lake? Don't think that's achievable unless you customise the plugin yourself. Shuffle randomises all element positions at once. You can have a corner stamp though. as shown by the pluging creator. Corner stamp - first item, not filtered out.