CODEWITHSUNDEEP
jqueryjquery-isotope
superUntitled
superUntitled

Reputation: 22527

jQuery isotope: filter on page load based on get variable

I am working with the jQuery isotope plugin and would like to display only items from a particular group when the page loads. Currently all of the items are displaying:

http://aproposstudio.com/category/work/

For example, on the link above, is there a way to load the page with the 'murals' displaying?

thanks.

Upvotes: 5

Views: 9877

Answers (4)

alex eusebio
alex eusebio

Reputation: 1

I encountered the same issue with my gallery, and I came across your post.Thank you very much for your help, it really made my day!

Here's the final code I used, which might be helpful for others facing a similar problem.

First, I set a default filter value for the gallery, initially set to "*" to show all items. This default filter changes when clicking on a link in the menu, which looks like this:

<h4 class="menu-item"><a class="hover-underline-animation filter" data-filter=".identite-visuelle" href="/portfolio#identite-visuelle">Identité visuelle</a></h4>

Here are the filter buttons for the gallery:

<ul id="filters">
    <li><a href="#tout" data-filter="*" class="filterable-gallery__btn custom-btn">Tout</a></li>
    <li><a class="filterable-gallery__btn custom-btn" href="#" id="identite-visuelle" data-filter=".identite-visuelle">Identité visuelle</a></li>
    <li><a class="filterable-gallery__btn custom-btn" href="#" id="illustration" data-filter=".illustration">Illustration</a></li>
    <li><a class="filterable-gallery__btn custom-btn selected" href="#" id="print" data-filter=".print">Print</a></li>
    <li><a class="filterable-gallery__btn custom-btn" href="#" id="webdesign-sites-internet" data-filter=".webdesign-sites-internet">Webdesign/Sites Internet</a></li>
</ul>

Then, for the JavaScript:

// Default Isotope settings
var lastFilter = '*'; // Default filter
var sortBy = 'date'; // Default sorting method
var sortAscending = true; // Default sorting order

var $container = $('#gallery');
$container.isotope({
    itemSelector: '.gallery-item',
    percentPosition: true,
    masonry: {
        columnWidth: '.gallery-sizer'
    },
    sortBy: sortBy,
    sortAscending: sortAscending,
    filter: lastFilter 
});

var $optionsSets = $('#filters');
var $optionsLinks = $optionsSets.find('a');
    
$optionsLinks.click(function() {
    var $this = $(this);
    if ($this.hasClass('selected')) {
        return false;
    }
        
    var selector = $this.attr('data-filter');

    // Update the lastFilter variable with the new selected filter
    lastFilter = selector;
        
    $container.isotope({
        filter: selector
    });
        
    $optionsSets.find('.selected').removeClass('selected');
    $this.addClass('selected');
        
    return false;
});

// Click event for portfolio menu links
$('.portfolio-nav a').click(function(e) {
    e.preventDefault(); // Prevent default link behavior
        
    // Get the selector from the data-filter attribute of the clicked link
    var selector = $(this).attr('data-filter');
    
    // Update the lastFilter variable with the new selected filter
    lastFilter = selector;

    // Trigger a click on the corresponding filter button in Isotope
    $optionsSets.find('[data-filter="' + selector + '"]').trigger('click');
});

I hope this helps anyone facing a similar issue! Feel free to reach out if you have any questions.

Upvotes: 0

madvertising
madvertising

Reputation: 67

The answer is quite easy:

$('#container').isotope({ filter: '.your-filter-name' });

Use this line in your code.

Refere this link: http://isotope.metafizzy.co/docs/filtering.html

Upvotes: 5

deluxedecor
deluxedecor

Reputation: 1

It's very simple!

(function ($) {
    $(window).load(function () {

        // settings
        var sortBy = 'date', // SORTING: date / name
            sortAscending = true, // SORTING ORDER: true = Ascending / false = Descending

            theFilter = '.YOUR SORT'; // DEFAULT FILTERING CATEGORY

Upvotes: 0

BananaNeil
BananaNeil

Reputation: 10762

So i think you just want to use the simple hide() and show() methods

If you use the classes applied to your html elements, you can easily select them and hide them with the following jQuery lines.

$(".project").hide()
$(".murals").show()

now, what this will do is 'hide' all of the projects, and show only the murals.

Does that make sense?

Upvotes: 1

Related Questions