JavaScript Gallery Plugin

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.

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

Oct	NOV	Dec
	25
2019	2020	2021

HTML

Recommended Posts: