Blogger Ever

Create a simple image gallery with category using Jquery

Create a simple image gallery with category using Jquery

Working hard to work on Jquery and get some amazing every time,however the case is revert I got a simple gallery with category,every button you click gets the class and match the class with the images in the gallery,the set of matched element get highlighted.So lets see at demo,
See the Pen Gallery with category using Jquery by Mohammad Hamza Dhamiya (@mohammadhamza) on CodePen
The use of this gallery is very easy,however the development might be a bit difficult with newbies.Therefore I am describing each and every step below.So lets have a look:


The above pen,shows HTML of the gallery,
  • First create a outer wrapper of buttons as class='buttons'.
  • Then,each button will come under span,with a particular class,that will be same of the images it will highlight.
  • Then create a outer container of images that is class='gallery'.
  • After that add the images in it,make sure that each image have the same class of its respective button.,as mentioned in second point.


The major part in CSS is the opacity of the image,the opacity I've set is 0.3 so the unwanted images get lighter and I've done some customization in order to make it a bit pretty.


The Jquery function matches the button class with the images in the container and highlight the matched element.
  • First when a button is clicked,then the variable as active get the class of clicked button.
  • Then,according to a condition if the clicked button is already have the class='active' then remove it,else remove the class='active' from all the buttons and add this class in the clicked button.
  • Then the last function applies on every image,that is if the image class matched with the var active,then make it opacity to 1 or else make it 0.3.
Holla,if you do not get anything,our comments are open.

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.