If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

JS Animated. How to use Isotope Layout filter

JS Animated. How to use Isotope Layout filter

This tutorial shows how to use Isotope Layout filter in Website templates.

JS Animated. How to use Isotope Layout filter-1

  1. Gallery has filters. You can assign images to appropriate category filter. Open html file with gallery page in your editor. We have located code for gallery filters. Each filter has type. You will need to assign this type to gallery image. Let’s change filter titles:

    JS Animated. How to use Isotope Layout filter-2

  2. Let’s change gallery image. Locate the following code:

    JS Animated. How to use Isotope Layout filter-3

  3. There we can see path to lightbox image (data-lightbox="image" data field) and path to thumbnail image. Attribute data-filter="type-1" defines that image is related to filter with "type-1". You can upload your images and change path to image:

    JS Animated. How to use Isotope Layout filter-4

  4. Save changes and upload modified file to your server. Refresh the page. Titles were changed. Gallery image was changed as well:

    JS Animated. How to use Isotope Layout filter-5

  5. Let’s add one more filter and assign image to it. Open section with filters. Copy code for existing filter, paste it, change title. Change type for data-isotope-filter field. We have set type-4:

    JS Animated. How to use Isotope Layout filter-6

  6. Copy code for existing gallery image. Paste code. Change value in data-filter to type-4 (we have specified this type in the previous step). Change path to image and thumbnail image. Save changes and upload modified file to your hosting:

    JS Animated. How to use Isotope Layout filter-7

  7. Refresh page. You may need to adjust css code for different layouts (desktop, mobile and tablets) in order to align items. Inspect item using Firebug plugin in Firefox or Chrome inspector in Chrome. Find appropriate css code. In our case padding should be adjusted:

    JS Animated. How to use Isotope Layout filter-8

  8. Apply those changes to css file. Open the appropriate line of code. Please note that you may need to adjust styles for different layouts. We are going to adjust styles for desktop layout:

    JS Animated. How to use Isotope Layout filter-9

  9. Save changes and upload modified files to your hosting. Refresh page. Filter titles are aligned, we have added image to a new item:

    JS Animated. How to use Isotope Layout filter-10

Feel free to check the detailed video tutorial below:

JS Animated. How to use Isotope Layout filter