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,

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:

HTML

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.

CSS

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.

Jquery

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.