Isotope Gallery - Filter and Sorting

Professional - Isotope Gallery


Thank you for Browsing our website. If you have any questions that are beyond the scope of this help file please feel free to contact with us at Hi-Tech Parks. Thanks again for Browsing our website!

Explanation


Isotope Gallery - Filter and Sorting Features:

  1. Unlimited Isotope Navs.
  2. 10+ Different Isotope Layouts.
  3. Grid Item Sorting.
  4. Grid Item Filter.
  5. Lightbox Image Gallery.
  6. Image Zoom Effect Gallery.
  7. Image Hover Effect Gallery.
  8. Team Profile Gallery.
  9. Product Filter Gallery.
  10. Portfolio Gallery.
  11. Grid Feature Gallery.
  12. Isotope Blog Filter Gallery.
  13. Auto Height Isotope Grid.
  14. Clean Design And Commented Code.
  15. Fully Responsive.
  16. Made With Bootstrap
  17. Animated Design.
  18. Clean HTML, Javascript & CSS Code.
  19. Cross-Browser Compatibility.
  20. Uses Font Awesome Icon.
  21. Easy to Customize.
  22. Easy to Setup.
  23. Step by Step Documentation.
  24. And Much More!

Browser compatibility:

img

Isotope Gallery - Filter and Sorting will run in on all modern browsers. However you need JavaScript enabled to run the script smooth.

Installation


Installation Isotope Gallery - Filter and Sorting

Please follow all the steps carefully...

  • Step 1: Download the Zip file which you have purchased.
  • Step 2: Extract the zip file.
  • Step 3: Copy all plugin CSS, JS and fonts files (you can find that's inside of customs and plugins folders inside of assets), and paste it your own website css, js and fonts folder.
  • Step 4: Link all plugin css file in your own web page head section and js file in your own web page before end of the body section (whose template page you want to add this Isotope Gallery).

  • -----



  • Step 5: Choice your Isotope template .html file, whose Layout you wont to use.
  • Step 6: Edit this HTML file in Notepad / Notepad++ (you can use another code editor).
  • Step 7: Copy the Isotope Gallery content from Isotope template and paste it where you need to show this in your website template body.
    (That's commented inside of the template you can find it easily.)



  • Step 8: Save your own website template. It's done!

Note: After setup check your template, If your design broken then please rename or delete your plugin css class, whose class was broken your design.

Customization


If you wont to customize this Isotope Gallery filter, sorting, icon or etcetera then flow this instruction carefully...

  • Step 01 - Change Isotope Filter and Sorting Navs: If you need to change the Isotope filter or sorting navs title then you have to just change the java script attribute class and button value!! Do it very simply, like as data-filter=".design" for made a "Design" filter button or data-sort-by="number" for made a "Number" sorting button.



  • Step 02 - Change Isotope Item Filter: If you need to change the Isotope item filter then you have to just change the css class name!! Do it very simply, like as use class="design" made it for Design.
    (you can use one or multiple filter class inside a single isotope item)

  • NB: Filter button attribute class name and isotope item class name must be same.




  • Step 03 - Change Isotope Item Sorting: If you need to change the Isotope item sorting then you have to just use the css class name!! Do it very simply, like as use class="isotope-number" in a content for made number sorting.
    ( you can use hear a by default class that we already created: isotope-name, isotope-title, isotope-details, isotope-symbol, isotope-type, isotope-number)

    NB: Sorting button attribute class name and isotope item class name must be same.



    A. You can make a new sorting class for use there by editing isotope.js file (just add a new sorting name and declare a class value for it. Like as : number: '.isotope-number',)



  • Step 04 - Change Sorting Category: If you need to change the Isotope item sorting category then you have to just change the js attribute value!! Do it very simply, like as use data-category="design" made it for Design category sorting(You can find it inside the isotope grid item)



  • Step 05 - Add or Remove Grid Item: If you need to add or remove Isotope grid item then you have to just copy or delete some code and class (That's commented inside of isotope gallery)



  • Step 06 - Change Isotope Grid Item Width: If you need to change Isotope grid item width then you have to just change bootstrap grid column class!



  • Step 07 - Change Navs Style: If you need to change the Isotope navs style then you have to just change the css class!! Do it very simply, like as use class="button" for made it button type design or use class="link" for made it link type design or use class="shape" for made it bottom triangle shape type design (You can find it inside the button of isotope header)



  • Step 08 - Change Isotope Icon: If you need to change the Isotope item inside icon then you have to use Font Awesome Library. Do it very simply for make it awesome!!!

    A. Go to the Font Awesome Library and find the icon that you need.





    B. Click over the icon and get the iconic code below the sambol.

    C. Just copy this code and paste it inside the isotope item area.




  • Step 09 - Change Isotope Gallery Image: If you need to change the isotope gallery image then you have just replace the image source or url . Just drop your image inside the img folder then update the image source(img src="image_location/image_name.image_type")!! Do it very simply for make it awesome!!!

  • NB: Use all image same size of a gallery. Different size of images can broken your design.



  • Step 10 - Change Isotope Gallery Content: If you need to change the isotope gallery content then you have to use Bootstrap Framework or your own HTML code!! Do it very simply for make it awesome!!!


  • Step 11: Now save it. Let's go It's ready to use!


How To Use


01. Press any button to filter or sorting isotope item





02. Click on isotope image to open lightbox image




Update


Isotope Gallery - Filter and Sorting v1.2.0


Version 1.2.0 – 08 Jan 2018
- Image Loading Issue Solve.
- Layout Broken Issue SOlve.
Version 1.1.0 – 25 July 2017
- Improve css design styles.
- Improve javascript loading issue.
Version 1.0.0 – 14 July 2017
- Initial release.

Support


With browsing Isotope Gallery - Filter and Sorting you will get first class support! Please feel free to contact with us by email at any time if you run into problems.

Email Us: hitechparks@gmail.com

You need to confirm your purchase from codecanyon.net to get any support.

Credits


Credit Goes to...

  1. Bootstrap
  2. Font Awesome
  3. Isotope
  4. imagesLoaded
  5. jQuary