Help with SearchBar

[harleenquinn]

Hi I've been trying to solve a problem for 8 days and I can't, I saw you on the internet and thought that maybe you could help me. I have a template, and I'm not able to add the search bar with javascript. In this template there is an image gallery, where there are the buttons with the categories, I am trying to implement a search bar, I tried to use the code that you (David) made available in codepen, but the images are reassembled outside the divs.

Here is the code that comes in the template, Java and HTML. Could you help me to implement the search bar using the same principle as the template developer, so I can see if that way the images are correct..

/ Javascript code /

var $portfolio_filter = $('.portfolio-grid');
$portfolio_filter.imagesLoaded(function () {
    $portfolio_filter.isotope({
        layoutMode: 'masonry',
        itemSelector: '.grid-item',
        percentPosition: true,
        masonry: {
            columnWidth: '.grid-sizer'
        }
    });
    $portfolio_filter.isotope();
});

// Default filter selector start code

var $active_grid_selector = $('.portfolio-filter > li.active > a');
var selector = $active_grid_selector.attr('data-filter');
$portfolio_filter.find('.grid-item').removeClass('animated').css("visibility", ""); // avoid problem to filter after sorting
$portfolio_filter.isotope({filter: selector});

// Default filter selector end code

var $grid_selectors = $('.portfolio-filter > li > a');
$grid_selectors.on('click', function () {
    $grid_selectors.parent().removeClass('active');
    $(this).parent().addClass('active');
    var selector = $(this).attr('data-filter');
    $portfolio_filter.find('.grid-item').removeClass('animated').css("visibility", ""); // avoid problem to filter after sorting
    $portfolio_filter.find('.grid-item').each(function () {
        /* remove perticular element from WOW array when you don't want animation on element after DOM lead */
        wow.removeBox(this);
        $(this).css("-webkit-animation", "none");
        $(this).css("-moz-animation", "none");
        $(this).css("-ms-animation", "none");
        $(this).css("animation", "none");
    });
    $portfolio_filter.isotope({filter: selector});
    return false;
});
$(window).resize(function () {
    if (!isMobile && !isiPhoneiPad) {
        $portfolio_filter.imagesLoaded(function () {
            setTimeout(function () {
                $portfolio_filter.find('.grid-item').removeClass('wow').removeClass('animated'); // avoid problem to filter after window resize
                $portfolio_filter.isotope('layout');
            }, 300);
        });
    }
});
var $blog_filter = $('.blog-grid');
$blog_filter.imagesLoaded(function () {
    $blog_filter.isotope({
        layoutMode: 'masonry',
        itemSelector: '.grid-item',
        percentPosition: true,
        masonry: {
            columnWidth: '.grid-sizer'
        }
    });
});
$(window).resize(function () {
    setTimeout(function () {
        $blog_filter.find('.grid-item').removeClass('wow').removeClass('animated'); // avoid problem to filter after window resize
        $blog_filter.isotope('layout');
    }, 300);
});

//END JAVA CODE

HTML CODE

    <section id="localizar" class="wow fadeIn padding-90px-top bg-light-gray md-padding-50px-top sm-padding-30px-top">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <!-- start filter navigation -->
                    <ul class="portfolio-filter nav nav-tabs justify-content-center border-0 portfolio-filter-tab-1 font-weight-600 alt-font text-uppercase text-center margin-80px-bottom text-small md-margin-40px-bottom sm-margin-20px-bottom">
                        <li class="nav active"><a href="javascript:void(0);" data-filter="*" class="light-gray-text-link text-very-small">All</a></li>
                        <li class="nav"><a href="javascript:void(0);" data-filter=".web" class="light-gray-text-link text-very-small">Web</a></li>
                        <li class="nav"><a href="javascript:void(0);" data-filter=".advertising" class="light-gray-text-link text-very-small">Advertising</a></li>
                        <li class="nav"><a href="javascript:void(0);" data-filter=".branding" class="light-gray-text-link text-very-small">Branding</a></li>
                        <li class="nav"><a href="javascript:void(0);" data-filter=".design" class="light-gray-text-link text-very-small">Design</a></li>
                        <li class="nav"><a href="javascript:void(0);" data-filter=".photography" class="light-gray-text-link text-very-small">Photography</a></li>
                    </ul>                                                                           
                    <!-- end filter navigation -->
                </div>
            </div>
        </div>

            <div class="row">
                <div class="col-12 px-3 p-md-0">
                    <div class="filter-content overflow-hidden">
                        <ul class="portfolio-grid work-3col gutter-medium hover-option6 lightbox-portfolio">
                            <li class="grid-sizer"></li>
                            <!-- start portfolio item -->
                            <li class="branding web grid-item wow fadeInUp last-paragraph-no-margin">
                                <figure>
                                    <div class="portfolio-img bg-deep-pink position-relative text-center overflow-hidden">
                                        <a  href="#" target="_blank">
                                        <img src="images/image01.jpg" alt=""/>
                                        <div class="portfolio-icon"><font size="10px">
                                            <i class="fas fa-plus-square text-white aria-hidden="true></i></font>
                                        </div>
                                        </a>
                                    </div>
                                    <figcaption class="bg-white">
                                        <div class="portfolio-hover-main text-center">
                                            <div class="portfolio-hover-box align-middle">
                                                <div class="portfolio-hover-content position-relative">
                                                    <a href="#" target="_blank">
                                                    <b>Title</b></a> <br>
                                      Description<br>
                                        <div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
                                        <font size="5px" style="letter-spacing: 10px">
                            <a class="facebook" href="https://facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
                            <a class="instagram" href="https://instagram.com/ " target="_blank"><i class="fab fa-instagram"></i></a>
                        </font>
                                                </div>
                                            </div>
                                        </div>
                                    </figcaption>
                                </figure>
                            </li>
                            <!-- end portfolio item -->

                      </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end portfolio section -->

END HTML

if you can help me, I'm very grateful. (If you can of course)

Already, I thank..

[thesublimeobject]

Please refer to the contributing guidelines.

All bug reports and problem issues require a reduced test case. Create one by forking any one of the CodePen examples from the docs.

Please create a Codepen displaying your issue, and let me know what you're tried so far.