Responsive Grid Gallery - Horizontal And Vertical

Masonry Grid Images 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


Responsive Grid Gallery - Horizontal And Vertical Features:

  1. Grid Image Gallery
  2. Unlimited Image Grid
  3. Horizontal Grid Gallery
  4. Vertical Grid Gallery
  5. Fully Responsive Grid
  6. FancyBox Zoom Effects
  7. Amazing Hover Effects
  8. Images Category Filter
  9. Pre-Images Loader
  10. Images Title Hover
  11. Social Shear Icon
  12. Awesome Unique Look
  13. Cross Browser Optimization
  14. Font Awesome Icons
  15. SEO Friendly Coding
  16. Valid HTML5 & CSS3
  17. Easy to Setup
  18. Easy to Customize
  19. Step by Step Documentation
  20. And Much More!

Browser compatibility:

img

Responsive Grid Gallery - Horizontal And Vertical will run in on all modern browsers. However you need JavaScript enabled to run the script smooth.

Installation


Installation Responsive Grid Gallery - Horizontal And Vertical

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 image files (you can find that's inside of customs and plugins folders inside of assets), and paste it your own website css, js and images 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 Grid Gallery).

  • -----



  • Step 5: Choice your gallery template .html file, whose Layout and Style you wont to use.

  • Step 6: Edit this HTML file in Notepad / Notepad++ (you can use another code editor).

  • Step 7: Copy the Images Gallery content section from grid gallery 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 Responsive Grid Gallery filter, images, icon or etcetera then flow this instruction carefully...

  • Step 01 - Change Gallery Filter Navs: If you need to change the Gallery filter navs title then you have to just change the java script attribute class name and button value!! Do it very simply, like as data-filter=".graphics" for made a "Graphics" filter button



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

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




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



  • Step 04 - Change Gallery Social Icon: If you need to change the gallery item hover social shear 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 symbol.




    C. Just copy this code and paste it inside the gallery item social icon area.




  • Step 05 - Change Gallery Thumbnail Image: If you need to change the grid gallery thumbnail image then you have to 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!!!



  • For Vertical Grid: You can use any size of images height. 400px width is standard use for Vertical images gallery.





    For Horizontal Grid: You can use any size of images width. All images height must be same. Must define all images height and width inside the img tag attribute value.
    Ex: (img src="image.jpg" width="465" height="300")


  • Step 06 - Change Gallery Lightbox Images: If you need to change the Gallery Lightbox (Big images for zoom show) Image then you have just replace the image link href . Just drop your image inside the img folder then update the image source(a href="image_location/image_name.image_type")!! Do it very simply for make it awesome!!!



  • Step 07 - Change Gallery Hover Text: If you need to change the Gallery hover text (Image Title or Details) then you have just replace the Text. Just drop your text inside the div of "image-details" like "image-title"!! Do it very simply for make it awesome!!!



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


How To Use


01. Press any button to filter gallery item





02. Click on gallery image to open lightbox image




Update


Responsive Grid Gallery - Horizontal And Vertical v1.1.0


Version 1.1.0 – 09 Apr 2019
- Grid Layout Issue Fix.
Version 1.0.0 – 14 Jan 2017
- Initial release.

Support


With browsing Responsive Grid Gallery - Horizontal And Vertical 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.