Is there a jquery quicksand view module?

By zeezack on 28 Jun 2010 at 09:17 UTC

I am looking for a sorting view module like this..

http://razorjack.net/quicksand/

how will one go about applying a dynamic sortable view like this

Comments

Isotope

ipwa commented 16 April 2011 at 08:45

The isotope plugin has the same functionality, there's a sandbox project: http://drupal.org/sandbox/funkym/1072712

Nicolas
-------------------------

I'm looking for the same

NickWebman commented 16 May 2011 at 22:02

I'm looking for the same thing.

Quicksand for drupal

Greg Adams commented 20 July 2011 at 23:26

Don't expect too much... I set this up in about 10 minutes...
http://pixelass.pixelass.de/graphicdesign
Using quicksand in Drupal 6...
It was a lot easier than expected... (using easeInBack right now...)

This might be offline within the next few days.. But I'll post a link when the site is done.
I'm using a lot of advanced mods to make drupal 6 work with jquery 1.4.x, 1.5.x and even 1.6.x

Hope you like it...

Greg this is awesome, can you

hixster commented 2 August 2011 at 16:49

Greg this is awesome, can you post up a walkthrough/resource list?
Are you using views tabs with an ajax view to get this working?

Drupal Web Designers Surrey South East England www.lightflows.co.uk

Quicksand for drupal

Greg Adams commented 19 July 2011 at 04:53

-....duplicate post.... Sorry

I am currently trying to get

Greg Adams commented 8 August 2011 at 20:00

I am currently trying to get this to work in drupal 7

What I basically did is the following.

DRUPAL 6
1. get the term to display in the classes of the li elements of a list-view (in template.tpl.php)

/**
 * puts the term-id in the classes in the views-view-list.tpl-php
 */
function YOUR_THEME_preprocess_views_view_list(&$vars) {
  $view     = $vars['view'];
  $rows     = $vars['rows'];

  if ($view->base_table == 'node') {
    foreach ($view->result as $id => $item) {
      $node = node_load($item->nid);
      $terms = array_keys($node->taxonomy);
      $classes = '';
      if ($terms) {
        foreach ($terms as $tid) {
          $classes .= " term-$tid";
        }
        $vars['classes'][$id] .= $classes;
      }
      else {
        $classes = " no-term";
        $vars['classes'][$id] .= $classes;
      }
    }
  }
}

2. modify the list output of the view (views-view-list.tpl.php)
PREFIX can be changed to anything you like

<?php
// $Id: views-view-list.tpl.php,v 1.3 2008/09/30 19:47:11 merlinofchaos Exp $
/**
 * @file views-view-list.tpl.php
 * Default simple view template to display a list of rows.
 *
 * - $title : The title of this group of rows.  May be empty.
 * - $options['type'] will either be ul or ol.
 * @ingroup views_templates
 */
?>
    <div id="wrapper">
      <div id="site">  <?php if (!empty($title)) : ?>
    <h3><?php print $title; ?></h3>
  <?php endif; ?>
  <<?php print $options['type']; ?> id="list" class="image-grid">
    <?php foreach ($rows as $id => $row): ?>
      <li data-id="id-<?php print $id; ?>" id="PREFIX-<?php print $id; ?>" class="<?php print $classes[$id]; ?>"><?php print $row; ?></li>
    <?php endforeach; ?>
  </<?php print $options['type']; ?>>
</div></div>

3. include the scrpits and stylesheet in the header for that page ( I have a custom folder just for the addons themes/extra/)
BE CAREFUL I am overriding the jQuery for that page so many modules will not work (anything that relies on jQuery and/or Ajax)
So you would need a wokaround if you need any of those modules or try the really complicated version of updating D6 to jQuery 1.4.1
I would basically just include tabs or accordeons in the same way if needed
so I include jQuery, the quicksand-script, the customized js for the behavior of quicksand, easing to use easing for a nicer animation.

<link href="/sites/all/themes/extra/css/main.css" rel="stylesheet" />
<script type="text/javascript" language="Javascript" src="/sites/all/themes/extra/js/jquery.1.4.1.min.js"></script>
<script type="text/javascript" language="Javascript" src="/sites/all/themes/extra/js/jquery.quicksand.js"></script>
<script type="text/javascript" language="Javascript" src="/sites/all/themes/extra/js/script.js"></script>
<script type="text/javascript" language="Javascript" src="/sites/all/themes/extra/js/jquery.easing.js"></script>

4. that basically does the trick.. once set up it's pretty much dynamic and extendable via Views and Taxonomy.
(I hope I didn't forget anything) Since this is definitely nothing for newbies I guess the people interested can figure it out with the info given.

I am trying to get it to work in Drupal 7 since it can be done in a much cleaner way. since jQuery 1.5.1 is supported.
differences for for Drupal 7
- modify the output of the view list to include unique "id" AND a "data-type" for each li element. (the data-type is the the taxonomy term and used for sorting the elements)
this could also be done for Drupal 6 but I used a different approach.

- no need to add the terms to the classes in template.php (this is done via views by inclluding the term in a class.
- no need to replace jQuery so this can be fully integrated.
current Problems:
the taxonomy ter has to be the last term in the class.
the taxonomy terms need to be a certain number of characters for example all therms need to be 5 charachters long

I guess those two problems could be fixed but I don't have time right now to look at it.
I will use this for a webpage within this month so I can then tell you how it worked out for Drupal 7
I am just trying to get used to D7 (second approach) but I'm still a hater. THe only reason right now for giving this a try is the fact that jQuery is updated.
I am using a lot of jQuery and non-drupal plugins which I integrate in the same way I did with the quicksand module for my webpages and the cool new jQuery modules need 1.4.x or above.

SO ONCE AGAIN
THIS WILL BREAK jQuery MODULES ON DRUPAL 6
THIS WILL NOT WORK OUT OF THE BOX BUT REQUIRES SOME CONFIGS IN VIEWS TOO
THIS IS NOT FOR DRUPAL NEWBIES
THIS IS A WORKAROUND
THIS IS AN APPROACH I DID IN 10 MINUTES SO DON'T EXPECT IT TO WORK PERFECTLY
THE CODE ABOVE IS NOT THE ACTUAL CODE USED ON THE SAMPLE I POSTED EARLIER BUT A MODIFIED VERSION WHICH IS A LITTLE CLEANER

I'm more a workaround-finder than a module-writer but I think it should be very easy to make a cool module for this.. so if anybody is interested I am glad to help in any kind of way.

forgot to mention.... I am

Greg Adams commented 8 August 2011 at 20:34

forgot to mention.... I am currently looking at the isotope module mentioned above
DEMO: http://isotope.metafizzy.co/demos/basic.html

I think this one could also be integrated in a nice way maybe even a lot nicer than quicksand
gonna give it a try when I find the time...

Isotope works like a charm

Greg Adams commented 10 August 2011 at 14:18

here's a demo for Isotope in Drupal 7
http://web.pixelass.de/isotope

works like a charm so far.. (tested Chrome, Safari Firefox on Mac OS X so far)
I'll keep you updated and write a how to as soon as I have it perfect..

This is another 10 minute approach... still need a bit of tweaking and configuring..

Greg, many thanks for posting

hixster commented 10 August 2011 at 19:34

Greg, many thanks for posting back - been away for a few days and didn't see you'd added comments.
Looks like a thorough write up, I'll have a good look when I'm in the office and check it out properly,
Many thanks!

Drupal Web Designers Surrey South East England www.lightflows.co.uk

You should definitely go with

Greg Adams commented 11 August 2011 at 01:23

You should definitely go with the isotpe module... It's a paid project for commercial sites but it's worth a lot more than it's actual price.
Free for all non commercial sites.

I was able to get it to work with Drupal7 in a pretty clean manner. Having problems in IE8 below.. All other browsers work perfectly. I only did browsershots so I can't really test it (testet 82 on browsershots.org)

I am using an Adaptive subtheme.. I guess I could opensource it since all the features are built into the theme itself.

Here's a quick how to on how I did this. (Including variable sizes and a few filters)

DRUPAL 7 ONLY DRUPAL 7 ONLY DRUPAL 7 ONLY DRUPAL 7 ONLY DRUPAL 7 ONLY

create a list view and add all terms as classes for the li elements (this is a Views3 feature)
copy the needed scripts and stylesheets into some folder (I have my external scripts in an extra theme folder... /sites/all/themes/extra/*)

Then: in your head
BEFORE <?php print $styles; ?>

<link rel="stylesheet" href="/sites/all/themes/extra/css/isotope.css" />

BEFORE <?php print $scripts; ?>
(you need to include the jQuery too even though it will be overiden by the scripts from Drupal.)
(I couldn'nt get it to work if it is AFTER the scripts)

<script type="text/javascript" language="Javascript" src="/sites/all/themes/extra/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" language="Javascript" src="/sites/all/themes/extra/js/jquery.isotope.min.js"></script>

This is the actual code from MY views-view-list.tpl.php (I am currently putting the filters in there too, for testing purpose)
The code is not completely cleaned and modified, but works like a charm..
I changed the li elements to div elements for testing purpose

<?php
/**
 * @file views-view-list.tpl.php
 * Default simple view template to display a list of rows.
 *
 * - $title : The title of this group of rows.  May be empty.
 * - $options['type'] will either be ul or ol.
 * @ingroup views_templates
 */
?>
 <?php print $wrapper_prefix; ?>
  <?php if (!empty($title)) : ?>
    <h3><?php print $title; ?></h3>
  <?php endif; ?>
  
  <p></p> 
  <section id="options" class="clearfix">
      <ul id="filters" class="option-set clearfix" data-option-key="filter">
        <li><a href="#filter" data-option-value="*" class="selected">Alle anzeigen</a></li>
        <li><a href="#filter" data-option-value=".webdesign">Webdesign</a></li>
        <li><a href="#filter" data-option-value=".photography">Fotografie</a></li>
        <li><a href="#filter" data-option-value=".graphicdesign">Grafikdesign</a></li>
      </ul>
    <ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
      <li><a href="#sortBy=name" data-option-value="name">Name</a></li>
      <li><a href="#sortBy=category" data-option-value="category">Kategorie</a></li>
      <li><a href="#sortBy=random" data-option-value="random">Random</a></li>
     <li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
   </ul>
<ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending">
      <li><a href="#sortAscending=true" data-option-value="true" class="selected">Aufsteigend</a></li>
      <li><a href="#sortAscending=false" data-option-value="false">Absteigend</a></li>
    </ul>


  </section> <!-- #options -->

  <<?php print $options['type']; ?> id="container" class=" image-grid clickable  clearfix ">
	<?php foreach ($rows as $id => $row): ?>
		<div data-id="id-<?php print $id; ?>" class="<?php print $classes_array[$id]; ?> element " data-category="<?php 
			$str = $classes_array[$id];
			$end = substr($str, -9);
			print $end; 
			?>">
		<?php print $row;?></div>
    <?php endforeach; ?>
  </<?php print $options['type']; ?>>
<?php print $wrapper_suffix; ?>


  <script>
  $(function(){
    
    var $container = $('#container');
    
       
    $container.isotope({
      itemSelector : '.element',

      getSortData : {

        category : function( $elem ) {
          return $elem.attr('data-category');
        },

        name : function ( $elem ) {
          return $elem.find('.views-field-title .field-content').text();
        }
      }
    });
    
    
      var $optionSets = $('#options .option-set'),
          $optionLinks = $optionSets.find('a');

      $optionLinks.click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
  
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
          // changes in layout modes need extra logic
          changeLayoutMode( $this, options )
        } else {
          // otherwise, apply new options
          $container.isotope( options );
        }
        
        return false;
      });


      // change size of clicked element
      $container.delegate( '.element', 'click', function(){
        $(this).toggleClass('large');
        $container.isotope('reLayout');
      });


    var $sortBy = $('#sort-by');
    $('#shuffle a').click(function(){
      $container.isotope('shuffle');
      $sortBy.find('.selected').removeClass('selected');
      $sortBy.find('[data-option-value="random"]').addClass('selected');
      return false;
    });
  });  </script>

That's practically it.... I guess Internet Explorer is having a problem because of the way I inserted the scripts but I can't test it right now.

Next step

Greg Adams commented 14 August 2011 at 16:56

I managed to get infinite-scrollling to work too (built into isotope)
BUT....
somehow the 2nd page will not load. The plugin loads all other pages. Can't figure out why. The setup is pretty basic but maybe there's something I didn't see. Well I post here If I figure it out.

.....EDIT:

OK I fixed it. The default currPage was set to 1 in the jQuery.ininite-scroll.min.js
I needed to change it to 0 since page 1 in Drupal has an id of 0 instead of 1.
Fixed the problem, so I guess it's pretty much perfect right now.

.....

.....EDIT again:

Stuff I changed:

using-unformatted view instead of list-view
I cleaned up the code
I put the menu in the views-header and the script in the views-footer so every view can have it's own options and workflow.
added support for the browser back button and bookmarks (the url changes)
~~only one BIG item at a time~~

Stuff that needs to be changed:

~~only load new items from the selected category when scrolling (currently any new object will load)~~ (fixed)
~~when no scrollbar is visible new objects can't be loaded~~ (fixed)
make the filter menu dynamic
a few minor tweaks

....If anybody needs this, just ask. The setup should't take longer than 30 minutes.
.....EDIT
I just set this up for my little sister's webpage in about 10 minutes.
.....
If needed I can post a NEW how-to that is a lot cleaner and a bit more specific and detailed.
Still trying to figure out a few things about isotope.
....

Here's a demo of the isotope plugin WITH infinite-scrolling per category and URL-updating
http://web.pixelass.de/showcase

How to for D7

adewinne commented 19 August 2011 at 02:24

Hi Greg. Thank you for sharing your setup so far. I would very much like to see a clean and detailed setup guide, also if you've added any new tweaks fixes, it'd be great to see those too. Thanks!

This is a quick roundup. I

Greg Adams commented 20 August 2011 at 04:53

This is a quick roundup.

I will explain how to integrate the isotope-plugin in Drupal 7.

Features:

isotope integration
infinite scroll integration
back button support (url change)

Dependencies:

Drupal 7
Views 3
Taxonomy (part of Drupal core)

Install Drupal 7
Install the Taxonomy module (part of Drupal Core)
Install Views 3
download isotope
download jQuery 1.4+
download infinite-scroll
download JQUERY BBQ
create a custom folder in your theme. (custom-js)
copy the two jQuery-plugins and jQuery itself in that folder (yes you need a separate jQuery, even if it's included in Drupal Core)
create a Taxonomy vocabulary with at least 2 terms

Lets call the vocabulary "test-vocab" and the terms "type1" and "type2"
create a content type with a term relation for that vocabulary and call it "field_test_vocab"
create a view with fields
we need some custom setup in this view.

select unformatted list (default) as the display type.

create some fields. We definitely need three. The "Node title", "All Taxonomy Terms" and "Content:test-vocab".

You can exclude the terms from the display, since we only need these to create custom classes for that view
Now go to the settings for "unformattted list" (found under "Format") and include the "replacement patterns" for the two Taxonomy fields we created earlier [term_node_tid] [field_test_vocab] as the Row class.

make sure to put a space between those two patterns.

now we need to create a header for that view.

You need to make a text-field with php enabled.

In the header we will put the filters. It should look something like this.

 <section id="options" class="clearfix">
      <ul id="filters" class="option-set clearfix" data-option-key="filter">
        <li><a href="#filter=*" data-option-value="*" class="selected" >show all</a></li>
        <li><a href="#filter=.type1" data-option-value=".type1" >Type1</a></li>
        <li><a href="#filter=.type2" data-option-value=".type2">Type2</a></li>
      </ul>
    <ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
      <li><a href="#sortBy=name" data-option-value="name">name</a></li>
      <li><a href="#sortBy=category" data-option-value="category">category</a></li>
      <li><a href="#sortBy=random" data-option-value="random">random</a></li>
      <li id="toggle-sizes"><a href="#toggle-sizes">variable sizes</a></li>
 </ul>
<ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending">
      <li><a href="#sortAscending=true" data-option-value="true" class="selected">ascending</a></li>
      <li><a href="#sortAscending=false" data-option-value="false">descending</a></li>
    </ul>
  </section>

We can now filter by type and change the order of the view elements.

create a Footer. We also need a textfield with php.

 <script>
    $(function(){
  
      var $container = $('#container'),
          // object that will keep track of options
          isotopeOptions = {},
          // defaults, used if not explicitly set in hash
          defaultOptions = {
            filter: '*',
            sortBy: 'original-order',
            sortAscending: true,
            layoutMode: 'masonry'
          };
        
   
      // hacky way of adding random size classes
      $container.find('.element').each(function(){
        if ( Math.random() > 0.6 ) {
          $(this).addClass('width2');
        }
        if ( Math.random() > 0.6 ) {
          $(this).addClass('height2');
        }
      });
  
  
  
      var setupOptions = $.extend( {}, defaultOptions, {
        itemSelector : '.element',
      masonry : {
        columnWidth : 140
      },
      masonryHorizontal : {
        rowHeight: 140
      },
      cellsByRow : {
        columnWidth :280,
        rowHeight : 280
      },
      cellsByColumn : {
        columnWidth : 280,
        rowHeight : 280
      },
      getSortData : {

        category : function( $elem ) {
          return $elem.attr('data-category');
        },

        name : function ( $elem ) {
          return $elem.find('.views-field-title .field-content').text();
        }
      }
    });  
      // set up Isotope
      $container.isotope( setupOptions );
  
      var $optionSets = $('#options').find('.option-set'),
          isOptionLinkClicked = false;
  
      // switches selected class on buttons
      function changeSelectedLink( $elem ) {
        // remove selected class on previous item
        $elem.parents('.option-set').find('.selected').removeClass('selected');
        // set selected class on new item
        $elem.addClass('selected');
      }
  

      // change size of clicked element
  $container.delegate( '.element', 'click', function(){
 /*       // first remove all large classes
      $container.find('.large').each(function(){
		$(this).toggleClass('large');
      });   
      */
        // then we can toggle large on the selected item
     $(this).toggleClass('large');
       $container.isotope('reLayout');
      });


      // toggle variable sizes of all elements
      $('#toggle-sizes').find('a').click(function(){
        $container
          .toggleClass('variable-sizes')
          .isotope('reLayout');
        return false;
      });



    var $sortBy = $('#sort-by');
    $('#shuffle a').click(function(){
      $container.isotope('shuffle');
      $sortBy.find('.selected').removeClass('selected');
      $sortBy.find('[data-option-value="random"]').addClass('selected');
      return false;
    });
  
      $optionSets.find('a').click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return;
        }
        changeSelectedLink( $this );
            // get href attr, remove leading #
        var href = $this.attr('href').replace( /^#/, '' ),
            // convert href into object
            // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
            option = $.deparam( href, true );
        // apply new option to previous
        $.extend( isotopeOptions, option );
        // set hash, triggers hashchange on window
        $.bbq.pushState( isotopeOptions );
        isOptionLinkClicked = true;
        return false;
      });


      $(window).bind( 'hashchange', function( event ){
        // get options object from hash
        var hashOptions = window.location.hash ? $.deparam.fragment( window.location.hash, true ) : {},
            // apply defaults where no option was specified
            options = $.extend( {}, defaultOptions, hashOptions );
        // apply options from hash
        $container.isotope( options );
        // save options
        isotopeOptions = hashOptions;
    
        // if option link was not clicked
        // then we'll need to update selected links
        if ( !isOptionLinkClicked ) {
          // iterate over options
          var hrefObj, hrefValue, $selectedLink;
          for ( var key in options ) {
            hrefObj = {};
            hrefObj[ key ] = options[ key ];
            // convert object into parameter string
            // i.e. { filter: '.inner-transition' } -> 'filter=.inner-transition'
            hrefValue = $.param( hrefObj );
            // get matching link
            $selectedLink = $optionSets.find('a[href="#' + hrefValue + '"]');
            changeSelectedLink( $selectedLink );
          }
        }
    
        isOptionLinkClicked = false;
      })



        // trigger hashchange to capture any hash data on init
        .trigger('hashchange');

       
       $container.infinitescroll({
        navSelector  : '.pager',    // selector for the paged navigation 
        nextSelector : '.pager-next a',  // selector for the NEXT link (to page 2)
        itemSelector : '.element',     // selector for all items you'll retrieve
        donetext  : 'no more objects to load',
        loadingImg : '/sites/all/themes/extra/images/loading.gif',
        debug: false,
        errorCallback: function() { 
          // fade out the error message after 2 seconds
          $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   
        }
        },
        // call Isotope as a callback
        function( newElements ) {
          $container.isotope( 'insert', $( newElements )); 
        }
      );


    });
  </script>

this is a little customized to fit nicely in a 960 fixed layout. I included infinite scrolling and back-button support. Don't worry. I have a license for this so everything is fine with modifying the code.

(you should also buy a license even if you don't actually need it. The developer definitely deserves the money.

add some filters and include a full pager for this view (let's set it to 10 items per page). Then you can save the view.
now go to your views module (ftp) and copy the file views-view-unformatted.tpl.php and put it in you theme folder.

modify the template

  <?php if (!empty($title)) : ?>
    <h3><?php print $title; ?></h3>
  <?php endif; ?>

  <div id="container" class="isotope-grid clickable clearfix infinite-scrolling ">
	<?php foreach ($rows as $id => $row): ?>
		<div data-id="id-<?php print $id; ?>" class="<?php print $classes_array[$id]; ?> element" data-category="<?php 
					$txt=$classes_array[$id]; 
$out=preg_split('/\s+/',trim($txt)); 
echo $out[count($out)-1];  
			?>">
<?php print $row;?></div>
    <?php endforeach; ?>
  </div>

this doesn't have to be exactly the same, but this one will definitely work

clear the cache of your Drupal web page
Let's go to the html.tpl.php

we need a workaround to include the jQuery-scripts.

<?php
// $Id: html.tpl.php,v 1.1.2.13 2010/12/13 22:03:04 jmburnz Exp $
?>
<?php print $doctype; ?>
<html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>"<?php print $rdf->version . $rdf->namespaces; ?>>
<head<?php print $rdf->profile; ?>>
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<script src="/sites/all/themes/YOURTHEME/custom-js/jquery-1.6.1.min.js"></script>
<script src="/sites/all/themes/YOURTHEME/custom-js/jquery.isotope.min.js"></script>
<script src="/sites/all/themes/YOURTHEME/custom-js/jquery.infinitescroll.min.js"></script>
<script src="/sites/all/themes/YOURTHEME/custom-js/jquery.ba-bbq.min.js"></script>
<?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>"<?php print $attributes; ?>>
  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
  </div>
<div class="pusher">  
<?php print $page_top; ?>
  <?php print $page; ?>
  <?php print $page_bottom; ?>
</div>
</body>
</html>

the scripts need to be before the Drupal scripts

I added a "pusher" to make the viewport scrollable at any time (we need this to make sure we can load objects if the viewport is smaller than the user's screen)

it's best to create a custom html.php.tpl for that view to make sure you won't mess up anything else in your theme. (this is basic Drupal stuff)

now we need the CSS data. These should be included in your THEME.info file.

the pusher (put this in your theme CSS
```
.pusher{
    min-height:             101%;
    height:                 auto !important;
    height:                 101%;
    margin:                 0 auto ; /* the bottom margin is the negative value of the footer's height */
}
```
we need the isotope's css data. This has to be stripped to the needed classes as it will mess up your theme if you do not.

isotope is a pretty big package, so we really need to get rid of a lot of stuff.
Maybe I will find some time to make a custom css for this, but right now mine is pretty much modified to fit my theme. But I will definitely make this accesible for you guys.

the basic elements should be 130px x 130px the width2 and height2 classes should be set to 270px (height for height2 and width for width2) and the large elements should be set to width:550px; height:270px;

(remember this is needed if you are using my modified script in the footer of the view)
Now let's create 10 objects for term "type1" and 10 objects for term "type2" (with objects I actually mean nodes)
Take a look at your view

for every term you create you need to make a new filter in your header of the view.

with filters I mean this part in your header of the view

      <ul id="filters" class="option-set clearfix" data-option-key="filter">
        <li><a href="#filter=*" data-option-value="*" class="selected" >show all</a></li>
        <li><a href="#filter=.type1" data-option-value=".type1" >Type1</a></li>
        <li><a href="#filter=.type2" data-option-value=".type2">Type2</a></li>
      </ul>

That's it. The rest is dynamic and extendable via taxonomy.

I know this seems like a really long setup, but it should only take you a few minutes to actually do this. Most of it is pretty basic Drupal stuff.

look at a working sample here http://pixelass.de/showcase

You might want to hide the pagers (do not use display:none)

.pager,
.pager a,
.pager a.active,
.pager li a,
.pager a:hover,
.pager a:link,
.pager a:active,
.pager a:visited,
.pager-first, 
.pager-item, 
.pager-current, 
.pager-last, 
.pager-previous, 
.pager-previous a, 
ul.pager li.pager-previous a.active, 
.pager-next
{
    position:               relative;
    left:                   -100000px;
    margin-left:            -100000px;
}

this is described here: http://drupal.org/node/1234704#comment-4869324 (includes a non javascript hack)

And again.. if anybody is interested in developing a module with me... please tell me. This would be a very cool module.

Hey Greg

ipwa commented 20 August 2011 at 16:27

I would be interested in developing this module with you. I I left a comment in the Views Isotope sandbox, but it seems the maintainer doesn't see or know how to use the issue queue yet. I'm very interested in seeing this in Drupal contrib and I already maintain a few Drupal that use jQuery plugins so can definitely help out. It would be good to get the maintainer of the Views Isotope sandbox on board too, will try a direct e-mail. We could develop the work on that sandbox with patches, or if we want to take a different approach, you can create a new sandbox and I can work on it by uploading patches to the queue. Are you on IRC btw?

Nicolas
-------------------------

So.. any news on this? I am

Greg Adams commented 29 August 2011 at 19:14

So.. any news on this?

I am currently looking into making modules, so I guess I will create a fresh (new) module for isotope. The creator of the first approach (the sandboxed module) seems to be an offliner.
Well, like I said, I'm not a pro-coder and this would be my first module, but I'm willing to give it a try...

Great tutorial ! I'm still

drupaltronic commented 28 August 2011 at 06:26

Great tutorial ! I'm still having some little problems : Could you make a link to
your view export txt file (/admin/structure/views/view/isotope_view/export so we can import the view and check it out in detail.
Thanks

Views EXPORT

Greg Adams commented 29 August 2011 at 06:11

This is the view I am using for http://pixelass.com/showcase

But maybe if you tell me what problem you are having, I can give you some advice...
This should pretty much just plug 'n' play...


$view = new view;
$view->name = 'quicksand';
$view->description = 'create a view with the quicksand sorting plugin';
$view->tag = 'default';
$view->base_table = 'node';
$view->human_name = 'quicksand';
$view->core = 7;
$view->api_version = '3.0-alpha1';
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */

/* Display: Master */
$handler = $view->new_display('default', 'Master', 'default');
$handler->display->display_options['title'] = 'quicksand';
$handler->display->display_options['access']['type'] = 'perm';
$handler->display->display_options['cache']['type'] = 'none';
$handler->display->display_options['query']['type'] = 'views_query';
$handler->display->display_options['query']['options']['query_comment'] = FALSE;
$handler->display->display_options['exposed_form']['type'] = 'basic';
$handler->display->display_options['pager']['type'] = 'none';
$handler->display->display_options['pager']['options']['offset'] = '0';
$handler->display->display_options['style_plugin'] = 'list';
$handler->display->display_options['style_options']['row_class'] = '[term_node_tid] [field_works] ';
$handler->display->display_options['style_options']['wrapper_class'] = '';
$handler->display->display_options['row_plugin'] = 'fields';
/* Header: Global: Text area */
$handler->display->display_options['header']['area']['id'] = 'area';
$handler->display->display_options['header']['area']['table'] = 'views';
$handler->display->display_options['header']['area']['field'] = 'area';
$handler->display->display_options['header']['area']['empty'] = FALSE;
$handler->display->display_options['header']['area']['format'] = 'php_code';
$handler->display->display_options['header']['area']['tokenize'] = 0;
/* Header: Global: Text area */
$handler->display->display_options['header']['area_1']['id'] = 'area_1';
$handler->display->display_options['header']['area_1']['table'] = 'views';
$handler->display->display_options['header']['area_1']['field'] = 'area';
$handler->display->display_options['header']['area_1']['empty'] = FALSE;
/* Footer: Global: Text area */
$handler->display->display_options['footer']['area']['id'] = 'area';
$handler->display->display_options['footer']['area']['table'] = 'views';
$handler->display->display_options['footer']['area']['field'] = 'area';
$handler->display->display_options['footer']['area']['empty'] = TRUE;
$handler->display->display_options['footer']['area']['content'] = ' 	<div id="scroll-down"></div> 

 <script>
    $(function(){
  
      var $container = $(\'#container\'),
          // object that will keep track of options
          isotopeOptions = {},
          // defaults, used if not explicitly set in hash
          defaultOptions = {
            filter: \'*\',
            sortBy: \'original-order\',
            sortAscending: true,
            layoutMode: \'masonry\'
          };
        

  
  
  
      var setupOptions = $.extend( {}, defaultOptions, {
        itemSelector : \'.element\',
      masonry : {
        columnWidth : 140
      },
      masonryHorizontal : {
        rowHeight: 140
      },
      cellsByRow : {
        columnWidth :280,
        rowHeight : 280
      },
      cellsByColumn : {
        columnWidth : 280,
        rowHeight : 280
      },
      getSortData : {

        category : function( $elem ) {
          return $elem.attr(\'data-category\');
        },

        name : function ( $elem ) {
          return $elem.find(\'.views-field-title .field-content\').text();
        }
      }
    });  
      // set up Isotope
      $container.isotope( setupOptions );
  
      var $optionSets = $(\'#options\').find(\'.option-set\'),
          isOptionLinkClicked = false;
  
      // switches selected class on buttons
      function changeSelectedLink( $elem ) {
        // remove selected class on previous item
        $elem.parents(\'.option-set\').find(\'.selected\').removeClass(\'selected\');
        // set selected class on new item
        $elem.addClass(\'selected\');
      }
  

      // change size of clicked element
  $container.delegate( \'.element\', \'click\', function(){
 /*       // first remove all large classes
      $container.find(\'.large\').each(function(){
		$(this).toggleClass(\'large\');
      });   
      */
        // then we can toggle large on the selected item
     $(this).toggleClass(\'large\');
       $container.isotope(\'reLayout\');
      });


      // toggle variable sizes of all elements
      $(\'#toggle-sizes\').find(\'a\').click(function(){
        $container
          .toggleClass(\'variable-sizes\')
          .isotope(\'reLayout\');
        return false;
      });



    var $sortBy = $(\'#sort-by\');
    $(\'#shuffle a\').click(function(){
      $container.isotope(\'shuffle\');
      $sortBy.find(\'.selected\').removeClass(\'selected\');
      $sortBy.find(\'[data-option-value="random"]\').addClass(\'selected\');
      return false;
    });
  
      $optionSets.find(\'a\').click(function(){
        var $this = $(this);
        // don\'t proceed if already selected
        if ( $this.hasClass(\'selected\') ) {
          return;
        }
        changeSelectedLink( $this );
            // get href attr, remove leading #
        var href = $this.attr(\'href\').replace( /^#/, \'\' ),
            // convert href into object
            // i.e. \'filter=.inner-transition\' -> { filter: \'.inner-transition\' }
            option = $.deparam( href, true );
        // apply new option to previous
        $.extend( isotopeOptions, option );
        // set hash, triggers hashchange on window
        $.bbq.pushState( isotopeOptions );
        isOptionLinkClicked = true;
        return false;
      });


      $(window).bind( \'hashchange\', function( event ){
        // get options object from hash
        var hashOptions = window.location.hash ? $.deparam.fragment( window.location.hash, true ) : {},
            // apply defaults where no option was specified
            options = $.extend( {}, defaultOptions, hashOptions );
        // apply options from hash
        $container.isotope( options );
        // save options
        isotopeOptions = hashOptions;
    
        // if option link was not clicked
        // then we\'ll need to update selected links
        if ( !isOptionLinkClicked ) {
          // iterate over options
          var hrefObj, hrefValue, $selectedLink;
          for ( var key in options ) {
            hrefObj = {};
            hrefObj[ key ] = options[ key ];
            // convert object into parameter string
            // i.e. { filter: \'.inner-transition\' } -> \'filter=.inner-transition\'
            hrefValue = $.param( hrefObj );
            // get matching link
            $selectedLink = $optionSets.find(\'a[href="#\' + hrefValue + \'"]\');
            changeSelectedLink( $selectedLink );
          }
        }
    
        isOptionLinkClicked = false;
      })



        // trigger hashchange to capture any hash data on init
        .trigger(\'hashchange\');

       
       $container.infinitescroll({
        navSelector  : \'.pager\',    // selector for the paged navigation 
        nextSelector : \'.pager-next a\',  // selector for the NEXT link (to page 2)
        itemSelector : \'.element\',     // selector for all items you\'ll retrieve
        finishedMsg: \'Keine weiteren Objekte\',
        img: \'/sites/all/themes/extra/images/loading.gif\',
        debug: false,
        errorCallback: function() { 
          // fade out the error message after 2 seconds
          $(\'#infscr-loading\').animate({opacity: .8},2000).fadeOut(\'normal\');   
          $(\'#scroll-down\').animate({opacity: .8},2000).fadeOut(\'normal\'); 
        }
        },
        // call Isotope as a callback
        function( newElements ) {
          $container.isotope( \'insert\', $( newElements )); 
        }
      );


    });
  </script>
  
 ';
$handler->display->display_options['footer']['area']['format'] = 'php_code';
$handler->display->display_options['footer']['area']['tokenize'] = 0;
/* Field: Content: All taxonomy terms */
$handler->display->display_options['fields']['term_node_tid']['id'] = 'term_node_tid';
$handler->display->display_options['fields']['term_node_tid']['table'] = 'node';
$handler->display->display_options['fields']['term_node_tid']['field'] = 'term_node_tid';
$handler->display->display_options['fields']['term_node_tid']['label'] = '';
$handler->display->display_options['fields']['term_node_tid']['exclude'] = TRUE;
$handler->display->display_options['fields']['term_node_tid']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['term_node_tid']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['term_node_tid']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['term_node_tid']['alter']['external'] = 0;
$handler->display->display_options['fields']['term_node_tid']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['term_node_tid']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['term_node_tid']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['term_node_tid']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['term_node_tid']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['term_node_tid']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['term_node_tid']['alter']['trim'] = 0;
$handler->display->display_options['fields']['term_node_tid']['alter']['html'] = 0;
$handler->display->display_options['fields']['term_node_tid']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['term_node_tid']['element_default_classes'] = 1;
$handler->display->display_options['fields']['term_node_tid']['hide_empty'] = 0;
$handler->display->display_options['fields']['term_node_tid']['empty_zero'] = 0;
$handler->display->display_options['fields']['term_node_tid']['hide_alter_empty'] = 0;
$handler->display->display_options['fields']['term_node_tid']['separator'] = ' ';
$handler->display->display_options['fields']['term_node_tid']['link_to_taxonomy'] = 1;
$handler->display->display_options['fields']['term_node_tid']['limit'] = 0;
$handler->display->display_options['fields']['term_node_tid']['vocabularies'] = array(
  'webdesign' => 0,
  'works' => 0,
);
/* Field: Content: Works */
$handler->display->display_options['fields']['field_works']['id'] = 'field_works';
$handler->display->display_options['fields']['field_works']['table'] = 'field_data_field_works';
$handler->display->display_options['fields']['field_works']['field'] = 'field_works';
$handler->display->display_options['fields']['field_works']['label'] = '';
$handler->display->display_options['fields']['field_works']['exclude'] = TRUE;
$handler->display->display_options['fields']['field_works']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['field_works']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['field_works']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['field_works']['alter']['external'] = 0;
$handler->display->display_options['fields']['field_works']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['field_works']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['field_works']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['field_works']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['field_works']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['field_works']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['field_works']['alter']['trim'] = 0;
$handler->display->display_options['fields']['field_works']['alter']['html'] = 0;
$handler->display->display_options['fields']['field_works']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_works']['element_default_classes'] = 1;
$handler->display->display_options['fields']['field_works']['hide_empty'] = 0;
$handler->display->display_options['fields']['field_works']['empty_zero'] = 0;
$handler->display->display_options['fields']['field_works']['hide_alter_empty'] = 0;
$handler->display->display_options['fields']['field_works']['field_api_classes'] = 0;
/* Field: Content: Screenshots */
$handler->display->display_options['fields']['field_screenshots_1']['id'] = 'field_screenshots_1';
$handler->display->display_options['fields']['field_screenshots_1']['table'] = 'field_data_field_screenshots';
$handler->display->display_options['fields']['field_screenshots_1']['field'] = 'field_screenshots';
$handler->display->display_options['fields']['field_screenshots_1']['label'] = '';
$handler->display->display_options['fields']['field_screenshots_1']['exclude'] = TRUE;
$handler->display->display_options['fields']['field_screenshots_1']['alter']['alter_text'] = 1;
$handler->display->display_options['fields']['field_screenshots_1']['alter']['text'] = '[field_screenshots_1-title]';
$handler->display->display_options['fields']['field_screenshots_1']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['field_screenshots_1']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['field_screenshots_1']['alter']['external'] = 0;
$handler->display->display_options['fields']['field_screenshots_1']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['field_screenshots_1']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['field_screenshots_1']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['field_screenshots_1']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['field_screenshots_1']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['field_screenshots_1']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['field_screenshots_1']['alter']['trim'] = 0;
$handler->display->display_options['fields']['field_screenshots_1']['alter']['html'] = 0;
$handler->display->display_options['fields']['field_screenshots_1']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_screenshots_1']['element_default_classes'] = 1;
$handler->display->display_options['fields']['field_screenshots_1']['hide_empty'] = 0;
$handler->display->display_options['fields']['field_screenshots_1']['empty_zero'] = 0;
$handler->display->display_options['fields']['field_screenshots_1']['hide_alter_empty'] = 0;
$handler->display->display_options['fields']['field_screenshots_1']['click_sort_column'] = 'fid';
$handler->display->display_options['fields']['field_screenshots_1']['settings'] = array(
  'image_style' => '',
  'image_link' => '',
);
$handler->display->display_options['fields']['field_screenshots_1']['group_rows'] = 1;
$handler->display->display_options['fields']['field_screenshots_1']['delta_limit'] = '1';
$handler->display->display_options['fields']['field_screenshots_1']['delta_offset'] = '0';
$handler->display->display_options['fields']['field_screenshots_1']['delta_reversed'] = 0;
$handler->display->display_options['fields']['field_screenshots_1']['field_api_classes'] = 0;
/* Field: Content: Features */
$handler->display->display_options['fields']['field_features']['id'] = 'field_features';
$handler->display->display_options['fields']['field_features']['table'] = 'field_data_field_features';
$handler->display->display_options['fields']['field_features']['field'] = 'field_features';
$handler->display->display_options['fields']['field_features']['label'] = '';
$handler->display->display_options['fields']['field_features']['exclude'] = TRUE;
$handler->display->display_options['fields']['field_features']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['field_features']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['field_features']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['field_features']['alter']['external'] = 0;
$handler->display->display_options['fields']['field_features']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['field_features']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['field_features']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['field_features']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['field_features']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['field_features']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['field_features']['alter']['trim'] = 0;
$handler->display->display_options['fields']['field_features']['alter']['html'] = 0;
$handler->display->display_options['fields']['field_features']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_features']['element_default_classes'] = 1;
$handler->display->display_options['fields']['field_features']['hide_empty'] = 0;
$handler->display->display_options['fields']['field_features']['empty_zero'] = 0;
$handler->display->display_options['fields']['field_features']['hide_alter_empty'] = 0;
$handler->display->display_options['fields']['field_features']['type'] = 'taxonomy_term_reference_plain';
$handler->display->display_options['fields']['field_features']['group_rows'] = 1;
$handler->display->display_options['fields']['field_features']['delta_offset'] = '0';
$handler->display->display_options['fields']['field_features']['delta_reversed'] = 0;
$handler->display->display_options['fields']['field_features']['field_api_classes'] = 0;
/* Field: Content: Title */
$handler->display->display_options['fields']['title']['id'] = 'title';
$handler->display->display_options['fields']['title']['table'] = 'node';
$handler->display->display_options['fields']['title']['field'] = 'title';
$handler->display->display_options['fields']['title']['label'] = '';
$handler->display->display_options['fields']['title']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['title']['alter']['text'] = '<div title="[field_features] &lt;img src=&quot;/sites/all/themes/jQueryfied/images/bg/stripes_light.png&quot;&gt; [field_screenshots_1]" class="tool-tip">[title]</div>';
$handler->display->display_options['fields']['title']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['title']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['title']['alter']['external'] = 0;
$handler->display->display_options['fields']['title']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['title']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['title']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['title']['alter']['word_boundary'] = 0;
$handler->display->display_options['fields']['title']['alter']['ellipsis'] = 0;
$handler->display->display_options['fields']['title']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['title']['alter']['trim'] = 0;
$handler->display->display_options['fields']['title']['alter']['html'] = 0;
$handler->display->display_options['fields']['title']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['title']['element_default_classes'] = 1;
$handler->display->display_options['fields']['title']['hide_empty'] = 0;
$handler->display->display_options['fields']['title']['empty_zero'] = 0;
$handler->display->display_options['fields']['title']['hide_alter_empty'] = 0;
$handler->display->display_options['fields']['title']['link_to_node'] = 0;
/* Field: Content: Inhalt */
$handler->display->display_options['fields']['field_page_inhalt']['id'] = 'field_page_inhalt';
$handler->display->display_options['fields']['field_page_inhalt']['table'] = 'field_data_field_page_inhalt';
$handler->display->display_options['fields']['field_page_inhalt']['field'] = 'field_page_inhalt';
$handler->display->display_options['fields']['field_page_inhalt']['label'] = '';
$handler->display->display_options['fields']['field_page_inhalt']['exclude'] = TRUE;
$handler->display->display_options['fields']['field_page_inhalt']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['field_page_inhalt']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['field_page_inhalt']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['field_page_inhalt']['alter']['external'] = 0;
$handler->display->display_options['fields']['field_page_inhalt']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['field_page_inhalt']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['field_page_inhalt']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['field_page_inhalt']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['field_page_inhalt']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['field_page_inhalt']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['field_page_inhalt']['alter']['trim'] = 0;
$handler->display->display_options['fields']['field_page_inhalt']['alter']['html'] = 0;
$handler->display->display_options['fields']['field_page_inhalt']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_page_inhalt']['element_default_classes'] = 1;
$handler->display->display_options['fields']['field_page_inhalt']['hide_empty'] = 0;
$handler->display->display_options['fields']['field_page_inhalt']['empty_zero'] = 0;
$handler->display->display_options['fields']['field_page_inhalt']['hide_alter_empty'] = 0;
$handler->display->display_options['fields']['field_page_inhalt']['field_api_classes'] = 0;
/* Field: Content: Image */
$handler->display->display_options['fields']['field_page_image_1']['id'] = 'field_page_image_1';
$handler->display->display_options['fields']['field_page_image_1']['table'] = 'field_data_field_page_image_1';
$handler->display->display_options['fields']['field_page_image_1']['field'] = 'field_page_image_1';
$handler->display->display_options['fields']['field_page_image_1']['label'] = '';
$handler->display->display_options['fields']['field_page_image_1']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['field_page_image_1']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['field_page_image_1']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['field_page_image_1']['alter']['external'] = 0;
$handler->display->display_options['fields']['field_page_image_1']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['field_page_image_1']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['field_page_image_1']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['field_page_image_1']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['field_page_image_1']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['field_page_image_1']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['field_page_image_1']['alter']['trim'] = 0;
$handler->display->display_options['fields']['field_page_image_1']['alter']['html'] = 0;
$handler->display->display_options['fields']['field_page_image_1']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_page_image_1']['element_default_classes'] = 1;
$handler->display->display_options['fields']['field_page_image_1']['hide_empty'] = 1;
$handler->display->display_options['fields']['field_page_image_1']['empty_zero'] = 0;
$handler->display->display_options['fields']['field_page_image_1']['hide_alter_empty'] = 0;
$handler->display->display_options['fields']['field_page_image_1']['click_sort_column'] = 'fid';
$handler->display->display_options['fields']['field_page_image_1']['settings'] = array(
  'image_style' => 'medium',
  'image_link' => '',
);
$handler->display->display_options['fields']['field_page_image_1']['field_api_classes'] = 0;
/* Field: Content: Screenshots */
$handler->display->display_options['fields']['field_screenshots']['id'] = 'field_screenshots';
$handler->display->display_options['fields']['field_screenshots']['table'] = 'field_data_field_screenshots';
$handler->display->display_options['fields']['field_screenshots']['field'] = 'field_screenshots';
$handler->display->display_options['fields']['field_screenshots']['label'] = '';
$handler->display->display_options['fields']['field_screenshots']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['field_screenshots']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['field_screenshots']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['field_screenshots']['alter']['external'] = 0;
$handler->display->display_options['fields']['field_screenshots']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['field_screenshots']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['field_screenshots']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['field_screenshots']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['field_screenshots']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['field_screenshots']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['field_screenshots']['alter']['trim'] = 0;
$handler->display->display_options['fields']['field_screenshots']['alter']['html'] = 0;
$handler->display->display_options['fields']['field_screenshots']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_screenshots']['element_default_classes'] = 1;
$handler->display->display_options['fields']['field_screenshots']['hide_empty'] = 1;
$handler->display->display_options['fields']['field_screenshots']['empty_zero'] = 0;
$handler->display->display_options['fields']['field_screenshots']['hide_alter_empty'] = 0;
$handler->display->display_options['fields']['field_screenshots']['click_sort_column'] = 'fid';
$handler->display->display_options['fields']['field_screenshots']['settings'] = array(
  'image_style' => 'medium',
  'image_link' => '',
);
$handler->display->display_options['fields']['field_screenshots']['group_rows'] = 1;
$handler->display->display_options['fields']['field_screenshots']['delta_limit'] = '1';
$handler->display->display_options['fields']['field_screenshots']['delta_offset'] = '0';
$handler->display->display_options['fields']['field_screenshots']['delta_reversed'] = 0;
$handler->display->display_options['fields']['field_screenshots']['field_api_classes'] = 0;
/* Field: Content: Entwicklungsvorgang */
$handler->display->display_options['fields']['field_ewv']['id'] = 'field_ewv';
$handler->display->display_options['fields']['field_ewv']['table'] = 'field_data_field_ewv';
$handler->display->display_options['fields']['field_ewv']['field'] = 'field_ewv';
$handler->display->display_options['fields']['field_ewv']['label'] = '';
$handler->display->display_options['fields']['field_ewv']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['field_ewv']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['field_ewv']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['field_ewv']['alter']['external'] = 0;
$handler->display->display_options['fields']['field_ewv']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['field_ewv']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['field_ewv']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['field_ewv']['alter']['max_length'] = '200';
$handler->display->display_options['fields']['field_ewv']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['field_ewv']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['field_ewv']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['field_ewv']['alter']['trim'] = 1;
$handler->display->display_options['fields']['field_ewv']['alter']['html'] = 0;
$handler->display->display_options['fields']['field_ewv']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_ewv']['element_default_classes'] = 1;
$handler->display->display_options['fields']['field_ewv']['hide_empty'] = 0;
$handler->display->display_options['fields']['field_ewv']['empty_zero'] = 0;
$handler->display->display_options['fields']['field_ewv']['hide_alter_empty'] = 0;
$handler->display->display_options['fields']['field_ewv']['field_api_classes'] = 0;
/* Field: Content: Link */
$handler->display->display_options['fields']['view_node']['id'] = 'view_node';
$handler->display->display_options['fields']['view_node']['table'] = 'node';
$handler->display->display_options['fields']['view_node']['field'] = 'view_node';
$handler->display->display_options['fields']['view_node']['label'] = '';
$handler->display->display_options['fields']['view_node']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['view_node']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['view_node']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['view_node']['alter']['external'] = 0;
$handler->display->display_options['fields']['view_node']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['view_node']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['view_node']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['view_node']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['view_node']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['view_node']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['view_node']['alter']['trim'] = 0;
$handler->display->display_options['fields']['view_node']['alter']['html'] = 0;
$handler->display->display_options['fields']['view_node']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['view_node']['element_default_classes'] = 1;
$handler->display->display_options['fields']['view_node']['hide_empty'] = 0;
$handler->display->display_options['fields']['view_node']['empty_zero'] = 0;
$handler->display->display_options['fields']['view_node']['hide_alter_empty'] = 0;
$handler->display->display_options['fields']['view_node']['text'] = 'Details>';
/* Field: Content: Edit link */
$handler->display->display_options['fields']['edit_node']['id'] = 'edit_node';
$handler->display->display_options['fields']['edit_node']['table'] = 'node';
$handler->display->display_options['fields']['edit_node']['field'] = 'edit_node';
$handler->display->display_options['fields']['edit_node']['label'] = '';
$handler->display->display_options['fields']['edit_node']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['edit_node']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['edit_node']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['edit_node']['alter']['external'] = 0;
$handler->display->display_options['fields']['edit_node']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['edit_node']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['edit_node']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['edit_node']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['edit_node']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['edit_node']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['edit_node']['alter']['trim'] = 0;
$handler->display->display_options['fields']['edit_node']['alter']['html'] = 0;
$handler->display->display_options['fields']['edit_node']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['edit_node']['element_default_classes'] = 1;
$handler->display->display_options['fields']['edit_node']['hide_empty'] = 0;
$handler->display->display_options['fields']['edit_node']['empty_zero'] = 0;
$handler->display->display_options['fields']['edit_node']['hide_alter_empty'] = 0;
$handler->display->display_options['fields']['edit_node']['text'] = 'bearbeiten';
/* Sort criterion: Content: Post date */
$handler->display->display_options['sorts']['created']['id'] = 'created';
$handler->display->display_options['sorts']['created']['table'] = 'node';
$handler->display->display_options['sorts']['created']['field'] = 'created';
$handler->display->display_options['sorts']['created']['order'] = 'DESC';
/* Filter criterion: Content: Published */
$handler->display->display_options['filters']['status']['id'] = 'status';
$handler->display->display_options['filters']['status']['table'] = 'node';
$handler->display->display_options['filters']['status']['field'] = 'status';
$handler->display->display_options['filters']['status']['value'] = 1;
$handler->display->display_options['filters']['status']['group'] = 0;
$handler->display->display_options['filters']['status']['expose']['operator'] = FALSE;
/* Filter criterion: Content: Type */
$handler->display->display_options['filters']['type']['id'] = 'type';
$handler->display->display_options['filters']['type']['table'] = 'node';
$handler->display->display_options['filters']['type']['field'] = 'type';
$handler->display->display_options['filters']['type']['value'] = array(
  'showcase' => 'showcase',
);

/* Display: Page */
$handler = $view->new_display('page', 'Page', 'page_1');
$handler->display->display_options['defaults']['title'] = FALSE;
$handler->display->display_options['title'] = 'Showcase';
$handler->display->display_options['defaults']['use_ajax'] = FALSE;
$handler->display->display_options['defaults']['pager'] = FALSE;
$handler->display->display_options['pager']['type'] = 'full';
$handler->display->display_options['pager']['options']['items_per_page'] = '27';
$handler->display->display_options['pager']['options']['offset'] = '';
$handler->display->display_options['pager']['options']['id'] = '0';
$handler->display->display_options['pager']['options']['expose']['items_per_page_options_all'] = 0;
$handler->display->display_options['defaults']['style_plugin'] = FALSE;
$handler->display->display_options['style_plugin'] = 'default';
$handler->display->display_options['style_options']['row_class'] = '[term_node_tid] [field_works] ';
$handler->display->display_options['defaults']['style_options'] = FALSE;
$handler->display->display_options['defaults']['row_plugin'] = FALSE;
$handler->display->display_options['row_plugin'] = 'fields';
$handler->display->display_options['defaults']['row_options'] = FALSE;
$handler->display->display_options['defaults']['header'] = FALSE;
/* Header: Global: Text area */
$handler->display->display_options['header']['area_1']['id'] = 'area_1';
$handler->display->display_options['header']['area_1']['table'] = 'views';
$handler->display->display_options['header']['area_1']['field'] = 'area';
$handler->display->display_options['header']['area_1']['empty'] = TRUE;
$handler->display->display_options['header']['area_1']['content'] = '  <section id="options" class="clearfix">
 <div class="showcase-filters">
    <h3>Filter:</h3> <ul id="filters" class="option-set clearfix" data-option-key="filter">
        <li><a href="#filter=*" data-option-value="*" class="selected" >Alle anzeigen</a></li>
        <li><a href="#filter=.webdesign" data-option-value=".webdesign" >Webdesign</a></li>
        <li><a href="#filter=.photography" data-option-value=".photography">Fotografie</a></li>
        <li><a href="#filter=.graphicdesign" data-option-value=".graphicdesign">Grafikdesign</a></li>
        <li><a href="#filter=.art" data-option-value=".art">Kunst</a></li>
        <li><a href="#filter=.logo" data-option-value=".logo">Logos</a></li>
        <li><a href="#filter=.software" data-option-value=".software">Software/Apps</a></li>
      </ul>
</div>
 <div class="showcase-filters">
<h3>Sortieren:</h3>    <ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
      <li><a href="#sortBy=name" data-option-value="name">Name</a></li>
      <li><a href="#sortBy=category" data-option-value="category">Kategorie</a></li>
      <li><a href="#sortBy=random" data-option-value="random">Random</a></li>
 </ul>
</div>

 <div class="showcase-filters">
<h3>Reihenfolge:</h3> <ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending">
      <li><a href="#sortAscending=true" data-option-value="true" class="selected">Aufsteigend</a></li>
      <li><a href="#sortAscending=false" data-option-value="false">Absteigend</a></li>
    </ul>
</div>

  </section> <!-- #options -->
';
$handler->display->display_options['header']['area_1']['format'] = 'php_code';
$handler->display->display_options['header']['area_1']['tokenize'] = 0;
$handler->display->display_options['path'] = 'showcase';
$translatables['quicksand'] = array(
  t('Master'),
  t('quicksand'),
  t('more'),
  t('Apply'),
  t('Reset'),
  t('Sort by'),
  t('Asc'),
  t('Desc'),
  t(' 	<div id="scroll-down"></div> 

 <script>
    $(function(){
  
      var $container = $(\'#container\'),
          // object that will keep track of options
          isotopeOptions = {},
          // defaults, used if not explicitly set in hash
          defaultOptions = {
            filter: \'*\',
            sortBy: \'original-order\',
            sortAscending: true,
            layoutMode: \'masonry\'
          };
        

  
  
  
      var setupOptions = $.extend( {}, defaultOptions, {
        itemSelector : \'.element\',
      masonry : {
        columnWidth : 140
      },
      masonryHorizontal : {
        rowHeight: 140
      },
      cellsByRow : {
        columnWidth :280,
        rowHeight : 280
      },
      cellsByColumn : {
        columnWidth : 280,
        rowHeight : 280
      },
      getSortData : {

        category : function( $elem ) {
          return $elem.attr(\'data-category\');
        },

        name : function ( $elem ) {
          return $elem.find(\'.views-field-title .field-content\').text();
        }
      }
    });  
      // set up Isotope
      $container.isotope( setupOptions );
  
      var $optionSets = $(\'#options\').find(\'.option-set\'),
          isOptionLinkClicked = false;
  
      // switches selected class on buttons
      function changeSelectedLink( $elem ) {
        // remove selected class on previous item
        $elem.parents(\'.option-set\').find(\'.selected\').removeClass(\'selected\');
        // set selected class on new item
        $elem.addClass(\'selected\');
      }
  

      // change size of clicked element
  $container.delegate( \'.element\', \'click\', function(){
 /*       // first remove all large classes
      $container.find(\'.large\').each(function(){
		$(this).toggleClass(\'large\');
      });   
      */
        // then we can toggle large on the selected item
     $(this).toggleClass(\'large\');
       $container.isotope(\'reLayout\');
      });


      // toggle variable sizes of all elements
      $(\'#toggle-sizes\').find(\'a\').click(function(){
        $container
          .toggleClass(\'variable-sizes\')
          .isotope(\'reLayout\');
        return false;
      });



    var $sortBy = $(\'#sort-by\');
    $(\'#shuffle a\').click(function(){
      $container.isotope(\'shuffle\');
      $sortBy.find(\'.selected\').removeClass(\'selected\');
      $sortBy.find(\'[data-option-value="random"]\').addClass(\'selected\');
      return false;
    });
  
      $optionSets.find(\'a\').click(function(){
        var $this = $(this);
        // don\'t proceed if already selected
        if ( $this.hasClass(\'selected\') ) {
          return;
        }
        changeSelectedLink( $this );
            // get href attr, remove leading #
        var href = $this.attr(\'href\').replace( /^#/, \'\' ),
            // convert href into object
            // i.e. \'filter=.inner-transition\' -> { filter: \'.inner-transition\' }
            option = $.deparam( href, true );
        // apply new option to previous
        $.extend( isotopeOptions, option );
        // set hash, triggers hashchange on window
        $.bbq.pushState( isotopeOptions );
        isOptionLinkClicked = true;
        return false;
      });


      $(window).bind( \'hashchange\', function( event ){
        // get options object from hash
        var hashOptions = window.location.hash ? $.deparam.fragment( window.location.hash, true ) : {},
            // apply defaults where no option was specified
            options = $.extend( {}, defaultOptions, hashOptions );
        // apply options from hash
        $container.isotope( options );
        // save options
        isotopeOptions = hashOptions;
    
        // if option link was not clicked
        // then we\'ll need to update selected links
        if ( !isOptionLinkClicked ) {
          // iterate over options
          var hrefObj, hrefValue, $selectedLink;
          for ( var key in options ) {
            hrefObj = {};
            hrefObj[ key ] = options[ key ];
            // convert object into parameter string
            // i.e. { filter: \'.inner-transition\' } -> \'filter=.inner-transition\'
            hrefValue = $.param( hrefObj );
            // get matching link
            $selectedLink = $optionSets.find(\'a[href="#\' + hrefValue + \'"]\');
            changeSelectedLink( $selectedLink );
          }
        }
    
        isOptionLinkClicked = false;
      })



        // trigger hashchange to capture any hash data on init
        .trigger(\'hashchange\');

       
       $container.infinitescroll({
        navSelector  : \'.pager\',    // selector for the paged navigation 
        nextSelector : \'.pager-next a\',  // selector for the NEXT link (to page 2)
        itemSelector : \'.element\',     // selector for all items you\'ll retrieve
        finishedMsg: \'Keine weiteren Objekte\',
        img: \'/sites/all/themes/extra/images/loading.gif\',
        debug: false,
        errorCallback: function() { 
          // fade out the error message after 2 seconds
          $(\'#infscr-loading\').animate({opacity: .8},2000).fadeOut(\'normal\');   
          $(\'#scroll-down\').animate({opacity: .8},2000).fadeOut(\'normal\'); 
        }
        },
        // call Isotope as a callback
        function( newElements ) {
          $container.isotope( \'insert\', $( newElements )); 
        }
      );


    });
  </script>
  
 '),
  t('[field_screenshots_1-title]'),
  t('<div title="[field_features] &lt;img src=&quot;/sites/all/themes/jQueryfied/images/bg/stripes_light.png&quot;&gt; [field_screenshots_1]" class="tool-tip">[title]</div>'),
  t('Details>'),
  t('bearbeiten'),
  t('Page'),
  t('Showcase'),
  t('Items per page'),
  t('- All -'),
  t('Offset'),
  t('  <section id="options" class="clearfix">
 <div class="showcase-filters">
    <h3>Filter:</h3> <ul id="filters" class="option-set clearfix" data-option-key="filter">
        <li><a href="#filter=*" data-option-value="*" class="selected" >Alle anzeigen</a></li>
        <li><a href="#filter=.webdesign" data-option-value=".webdesign" >Webdesign</a></li>
        <li><a href="#filter=.photography" data-option-value=".photography">Fotografie</a></li>
        <li><a href="#filter=.graphicdesign" data-option-value=".graphicdesign">Grafikdesign</a></li>
        <li><a href="#filter=.art" data-option-value=".art">Kunst</a></li>
        <li><a href="#filter=.logo" data-option-value=".logo">Logos</a></li>
        <li><a href="#filter=.software" data-option-value=".software">Software/Apps</a></li>
      </ul>
</div>
 <div class="showcase-filters">
<h3>Sortieren:</h3>    <ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
      <li><a href="#sortBy=name" data-option-value="name">Name</a></li>
      <li><a href="#sortBy=category" data-option-value="category">Kategorie</a></li>
      <li><a href="#sortBy=random" data-option-value="random">Random</a></li>
 </ul>
</div>

 <div class="showcase-filters">
<h3>Reihenfolge:</h3> <ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending">
      <li><a href="#sortAscending=true" data-option-value="true" class="selected">Aufsteigend</a></li>
      <li><a href="#sortAscending=false" data-option-value="false">Absteigend</a></li>
    </ul>
</div>

  </section> <!-- #options -->
'),
);

Would like to contribute

rypit commented 14 October 2011 at 14:17

Greg,

We've recently been developing almost the exactly same behavior on a d6 site for one of our clients: http://mexicotoday.org

We make use of the JSON service module, and a custom states handler which basically uses jqbbq for browsers that support hashchange, but uses history.popState for more modern browsers (so we can actually have pretty urls [no #hashes]).

Our application states handler looks at the request url, and passes it as arguments to our view via service calls. We've extended JSON Service to support localized content as well.

We've built in infinite scroll but our implementation needs improved.

We started from scratch on this a while ago based on mosaic (pre-isotope), and we're actually going to be re-writing/refactoring a lot of the functionality for d7.

One thing we need to address is that depending on implementation, users may want to write their own javascript to handle application state changes. To address this, I intend to define a js "plugin" based solution. The way we intend to move forward with a module for this is to provide a "STARTERKIT" similar to how the zen theme does. The idea is that when a link is clicked, we use our states module set the URL/hash and to call a "Drupal.states.plugins" function which will define what the application should do.

JQ bbq is nice, but i think that we should roll our own that makes use of modernizr so we can support popStates with pretty URLs where available.

Basically, I'm of the opinion that while isotope is AMAZING, the functionality for hashchanges/popStates should be extendable and separate per implementation, that way the end user can define what the application does when the state changes.

I'm not sure if any d7 projects exist for this, but if not I'll start one. I'd like for us to develop these modules to easily interact. I think that the isotope/infinite scroll stuff could really benefit/make use of a solid states handler module. With d7, this should be made easier by the fact that JSON is built in.

Let me know your thoughts,

feature export

drupaltronic commented 6 September 2011 at 06:25

Wonder If you could export your content type & view via the features module :
http://drupal.org/project/features
This way we can import everything real easy.

Thanks for your great work !

open access demo

Greg Adams commented 13 September 2011 at 10:02

I cannot install a module on the site just to export things for you... sorry...

Do you think an open access demo site would help?
I could just make a demo with the isotope plugin and views, so everybody could look into the setup.
Just need to find some spare time.. I'm currently kinda lazy in my free time (work is killing me right now).

But I guess it's best to wait until someone decides to give me a chance... and teams up for module-development...

Please do setup an open source version.

ydnar79 commented 28 September 2011 at 14:19

Greg,

I greatly appreciate your effort.... I have been playing around with the isotope setup that you recommended since yesterday.

While I have made great progress in configuring things, being able to see exactly how you configured everything yourself would be greatly appreciated.

(Especially, the cool expandable boxes that give greater details when clicked.... then shrink back down if the user clicks again.)

Thanks.....

I have made a few more

Greg Adams commented 10 October 2011 at 02:02

I have made a few more websites using the isotope plugin.
Here's another approach for resizing the boxes and changing the content...(for Wordpress) http://dream-world.us. (The theme already used isotope, but I made some major changes to it's behavior)

The more I use this plugin, the more I realize what a really amazing plugin this is.

I am currently making a website that includes multiple isotope views on one page with different functionalities.
I am also integrating editable_fields to use the isotope plugin as an inline editor.
the size of each box can be set to relative or absolute with a grid system (inline editing)
the weight can be changed inline....
the content can be changed inline....
the images can be changed inline....
the terms can be changed inline...etc.

After this website is done I will start making a theme that integrates the isotope plugin, provide view exports, taxonomy exports and content-type exports.
That way the setup should only take as long as it takes to install a theme and import a few files.

I haven't had time to look into making a module for this but writing an entire theme for this seems to make more sense to me right now.
I guess I will be using the amazing ADAPTIVETHEME Core and create a subtheme for that.

Views Quicksand module (Sandbox)

leschekfm commented 21 September 2011 at 16:42

Hi,
if anyone is still interested..

I created a Views Quicksand sandbox module (d7) which integrates into views as a style plugin. Therefore it should work with any content you can provide with views.

It would be nice if a few people could test it and provide feedback

making a module and theme

Greg Adams commented 14 October 2011 at 01:03

OK, so I have started writing a module but it's gonna take a little, since i'm pretty new to this stuff.
I have also started making a theme. it's a subtheme for ADAPTIVETHEMES.
The theme is still pretty blank, but includes a few jQuery scripts.

here's a new Demo of the isotope plugin for Views in Drupal7.

http://isotope.pixelass.com

The module is going to start off as a small module since I'm just learning how to make one.
The Module will provide two Views Style plugins, Taxonomies and a Content type. Of course other Taxonomies and Content types can also be used.

Progress:

isotope integration
infinite scrolling integration
jQuery BBQ integration
two custom Views StylePlugins
custom Taxonomies
custom (example) ContentType

To Do:

extend Views StylePlugin with options
use exposed Views Filters for Filtering
allow AJAX Views
~~Create custom Taxonomies~~
update the custom (example) ContentType

Why a theme AND a module?

The module itself should give a lot of options and the possibility to fit into any theme.
The theme will optimize and extend the workflow and behavior of the module.

History.js

rypit commented 14 October 2011 at 14:29

https://github.com/balupton/History.js
Looks like it might work better than bbq -- features popState with hashchange fallback.

http://balupton.github.com/history.js/demo/ for the demo.

Let me know what you think

Sandbox for Isotope

Greg Adams commented 14 October 2011 at 20:30

http://drupal.org/sandbox/GregAdams/1308126

Is there a jquery quicksand view module?

Comments

Isotope

I'm looking for the same

Quicksand for drupal

Greg this is awesome, can you

Quicksand for drupal

I am currently trying to get

forgot to mention.... I am

Isotope works like a charm

Greg, many thanks for posting

You should definitely go with

Next step

How to for D7

This is a quick roundup. I

Hey Greg

So.. any news on this? I am

Great tutorial ! I'm still

Views EXPORT

Would like to contribute

feature export

open access demo

Please do setup an open source version.

I have made a few more

Views Quicksand module (Sandbox)

making a module and theme

History.js

Sandbox for Isotope

New forum topics

News items

Our community

Documentation

Drupal code base

Governance of community