Working hard to work on
Jqueryand get some amazing every time,however the case is revert I got a simple gallery with category,every button you click gets the
classand match the class with the images in the gallery,the set of matched element get highlighted.So lets see at demo,
HTMLof the gallery,
- First create a outer wrapper of buttons as
- 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
- After that add the images in it,make sure that each image have the same
classof its respective button.,as mentioned in second point.
opacityof the image,the
opacityI'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 functionmatches the button class with the images in the container and highlight the matched element.
- First when a button is clicked,then the variable as
classof 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
classin 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
opacityto 1 or else make it