Skip to main content

Isotope

Filter & sort magical layouts.

Installation

Add script right before closing </body> tag, and initialize Isotope

            
              <!-- Plugin js -->
              <script src="src/plugins/isotope-layout/dist/isotope.pkgd.min.js"></script>
            
          

If you want to remove Isotope js editing theme.js in this function myIsotope_filter();


Example


Image Description

Logo Design

Branding
Image Description

Web Development

Web
Image Description

Graphic Design

Graphic
Image Description

Video Marketing

Video
Image Description

Photography

Photo
Image Description

Apps Development

Apps


How to use

You can use isotope with add class in data filter like this data-filter=".web" and use caption text with data-sub-html="title images"

            
              <!-- navigation -->
              <div class="button-group filters-button-group portfolio-nav text-center">
                <button class="portfolio-nav-item bg-transparent border-0 mb-4 mb-md-5 active" data-filter="*">All</button>
                <button class="portfolio-nav-item bg-transparent border-0 mb-4 mb-md-5" data-filter=".web">Web</button>
                <button class="portfolio-nav-item bg-transparent border-0 mb-4 mb-md-5" data-filter=".branding">Branding</button>
                <button class="portfolio-nav-item bg-transparent border-0 mb-4 mb-md-5" data-filter=".graphic">Graphic</button>
                <button class="portfolio-nav-item bg-transparent border-0 mb-4 mb-md-5" data-filter=".photovid">Photograpy</button>
              </div><!-- end navigation -->
              
              <!-- Portfolio Content -->
              <div id="thumbnail-images" class="grid portfolio row g-0">
                <figure data-src="assets/img-min/project/project_1.jpg" class="col-sm-6 col-lg-4 portfolio-item branding" data-sub-html="title images">
                  <img class="portfolio-image" src="assets/img-min/project/project_1.jpg" alt="Image Description">
                  <figcaption class="portfolio-info text-center">
                    <h3 class="h6 my-1 text-light">Logo Design</h3>
                    <small class="d-block">Branding</small>
                  </figcaption>
                </figure>

                <figure data-src="assets/img-min/project/project_2.jpg" class="col-sm-6 col-lg-4 portfolio-item photovid branding web" data-sub-html="title images">
                  <img class="portfolio-image" src="assets/img-min/project/project_2.jpg" alt="Image Description">
                  <figcaption class="portfolio-info text-center">
                    <h3 class="h6 my-1 text-light">Web Development</h3>
                    <small class="d-block">Web</small>
                  </figcaption>
                </figure>

                <figure data-src="assets/img-min/project/project_3.jpg" class="col-sm-6 col-lg-4 portfolio-item graphic" data-sub-html="title images">
                  <img class="portfolio-image" src="assets/img-min/project/project_3.jpg" alt="Image Description">
                  <figcaption class="portfolio-info text-center">
                    <h3 class="h6 my-1 text-light">Graphic Design</h3>
                    <small class="d-block">Graphic</small>
                  </figcaption>
                </figure>

                <figure data-src="assets/img-min/project/project_4.jpg" class="col-sm-6 col-lg-4 portfolio-item branding graphic" data-sub-html="title images">
                  <img class="portfolio-image" src="assets/img-min/project/project_4.jpg" alt="Image Description">
                  <figcaption class="portfolio-info text-center">
                    <h3 class="h6 my-1 text-light">Video Marketing</h3>
                    <small class="d-block">Video</small>
                  </figcaption>
                </figure>

                <figure data-src="assets/img-min/project/project_5.jpg" class="col-sm-6 col-lg-4 portfolio-item photovid" data-sub-html="title images">
                  <img class="portfolio-image" src="assets/img-min/project/project_5.jpg" alt="Image Description">
                  <figcaption class="portfolio-info text-center">
                    <h3 class="h6 my-1 text-light">Photography</h3>
                    <small class="d-block">Photo</small>
                  </figcaption>
                </figure>

                <figure data-src="assets/img-min/project/project_6.jpg" class="col-sm-6 col-lg-4 portfolio-item web" data-sub-html="title images">
                  <img class="portfolio-image" src="assets/img-min/project/project_6.jpg" alt="Image Description">
                  <figcaption class="portfolio-info text-center">
                    <h3 class="h6 my-1 text-light">Apps Development</h3>
                    <small class="d-block">Apps</small>
                  </figcaption>
                </figure>
              </div>
            
          

Isotope demo with Lightgallery.js see in here

For complete documentation read in here