Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

JavaScript Gallery Plugin

  • Last Updated : 18 Aug, 2020

In this article, we will learn how to implement an image gallery feature using JavaScript Gallery plugin. This plugin is very light-weight and responsive in nature which helps developers for managing photo galleries.

Note: Please download the JavaScript Gallery plugin in the working folder and include the required files in the head section of your HTML code.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

<link href=”style.css” rel=”stylesheet” type=”text/css”/>
<script src=”app.js”></script>

Example: The following example demonstrates an image gallery using the JavaScript Gallery plugin. Each image in the gallery is easily swipeable. The developer needs to create one “images” folder in the working folder in which the “JPG” or “PNG” images files are stored. More images can be added later in this folder.



HTML




<!DOCTYPE html>
  
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content=
    "initial-scale=1, width=device-width">
  
<head>
    <link rel="stylesheet" href="style.css">
    <script src="app.js" type="module"></script>
    <title>JavaScript Gallery Plugin</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h2 style="color:green">GeeksForGeeks</h2>
    <b>JavaScript Gallery Plugin</b>
    <template>
        <li>
            <img alt="" loading="lazy">
        </li>
    </template>
</body>
  
</html>

images.js This JavaScript file is used in the above HTML code which holds all the images name as shown below.




export default [
  "background1.jpg",
  "background2.jpg",
  "background3.jpg",
  "geeksimage1.png",
  "geeksimage2.png",
  "geeksimage3.png",
  "gfg1.png" 
];

Output:

If the user wants to add more images to the gallery, the new image name should be added as shown below in the code. For example “gfg2.jpg” is the file added in the “images” folder and in the following code.




export default [
  "background1.jpg",
  "background2.jpg",
  "background3.jpg",
  "geeksimage1.png",
  "geeksimage2.png",
  "geeksimage3.png",
  "gfg1.png",
  "gfg2.jpg" 
];

Output: The following output shows the responsive nature of the plugin.

responsive gallery output




My Personal Notes arrow_drop_up
Recommended Articles
Page :