Databases
StackOverflow2013
Postsdbo
POIsotope filter - have to click twice to filter
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIsotope filter - have to click twice to filter
    primarykey
    data
    text
    <p>I am using an Isotope filter combined with a Fancybox gallery and have modified the Isotope JS so that Fancybox only scrolls through those images that are filtered. The problem is that now to activate the Isotope filter I have to click twice on the filter menu to initialise it. I'm hoping someone may be able to spot the problem in my code to help me out:</p> <p>Here is the JS for the filter:</p> <pre><code>DK.filter = function (){ if($('#projects').length &gt; 0){ var $container = $('#projects'); $container.imagesLoaded(function() { $container.isotope({ // options animationEngine: 'best-available', itemSelector : '.item-thumbs', layoutMode : 'fitRows' }); }); // filter items when filter link is clicked 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'); // open filtered items only $('#filters a').click(function(){ var selector = $(this).attr('data-filter'); $('#projects').isotope({ filter: selector }, function(){ if(selector == "*"){ $(".fancybox").attr("data-fancybox-group", "gallery"); } else{ $(selector).find(".fancybox").attr("data-fancybox-group", selector); } }); return false; }); // 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' &amp;&amp; typeof changeLayoutMode === 'function' ) { // changes in layout modes need extra logic changeLayoutMode( $this, options ) } else { // otherwise, apply new options $container.isotope( options ); } return false; }); } } </code></pre> <p>and here is the HTML from the beginning of the filtered section:</p> <pre><code> &lt;div class="row"&gt; &lt;div class="span12"&gt; &lt;!-- Filter --&gt; &lt;nav id="options" class="work-nav"&gt; &lt;ul id="filters" class="option-set" data-option-key="filter"&gt; &lt;li class="type-work"&gt;Type of Work&lt;/li&gt; &lt;li&gt;&lt;a href="#" data-filter="*" class="selected"&gt;All Projects&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" data-filter=".red"&gt;Red&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" data-filter=".green"&gt;Green&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" data-filter=".blue"&gt;Blue&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;!-- End Filter --&gt; &lt;/div&gt; &lt;div class="span12"&gt; &lt;div class="row"&gt; &lt;section id="projects"&gt; &lt;ul id="thumbs"&gt; &lt;!-- Item Project and Filter Name --&gt;&lt;!-- End Item Project --&gt; &lt;!-- Item Project and Filter Name --&gt; &lt;li class="item-thumbs span3 red"&gt; &lt;!-- Fancybox - Gallery Enabled - Title - Full Image --&gt; &lt;a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Office" href="_include/img/work/full/red-full.jpg"&gt; &lt;span class="overlay-img"&gt;&lt;/span&gt; &lt;span class="overlay-img-thumb font-icon-search"&gt;&lt;/span&gt; &lt;/a&gt; &lt;!-- Thumb Image and Description --&gt; &lt;img src="_include/img/work/thumbs/red.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis."&gt; &lt;/li&gt; &lt;!-- End Item Project --&gt; </code></pre> <p>A development page is also located here: <a href="http://www.davidkneale.com/filter/" rel="nofollow">development page</a> I've been trying to sort this for days... but am a total novice so not having any success. Any help greatly appreciated! Cheers.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser2247476
    1. USuser2247476
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COgenerally speaking it's not a good idea to modify original plugin's js files unless you know what you are doing ... custom modification normally tend to lack of support
      singulars
      1. POIsotope filter - have to click twice to filter
      1. USJFK
    2. COI agree. Should have been more clear that this is in my custom JS file. I didn't modify the original plugin's js file... pretty early in the AM where I am!
      singulars
      1. POIsotope filter - have to click twice to filter
      1. USuser2247476
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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