Simple jQuery Image Gallery
Minimal image gallery
There are situations when you need a very simple image gallery which showcases your images on click previous and next links. Following is a simple code written in HTML, CSS and jQuery to achieve this goal.
See the working demo here
HTML
Lets start with the simple HTML code. I am using sample images from lorempixel to display how it works.
The image gallery and the nav elements are both wrapped in the gallery wrapper. The images are contained in the div with id gallery and each image is in the div of class image. It is a pretty simple setup.
CSS
The CSS is pretty simple. There are 2 classes active and inactive that will be used in jQuery to show and hide the images respectively. The navigation previous and next divs are given position relative to make them appear on top of the image.
jQuery
Line2: since all the images are diplay:none, add class active to show first image
Line3: run when the next button is clicked
Line4: remove class active from the present active image and make it inactive
Line5: if the image that is made inactive is the last child of gallery, then make the first image active
Line9: else make the next image active
Line11: remove the class inactive from the recently made inactive image
Line14: function run when the previous button is clicked
Line15:remove class active from the present active image and make it inactive
Line16-17: if the image that is made inactive is the first child of gallery, then make the last image active
Line19-20: else make the previous image active
Line22: remove the class inactive from the recently made inactive image
That is it. I will be making improvements to this image gallery to make it play automatically. So, stay tuned.
