How to create a Gallery using HTML, CSS, jquery?

I am going to tell you to how to create a simple Gallery using HTML, CSS, Jquery. For this task you would need some images and knowlege of css and jquery.

There are some steps in creating it.

Step 1:-

First we create an index.html which would be our default page.

In index.html we create two divs. In which 1st div will contain the images to be displayed when we run index.html. The code goes like this:-

<div class="container">
<img src="img/1.jpg" width='200' data-img-no="0">
<img src="img/2.jpg" width='200' data-img-no="1" >
<img src="img/3.jpg" width='200' data-img-no="2">
<img src="img/4.jpg" width='200' data-img-no="3">
</div>

Here the data-img-no is the no given to each image.

Step 2:-

Now, we create a another div which will be display none by default but gets displayed when we click on an image.

This div will be:-

<div class="show">
<div class="prev">
<p>Prev</p>
</div>
<img class="close" src="img/1.jpg"  data-img-no="0">
<img class="close" src="img/2.jpg"  data-img-no="1">
<img class="close" src="img/3.jpg"  data-img-no="2">
<img class="close" src="img/4.jpg"  data-img-no="3">
<div class="next">
<p>Next</p>
</div>
</div>

In above div we again have 4 images with data-img-no same as the data-img-no in Step 1.

Here we have two Buttons or divs with name as next and prev which will be used for moving forward and backward the images.

Step 3:-

In this step we will give the above dives an custom css which goes as:-

.container
{
margin:0px auto;
width:820px;
margin-top:50px;
}
.container img
{
cursor:pointer;
}
.popup
{
position:absolute;
background:rgba(255,0,0,0.4);
width:100%;
height:100%;
top:0px;

}
.close
{
display:none;
cursor:pointer;

}

.show
{
display:none;

}
.close img
{
width:100px;
}
.prev
{
cursor:pointer;
float:left;

}
.next
{
cursor:pointer;
float:right;

}

after the step 3 we will get the index.html as shown below:-

 Now we move on to step 4 which is the most important part.

Step 4:-

Here we will give the our jquery code. In jquery code we will define the function for what will happen if we click on the image , next button, prev button Which div will be shown and which div will be hidden.

$(document).ready(function(){

var d;
var j=$(".container img:first").attr('data-img-no');
var i=$(".container img:last").attr('data-img-no');

    $("img").click(function(){
        d=$(this).attr('data-img-no');
        $(".show").addClass('popup');
        $(".close[data-img-no="+d+"]").css({display:"block",width:"50%",margin:"0px auto"});
        $(".show").css({display:"block"});
    });
   

    $(".next").click(function(){
    if(d < i)
    {
        d=parseInt(d) + 1;
        $(".close").css({display:"none"});
        $(".close[data-img-no="+d+"]").css({display:"block",width:"50%",margin:"0px auto"});
        $(".show").css({display:"block"});
    }
    });

    $(".prev").click(function(){
    if(d > j)
    {
        d=parseInt(d) - 1;
        $(".close").css({display:"none"});
        $(".close[data-img-no="+d+"]").css({display:"block",width:"50%",margin:"0px auto"});
        $(".show").css({display:"block"});
    }
    });
   
    $(".close").click(function(){
        $(".show").removeClass('popup');
        $(".close").css({display:"none"});
        $(".show").css({display:"none"});
    });
   
});

After this jquery code we will get an working effect on the images when we click on the image an big image comes up as shown in image below.

And when you click the next button in the right bottom you will see the next image as shown in image bellow.