Fixed item in the grid when using Isotope

jquery, jquery-isotope

Solution

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;
}

Problem

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

Original source