How to Create a Simple Image Gallery in JavaScript

How to Create a Simple Image Gallery in JavaScript

Hi, I am Pradeep Kumar Jha a student of ADMEC Multimedia Institute Delhi, learning Web Designing/ UI Development course here. Today I want to discuss about the development of a basic image gallery in JavaScript. This is a project given by our JavaScript mentor in this institute.

Who can read this post?

A web designer, a JavaScript enthusiastic, a JavaScript learner, and anyone who want to know how JavaScript is being used to create a very small application i.e. image gallery with just few thumbnails.

JavaScript becomes quite tough and complicated when you learn JavaScript either yourself or from an institute without its implementations on the real world projects. When I was learning JavaScript then I was given an assignment to create an image gallery in JavaScript and also I was strictly instructed to write an explanation too. So I am trying to give all my best efforts and planning to make it easy to understand by you.

What are the requirements to create an Image Gallery in JavaScript?

If you want to make a basic gallery in JavaScript then you should know the basics of the followings-

  • HTML – in HTML we create the structure of gallery.
  • CSS – in CSS we style or maintain presentation of the elements of gallery.
  • JavaScript – JavaScript is useful to add the behaviors or logics in an image gallery.

Note: If you don’t have basic knowledge of HTML, CSS & JavaScript then I would recommend you to join a web course to create stunning interfaces for gallery.

How to start to create a basic Image Gallery in JavaScript?

First of all we create a number of folders:

1. images – in images folder we put all small and big images.

2. webcss– in webcss folder we put all css in this folder and link it with header part of gallery.html

3. webjs– in webjs folder we put all js in this folder and link it with header part of gallery.html

4. gallery.html – in gallery.html we store all html code in this folder

Now let’s start the htmlization of the gallery.

Copy and paste the following HTML code in your editor and save it as gallery.html

<!DOCTYPE html>
<html>
<head>
     <title>basic gallery in javascript </title>
     <link rel="stylesheet" type="text/css" href="webcss/web_css.css">
</head>
<body>
<div class="main">
   <header class="header">
     <figure class="logo"><img src="images/logo.png"></figure>
   </header>
   <div class="wrapper">
       <div id="big_img">
          <img src="images/small-1-big.jpg" width="920" height="400" id="myPicture" class="border" />
       </div>
       <div class="thumbnail-inner">
          <img src="images/small-1.jpg"   id="small-1"/>
          <img src="images/small-2.jpg"   id="small-2"/>
          <img src="images/small-3.jpg"   id="small-3"/>
          <img src="images/small-4.jpg"   id="small-4"/>
          <img src="images/small-5.jpg"   id="small-5"/>
          <img src="images/small-6.jpg"   id="small-6"/>
       </div>
    </div>
</div>
<script type="text/javascript" src="webjs/web_js.js"></script>
</body>
</html>

Css for this basic gallery:-

Create a web_css.css file in the webcss folder please.

*{
            margin: 0;
            padding: 0;
}
.main{
            width:1000px;
            height: 750px;
            background-color: #000;
            margin: 0 auto;
}
.header{
            width:960px;
            height: 80px;
            margin: 0 auto;
}
.logo{
            width:190px;
            height: 79px;
            margin-left: 40px;
            margin-top: 10px;
            float: left;
}
.wrapper{
            width:960px;
            height: 580px;
            background-color: #fff;
            float:left;
            margin:20px;
}
#big_img {
            width:920px;
            height: 420px;
            margin:20px 20px 0px 20px;
}
.thumbnail-inner{
            width:920px;
            height: 120px;
            background-color: #000;
            float: left;
            margin-left: 20px;
}
.thumbnail-inner img{
            width:130px;
            height: 100px;
            margin:8px 0px 0px 12px;
            border:3px solid red;
            border-radius: 5px;
            opacity: 0.5;
            cursor: pointer;
}
.thumbnail-inner img:hover{
            opacity: 1;
}

Now start JavaScripting for this basic gallery.

Put the following code in your web_js.js file and save it into the webjs folder.

window.onload = gallery;
//when we load your gallery in browser then gallery function is loaded
function gallery(){
     // gallery is the name of function
     var allimages = document.images;
     //now we create a variable allimages
     //and we store all images in this allimages variable
     for(var i=0; i<allimages.length; i++){
          //now we create a for loop
          if(allimages[i].id.indexOf("small") > -1){
               allimages[i].onclick = imgChanger;
               //in above line we are adding a listener to all the thumbs stored inside the allimages array on onclick event.
          }
     }
}
//declaring the imgChanger function
function imgChanger(){
     //changing the src attribute value of the large image.
     document.getElementById('myPicture').src ="images/"+this.id+"-big.jpg";
}

The above code is good enough to understand the usefulness of HTML, CSS, and JavaScript for a Gallery. You should always keep your CSS, JavaScript, and HTML separate from each other for the better organization of code. JavaScript is an event driven scripting language that works well with HTML.

Please let me know if you have any doubts in the comments.

Leave a Reply

You must be logged in to post a comment.

Copy link