Home Forums Art HTML Theme How to set up filter feature with gallery

This topic contains 1 reply, has 2 voices, and was last updated by  SeaTheme 1 year, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #15652

    witty knee
    Participant
    Purchased

    Hi there,

    I have tried following the documentation instruction on setting up the filter feature on a gallery (adding the classes to each section etc.) however it is still not working. Here is an example of what I have for one grid item:

    <!-- Main Content : List, text content ... -->
                    <div id="content">
    
                        <div class="content_wrap_outer fullwrap-layout">
    
                            <div id="content_wrap" class="">
    
                                <div class="entry container-fluid">
    
                                    <div class="bm-builder">
    
                                        <div class="container-masonry">
                                            <div class="filters clearfix">
                                                <ul class="filters-ul">
                                                    <li class="filters-li active">
                                                        <a id="all" class="filters-a" href="#" data-filter="*">All<span class="filter-num">15</span></a>
                                                    </li>
    
                                                    <li class="filters-li">
                                                        <a class="filters-a" data-filter=".filter_branding" href="#" data-catid="250" data-postid="2959">Branding<span class="filter-num">5</span></a>
                                                    </li>
                                                    <li class="filters-li">
                                                        <a class="filters-a" data-filter=".filter_uidesign" href="#" data-catid="250" data-postid="2959">UI Design<span class="filter-num">5</span></a>
                                                    </li>
                                                    <li class="filters-li">
                                                        <a class="filters-a" data-filter=".filter_ecommerce" href="#" data-catid="250" data-postid="2959">Ecommerce<span class="filter-num">5</span></a>
                                                    </li>
    
                                                </ul>
                                            </div>
    
                                            <!--Grid List-->
                                            <div class="module col-12 module-id-3000" data-module-col="12">
    
                                                <div class="module-inside clearfix">
    
                                                    <div class="container-masonry ux-portfolio-2col ux-portfolio-full ux-ratio-43 filter-left" data-ratio="0.75" data-col="2" data-found="6" data-number="6" data-mod="grid">
    
                                                        <div class="masonry-list grid-list clearfix grid-list-3000 grid-text-center" data-unique="3000">
    
                                                            <!--Grid Item -->
                                                            <section class="grid-item filter_all filter_branding filter_product filter_works grid_item_2nd_class" data-postid="1089">
                                                                <div class="grid-item-inside bm-touch-tab" data-animationend="fadeined">
                                                                    <div class="grid-item-con post--1089">
                                                                        <a href="project_TEMPLATE.html" title="HoloLens" class="grid-item-mask-link"></a>
                                                                        <div class="grid-item-con-text"></div>
                                                                    </div>
                                                                    <!--End grid-item-con-->
                                                                    <div class="brick-content ux-lazyload-wrap" style="padding-top: 60.885416666667%;">
                                                                        <div class="ux-background-img ux-background-img-1st ux-lazyload-bgimg" data-bg="img/skie.png"></div>
                                                                        <div class="ux-background-img ux-background-img-2nd ux-lazyload-bgimg" data-bg="img/WIT_1948.jpg"></div>
                                                                    </div>
                                                                    <!--End brick-content-->
                                                                </div>
                                                                <!--End grid-item-inside-->
                                                            </section>
    
    • This topic was modified 1 year, 4 months ago by  witty knee.
    #15656

    SeaTheme
    Keymaster
    Purchased
    Supported

    Hi,

    Please try to change the HTML tree as:

    <div class="bm-builder">
      <!--Grid List-->
      <div class="module col-12 module-id-3000" data-module-col="12">
        <div class="module-inside clearfix">
          <div class="container-masonry ux-portfolio-2col ux-portfolio-full ux-ratio-43 filter-left" data-ratio="0.75" data-col="2" data-found="6" data-number="6" data-mod="grid">
            <div class="filters clearfix">
             <div class="masonry-list grid-list ...

    Regards!

    • This reply was modified 1 year, 4 months ago by  SeaTheme.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!