Die Jquery-Isotopenfilterung blendet nicht übereinstimmende Elemente aus, anstatt sie zu verstecken

Lesezeit: 7 Minuten

Die Jquery-Isotopenfilterung blendet nicht übereinstimmende Elemente aus, anstatt sie zu verstecken. Im Falle des Filterns erhalten die nicht übereinstimmenden Elemente die Eigenschaft, keine anzuzeigen. Ich möchte zeigen, dass die Übereinstimmungselemente automatisch nach oben scrollen und andere nach unten scrollen sollten, so etwas wie dieses
http://base22.com/wps/portal/home/about-us/our-team

var $container = $('.portfolioContainer');
        $container.isotope({
            filter: '*',
            hiddenStyle: {opacity: 0.7},
            visibleStyle: {opacity: 1},
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });
        $('.innermenu .list-inline li a').click(function() {
            $('.innermenu .list-inline li .current').removeClass('current');
            $(this).addClass('current');
            var selector = $(this).attr('post-category');
            $container.isotope({
                filter: selector,
                hiddenStyle: {opacity: 0.7},
                visibleStyle: {opacity: 1},
                itemPositionDataEnabled: true,
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
            });
            return false;
        });
.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

.isotope,
.isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
    -ms-transition-property:     -ms-transform, opacity;
    -o-transition-property:      -o-transform, opacity;
    transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

.isotope:after {
  content: '';
  display: block;
  clear: both;
}
<?php
get_header();
?>
<?php // echo get_the_ID(); ?> 
<div class="row submenu">       
    <div class="col-md-12 col-sm-12 col-xs-12 submenu-padding">
        <nav class="innermenu">
            <ul class="list-inline">
                <li><p class="tags-menu submenu-padding">tags</p> </li>
                <li><a href="#" post-category="*" class="current">All</a></li>
                <li><a href="#" post-category=".mobile">Mobile</a></li>
                <li><a href="#" post-category=".websites">websites</a></li>
                <li><a href="#" post-category=".social-media">Social Media</a></li>
                <li><a href="#" post-category=".digital-activation">Digital Activation</a></li>
                <li><a href="#" post-category=".films">Films</a></li>
                <li><a href="#" post-category=".search">Search</a></li>      
                <li><a href="#" post-category=".media">Media</a></li>
            </ul>

        </nav> 
    </div>
</div>
<?php
if (have_posts()) :
    ?>
    <div class="portfolioContainer">
        <?php while (have_posts()): the_post() ?> 
            <div class="col-md-4 col-sm-4 col-xs-12 portfolio thumbnail-margin <?php
            $categories = get_the_category();
            $separator=" ";
            $output="";
            if ($categories) {
                foreach ($categories as $category) {
                    $output .= $category->slug . $separator;
                } echo trim($output, $separator);
            }
            ?>">
                <div class="thumbnail">
                    <a href="<?php%20echo%20get_permalink();%20?>">  
                        <?php
                        if (has_post_thumbnail()) {
                            the_post_thumbnail();
                        }
                        ?>
                        <div class="caption">
                            <h4 class="portfolio-heading"><?php echo the_title(); ?></h4>
                            <div class="portfolio-caption"> <?php the_excerpt(); ?></div>
                        </div>
                    </a>
                </div>
            </div>
        <?php endwhile; ?>
    </div>
    <?php
endif;
?>

<?php
get_footer();

ed Elemente in der obersten Reihe und alle anderen sollten entsprechend nach unten verschoben werden.

  • Hallo, Aj, der PHP-Teil sollte nicht im Code-Snippet enthalten sein. Setzen Sie die HTML-Ausgabe für die Schleife have_posts() damit wir den jQuery-Effekt sehen und das PHP in einen unabhängigen Block (kein Snippet) übergeben können.

    – Brasilo

    18. September 2014 um 20:07 Uhr

Benutzer-Avatar
Igor Laszlo

Vielleicht können Sie etwas mit Dave Desandros Isotop anfangen Hide-Reveal-Plugin die nicht angezeigt werden: keine der nicht übereinstimmenden Elemente, verblasst nur bis zu einem bestimmten Deckkraftwert. Anschließend können Sie die sichtbaren und ausgeblendeten Elemente nach Belieben animieren.

$( function() {
// init Isotope
    var $container = $('.your-container').isotope({
            layoutMode: 'your-layout',
            itemSelector: '.your-item'
    });

    /* some filter functions for example... 
    var filterFns = {
        show if number is greater than 50
        numberGreaterThan50: function() {
            var number = $(this).find('.number').text();
            return parseInt( number, 10 ) > 50;
        },
        show if name ends with -ium
        ium: function() {
            var name = $(this).find('.name').text();
            return name.match( /ium$/ );
        }
    };*/

    // bind filter button click
    $('#filters').on( 'click', 'button', function() {
        var filterValue = $( this ).attr('data-filter');
        // use filterFn if matches value
        filterValue = filterFns[ filterValue ] || filterValue;
        $container.hideReveal({ filter: filterValue });
    });

    // change is-checked class on buttons
    $('.button-group').each( function( i, buttonGroup ) {
        var $buttonGroup = $( buttonGroup );
        $buttonGroup.on( 'click', 'button', function() {
            $buttonGroup.find('.current').removeClass('current');
            $( this ).addClass('current');
        });
    });

});

// here you can add animations for your visible and hidden items
$.fn.hideReveal = function( options ) {     
    options = $.extend({
        filter: '*',
        hiddenStyle: { opacity: 0.2 },
        visibleStyle: { opacity: 1 },
    }, options );       
    this.each( function() {
        var $items = $(this).children();
        var $visible = $items.filter( options.filter );
        var $hidden = $items.not( options.filter );
        // reveal visible
        $visible.animate( options.visibleStyle );
        // hide hidden
        $hidden.animate( options.hiddenStyle );
    });
};

Ich würde zuerst die Frage stellen, brauchen Sie Isotope. Es ist nicht wirklich für solche Filter gebaut. Wenn Sie es für das Layout benötigen und mit Flexbox oder Floats nicht den gleichen Effekt erzielen können, erstellen Sie anstelle des Versuchs, die Isotopenfilterung zu erweitern, einfach Ihr eigenes Filterskript, um ein hinzuzufügen / zu entfernen active Klasse aus Ihren Artikeln. CSS kann den Rest erledigen. Zur Filterung würde ich so etwas sagen:

<script>
jQuery(document).ready(function($) {
    // do this for each item on your page that needs filters
    $('.filtered-section').each(function(index, el) {
        // helper var
        $this = $(this);
        // more helpers
        $filters = $this.find('.item-filters .filter');
        $itemHolder = $this.find('.items');
        $items = $this.find('.items .item');
        // filter click event
        $filters.click(function(event) {
            // if you only want one active filter do this: 
            // otherwise remove the next line 
            $filters.removeClass('active');
            // make the clicked filer active.
            $(this).toggleClass('active'); // toggle, not add, in case you remove the line above.
            // create array for selectors
            selectorArray = [];
            // for each active filter toss the css selector from the data attribue into the array
            $filters.filter('.active').each(function(index, el) {
                selectorArray.push($(el).data('filter'));
            });
            // make a string from the array, joining them with commas
            selector = selectorArray.join(', ');
            // if the All selector is chosen then stop filtering all together
            if (selector == "*") {
                $items.removeClass('active');
                $itemHolder.removeClass('filtered');
            } else {
                // otherwise
                // Add an active class to all items matching the filter
                $items.filter(selector).addClass('active');
                // remove the class from all not matching
                $items.not(selector).removeClass('active');
                // make sure the holder is set to filtered so your css triggers
                $itemHolder.addClass('filtered');
            }
        });
    });
});
</script>

<div class="filtered-section">
    <div class="item-filters">
        <ul>
            <li><a href="#view-all" data-filter="*">View All</a></li>
            <li><a href="#filter-1" data-filter=".filter-1">Filter 1</a></li>
            <li><a href="#filter-2" data-filter=".filter-2">Filter 2</a></li>
            <li><a href="#filter-3" data-filter=".filter-3">Filter 3</a></li>
            <li><a href="#filter-4" data-filter=".filter-4">Filter 4</a></li>
            <li><a href="#filter-5" data-filter=".filter-5">Filter 5</a></li>
        </ul>
    </div><!-- /.item-filters -->
    <div class="items">
        <div class="item filter-1">Filtered 1</div><!-- /.item filter-1 -->
        <div class="item filter-2">Filtered 2</div><!-- /.item filter-2 -->
        <div class="item filter-3">Filtered 3</div><!-- /.item filter-3 -->
        <div class="item filter-4">Filtered 4</div><!-- /.item filter-4 -->
        <div class="item filter-5">Filtered 5</div><!-- /.item filter-5 -->
    </div><!-- /.items -->
</div><!-- /.filtered-section -->


<style>
.items .item {
  transition: all 600ms linear;
  opacity: 1;
}

.items.filtered .item {
  opacity: 0.5;
}

.items.filtered .item.active {
  opacity: 1;
}
</style>

Dies würde alles immer noch auf einem Isotopensatz von Elementen funktionieren, ändern Sie einfach die Selektoren in jQuery und CSS.

Seien Sie sich bewusst, dass, wenn Ihre .active Stile ändern die Breite oder Höhe oder andere Abstandseigenschaften, die Sie aufrufen müssen $('.isotope').isotope('layout'); wieder am Ende der Filter-Klick-Funktion.

1011070cookie-checkDie Jquery-Isotopenfilterung blendet nicht übereinstimmende Elemente aus, anstatt sie zu verstecken

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy