Filter in JQuery

Question

Filter in JQuery

Navigation

#1 by (1 votes)

1

I am using the gallery jquery plugin the problem is when not all the images appear and I want that without pressing a filter, only those that I mark as "all" appear

this is my HTML code

        <div class="categories">

            <ul class="cat">
                <li class="pull-left"><h4>Galeria</h4></li>
                <li class="pull-right">
                    <ol class="type">
                        <li><a href="#" data-filter=".all" class="active">TODOS</a></li>
                        <li><a href="#" data-filter=".web">Diseño Mobiliario</a></li>
                        <li><a href="#" data-filter=".photography">Llave en Mano</a></li>
                        <li><a href="#" data-filter=".app" >Locales Comerciales</a></li>
                        <li><a href="#" data-filter=".web">Organización de Espacios</a></li>
                        <li><a href="#" data-filter=".branding" >Conferencias</a></li>

                    </ol>
                </li>
            </ul>
            <div class="clearfix"></div>
        </div>

        <div id="lightbox" class="row">

            <div class="col-sm-6 col-md-3 col-lg-3 all branding">
                <div class="portfolio-item">
                    <div class="hover-bg">
                        <a href="#">
                            <div class="hover-text">
                                <h4>Verónica Chapa</h4>
                                <small>Conferencias</small>
                                <div class="clearfix"></div>
                                <i class="fa fa-plus"></i>
                            </div>
                            <img src="img/portfolio/01.jpg" class="img-responsive" alt="...">
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-3 col-lg-3 photography app">
                <div class="portfolio-item">
                    <div class="hover-bg">
                        <a href="#">
                            <div class="hover-text">
                                <h4>Verónica Chapa</h4>
                                <small>Llave en Mano</small>
                                <div class="clearfix"></div>
                                <i class="fa fa-plus"></i>
                            </div>
                            <img src="img/portfolio/02.jpg" class="img-responsive" alt="...">
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-3 col-lg-3 branding">
                <div class="portfolio-item">
                    <div class="hover-bg">
                        <a href="#">
                            <div class="hover-text">
                                <h4>Verónica Chapa</h4>
                                <small>Conferencias</small>
                                <div class="clearfix"></div>
                                <i class="fa fa-plus"></i>
                            </div>
                            <img src="img/portfolio/03.jpg" class="img-responsive" alt="...">
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-3 col-lg-3 branding">
                <div class="portfolio-item">
                    <div class="hover-bg">
                        <a href="#">
                            <div class="hover-text">
                                <h4>Verónica Chapa</h4>
                                <small>Conferencias</small>
                                <div class="clearfix"></div>
                                <i class="fa fa-plus"></i>
                            </div>
                            <img src="img/portfolio/04.jpg" class="img-responsive" alt="...">
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-3 col-lg-3 web">
                <div class="portfolio-item">
                    <div class="hover-bg">
                        <a href="#">
                            <div class="hover-text">
                                <h4>Verónica Chapa</h4>
                                <small>Diseño Mobiliario</small>
                                <div class="clearfix"></div>
                                <i class="fa fa-plus"></i>
                            </div>
                            <img src="img/portfolio/05.jpg" class="img-responsive" alt="...">
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-3 col-lg-3 app">
                <div class="portfolio-item">
                    <div class="hover-bg">
                        <a href="#">
                            <div class="hover-text">
                                <h4>Verónica Chapa</h4>
                                <small>Locales Comerciales</small>
                                <div class="clearfix"></div>
                                <i class="fa fa-plus"></i>
                            </div>
                            <img src="img/portfolio/06.jpg" class="img-responsive" alt="...">
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-3 col-lg-3 photography web">
                <div class="portfolio-item">
                    <div class="hover-bg">
                        <a href="#">
                            <div class="hover-text">
                                <h4>Verónica Chapa</h4>
                                <small>Llave en Mano</small>
                                <div class="clearfix"></div>
                                <i class="fa fa-plus"></i>
                            </div>
                            <img src="img/portfolio/07.jpg" class="img-responsive" alt="...">
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-3 col-lg-3 web">
                <div class="portfolio-item">
                    <div class="hover-bg">
                        <a href="#">
                            <div class="hover-text">
                                <h4>Verónica Chapa</h4>
                                <small>Diseño Mobiliario</small>
                                <div class="clearfix"></div>
                                <i class="fa fa-plus"></i>
                            </div>
                            <img src="img/portfolio/08.jpg" class="img-responsive" alt="...">
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-3 col-lg-3 web ">
                <div class="portfolio-item">
                    <div class="hover-bg">
                        <a href="#">
                            <div class="hover-text">
                                <h4>Verónica Chapa</h4>
                                <small>Diseño Mobiliario</small>
                                <div class="clearfix"></div>
                                <i class="fa fa-plus"></i>
                            </div>
                            <img src="img/portfolio/08.jpg" class="img-responsive" alt="...">
                        </a>
                    </div>
                </div>
            </div>

        </div>

And this the Jquery

    _filter : function( $atoms ) {

 var filter = this.options.filter === '' ? 'all' : this.options.filter;

  if ( !filter ) {
    return $atoms;
  }
     var hiddenClass    = this.options.hiddenClass,
      hiddenSelector = '.' + hiddenClass,
      $hiddenAtoms   = $atoms.filter( hiddenSelector ),
      $atomsToShow   = $hiddenAtoms;


  if ( filter !== 'all' ) {
    $atomsToShow = $hiddenAtoms.filter( filter );
    var $atomsToHide = $atoms.not( hiddenSelector ).not( filter ).addClass( hiddenClass );
    this.styleQueue.push({ $el: $atomsToHide, style: this.options.hiddenStyle });
 }

  this.styleQueue.push({ $el: $atomsToShow, style: this.options.visibleStyle });
  $atomsToShow.removeClass( hiddenClass );

  return $atoms.filter( filter );
}

javascript jquery html

asked by Sistemas MKT 18.08.2016 в 20:37

source

1 answer

Result of 2 queries fetch_assoc in an array Better language to interact with an external javascript

score 1 · Answer 1

You only show us the filter part, but you do not show us the launch event that activates that filter.

is to say something like

$('ul > li').on('click', function(){
 ///bla bla
});

The answer is that when you finish loading the page, go to that event activating it as if you had been given a click.

Assuming my previous event, that's how it would look when the load was finished.

$(function(){
   $('ul > li').trigger('click');
});

This would activate a "click" simulation on your "all" button, when loading the page without actually pressing it.

More information at:

link

and in all events available to move you:

link