Open In App
Related Articles

JavaScript Gallery Plugin

Improve Article
Save Article
Like Article

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.

<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.


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

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

export default [


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 [

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

responsive gallery output

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 18 Aug, 2020
Like Article
Save Article
Similar Reads
Complete Tutorials