Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<pre><code>$(document).ready(function(){ $('.fancygallery-panel').wrapAll('&lt;div id="isotopeCont" /&gt;'); $('#filters a').click(function(){ var selector = $(this).attr('data-filter'); $('#isotopeCont').isotope({ filter: selector , animationEngine:'best-available' }); return false; }); }) </code></pre> <p>I'm no jQuery expert, but don't you need the document ready in there? I set up isotope differently using classes on the list items and also an active state. This is my code.</p> <p>HTML for the filter</p> <pre><code>&lt;div id="filter"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="" title="*"&gt;All&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="" title="test1"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="" title="test2"&gt;2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="" title="test3"&gt;3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="" title="test4"&gt;4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="" title="test5"&gt;5&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="" title="test6"&gt;6&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>Gallery of list items</p> <pre><code>&lt;ul class="gallery simple" data-current=""&gt; &lt;li class="test5"&gt; &lt;a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery" title=""&gt;&lt;span class="hover"&gt;&lt;/span&gt;&lt;img src="image.jpg"/&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="test6"&gt; &lt;a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery" title=""&gt;&lt;span class="hover"&gt;&lt;/span&gt;&lt;img src="image.jpg"/&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="test5"&gt; &lt;a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery" title=""&gt;&lt;span class="hover"&gt;&lt;/span&gt;&lt;img src="image.jpg"/&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="test3"&gt; &lt;a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery" title=""&gt;&lt;span class="hover"&gt;&lt;/span&gt;&lt;img src="image.jpg"/&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="test1"&gt; &lt;a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery" title=""&gt;&lt;span class="hover"&gt;&lt;/span&gt;&lt;img src="image.jpg"/&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="test2"&gt; &lt;a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery" title=""&gt;&lt;span class="hover"&gt;&lt;/span&gt;&lt;img src="image.jpg"/&gt;&lt;/a&gt; &lt;/li&gt; </code></pre> <p></p> <p>JQuery</p> <pre><code>&lt;script src="PATHTOYOURJSDIR/jquery.isotope.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ var $container = $('ul.gallery'); var toFilter = '*'; $container.isotope({ filter: toFilter, animationOptions: { duration: 750, easing: 'linear', queue: false } }); $container.attr('data-current',toFilter); checkActive(); $('#filter a').click(function(){ var title = $(this).attr('title'); var text = $(this).text(); if(text == "All"){ var selector = title; } else { var selector = "." + title; } $container.attr('data-current',selector); $container.isotope({ filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); checkActive(); return false; }); function checkActive(){ $('#filter a').each(function(){ $(this).removeClass("current"); var title = $(this).attr('title'); title = '.'+title; if(title=='.*'){ title = '*'; } var currentCat = $container.attr('data-current'); if(title==currentCat){ $(this).addClass("current"); } }); } var $container = $('ul.gallery') // initialize Isotope $container.isotope({ // options... resizable: false, // disable normal resizing // set columnWidth to a percentage of container width masonry: { columnWidth: $container.width() / 4 } }); // update columnWidth on window resize $(window).smartresize(function(){ $container.isotope({ // update columnWidth to a percentage of container width masonry: { columnWidth: $container.width() / 4 } }); }); // trigger isotope again after images have loaded $container.imagesLoaded( function(){ $(window).smartresize(); }); }); &lt;/script&gt; </code></pre> <p>I'm doing a four across responsive design, you'll have to modify this according to your layout and change the classes and ids. Make sure to marry up with the ones called in the html to the ones used in the jQuery.. #filter ul.gallery etc., and close all tags, this system is not showing the closing &lt;/ul&gt;</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload