Basic Image Gallery With Image Preview Using jQuery
Last Updated : Jul 1, 2023
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.
CHECK OUT THIS TUTORIAL LIVE DEMO →
To Make Basic Image Gallery It Takes Only Three Steps:-
- Make a HTML file and define markups for Image Gallery
- Make a CSS file and define styling for Image Gallery
- 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.