✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Basic Image Gallery With Image Preview Using jQuery

Last Updated : Jul 1, 2023

IN - jQuery CSS | Written & Updated By - Anjali

In this tutorial we will teach you how create your own Image Gallery with Image Preview using jQuery and CSS. You may also like jQuery pause and resume image slideshow.

Basic Image Gallery With Image Preview Using jQuery

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Make Basic Image Gallery It Takes Only Three Steps:-

  1. Make a HTML file and define markups for Image Gallery
  2. Make a CSS file and define styling for Image Gallery
  3. Make a Script file and define Effects for Image Gallery

Step 1. Make a HTML file and define markups for Image Gallery

We make a HTML file and save it with a name gallery.html 

<html>
<head>
 <link rel="stylesheet" type="text/css" href="gallery_style.css">
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="gallery_effect.js"></script>
</head>
   
<body>

<center>
<div id="gallery">
 <img class="gal_img" src="images/image1.jpg" onclick="big_image(this.src,1)">
 <img class="gal_img" src="images/image2.jpg" onclick="big_image(this.src,2)">
 <img class="gal_img" src="images/image3.jpg" onclick="big_image(this.src,3)">
 <img class="gal_img" src="images/image4.jpg" onclick="big_image(this.src,4)">
</div>
</center>

<img src="images/image1.jpg" id="slideshow_image">
<input type="image" id="prev_image" src="previous.png">
<input type="image" id="next_image" src="next.png">
<input type="image" id="close_image" src="close.png">
<input type="hidden" id="img_no" value="1">

</body>
</html>

Step 2. Make a CSS file and define styling for Image Gallery

Now we define styling for our Image Gallery and save the file named gallery_style.css. You may also like zoom image using jQuery. 

body
{
 background-color:#6E6E6E;
}
#gallery
{
 margin-top:50px;
 padding:5px;
 width:400px;
 height:400px;
 border:5px solid #2E2E2E;
}
#gallery img
{
 margin:2px;
 width:190px;
 height:190px;
}
#slideshow_image
{
 visibility:hidden;
 display:none;
 position:absolute;
 top:0px;
 left:0px;
 right:0px;
 box-shadow:0px 0px 20px 0px black;
 width:90%;
 height:80%;
 margin:5%;
 padding:7px;
 background-color:white;
}
#prev_image,#next_image
{
 visibility:hidden;
 display:none;
 width:40px;
 height:40px;
 position:absolute;
}
#prev_image
{
 top:80%;
 left:400px;
}
#next_image
{
 top:80%;
 left:540px;
}
#close_image
{
 width:20px;
 height:20px;
 visibility:hidden;
 display:none;
 position:absolute;
}
#close_image
{
 top:10%;
 left:950px;
}

Step 3. Make a Script file and define Effects for Image Gallery

In this we define effects for our Image Gallery using jQuery and save it with a name gallery_effect.js. You can dowload jQuery from this Site 

$(document).ready(function()
{
 $("#prev_image").click(function(){
  prev();
 });
 $("#next_image").click(function(){
  next();
 });
 $("#close_image").click(function(){
  close();
 });
});

// This function is used to close the preview of the image whenever sombody click on 
   close button
function close()
{
 $('#slideshow_image').fadeOut(300,function()
 {
  document.getElementById("slideshow_image").style.visibility="hidden";
  document.getElementById("slideshow_image").style.display="none";
  document.getElementById("prev_image").style.visibility="hidden";
  document.getElementById("prev_image").style.display="none";
  document.getElementById("next_image").style.visibility="hidden";
  document.getElementById("next_image").style.display="none";
  document.getElementById("close_image").style.visibility="hidden";
  document.getElementById("close_image").style.display="none";
 });
}

function visibility()
{
 document.getElementById("slideshow_image").style.visibility="visible";
 document.getElementById("slideshow_image").style.display="block";
 document.getElementById("prev_image").style.visibility="visible";
 document.getElementById("prev_image").style.display="block";
 document.getElementById("next_image").style.visibility="visible";
 document.getElementById("next_image").style.display="block";
 document.getElementById("close_image").style.visibility="visible";
 document.getElementById("close_image").style.display="block";
}

In this we made two functions close(); and visibility();. close(); is called when user clicks on close button in this we hide our image preview and all previous, next and close button.

visibility(); is called to display the preview image with all buttons. You may also like simple image editor using jQuery and HTML5. 

// This function is used to preview the image whenever sombody click on any image
function big_image(src,index)
{
 $("#slideshow_image").fadeIn(1000);
 $('#slideshow_image').attr('src',src);
 visibility();
 document.getElementById("img_no").value=index;
}

big_image(); function get two parameters on calling src and index.

When user clicks on a image for preview this function is called in this function it show the preview with fadeIn(); effect and then we modify the src from the src of the image the user clicked then we call the visibility function to show the image and then we change the value of img_no.

Hidden field from the value we get from index on function calling. You may also like display preloader while image load. 

// This function is used to slide previous images on preview whenever somebody clicks on previous button
function prev()
{
 visibility();
 $('#slideshow_image').fadeOut(300,function()
 {
   var prev_val=document.getElementById("img_no").value;
   var prev_val=Number(prev_val)-1;

   if(prev_val<=0)
   {
     prev_val=4;
   }
   var img=document.getElementById("gallery");
   var src=img.children[prev_val-1].src;

   $('#slideshow_image').attr('src',src);
   document.getElementById("img_no").value=prev_val;
 });

 $('#slideshow_image').fadeIn(1000);
}

This function is used to show previous images one by one.

We use fadeOut(); effect under this we get the value of input hidden field img_no and if the value is less than or equal to 0 then show the last image otherwise show the previous image and then after showing the previous image we change the value of img_no to prev_val for further use.

You may also like add watermark on image using PHP. 

// This function is used to slide next images on preview whenever somebody clicks on next button
function next()
{
 visibility();
 $('#slideshow_image').fadeOut(300,function()
 {
  var next_val=document.getElementById("img_no").value;
  var next_val=Number(next_val)+1;
 
  if(next_val>4)
  {
   next_val=1;
  }
  var img=document.getElementById("gallery");
  var src=img.children[next_val-1].src;

  $('#slideshow_image').attr('src',src);
   
  document.getElementById("img_no").value=next_val;
 });

 $('#slideshow_image').fadeIn(1000);
}

This function is exactly what we did on prev(); function except one thing it show the next images one by one.

For more jQuery Effects you can also see our jQuery Effects Tutorial

That all, this is how to build a basic image slideshow with previous and next button using jQuery. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on jquery image slideshow helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →