“A”

Project Report
On
“Dynamic Galary Using Javascript”
Submitted & Present in the fulfilment of therequirement for the

award of

Diploma in Information Technology

By
Mr. Pardeshi Viraj Manoj

Mr. Ambule Prashant Mahadev

Mr. Aware Prathmesh Shashikant

Ms. Chavan Mayuri Tukaram

Under the Guidance of

Prof. Puri S.B.

DEPARTMENT OF INFORMATION TECHNOLOGY

NEW SATARA COLLEGE OF ENGINEERING & MANAGEMENT POLY (2024-2025)

1
 NEW SATARA COLLEGE OF ENGINEETING AND
MANAGEMENT KORTI-PANDARPUR

Certificate

This is to certify that the project report “” has been presented

successfully and submitted by.
Name of the Student: - Seat No.
Mr. Viraj Pardeshi 257923
Mr.Prashant Ambule 257924

Mr. Prathmesh Aware 257925

Ms. Mayuri Chavan 257926

Student of IT (Information Technology) class in the fulfilment for

the award of Diploma in Information Technology Engineering as per
curriculum laid by Maharashtra State Board of Technical Education,
Mumbai duringthe academic year 2024-2025.

Project Guide H.O.D Principal

( Prof. Godase S.B.) (Prof. Puri S.B.) (Prof. Londhe V.H.)

2
 Declaration

We hereby declare that the project report entitled “Dynamic Galary Using

Javascript” is completed and submitted by me for the award of diploma

engineering in Information Technology branch, NSCOEM, College Korti,Pandharpur.

The partial fulfillment of the requirement for the award of the diploma of

INFORMATION TECHNOLOGY is a project work carried out by me under the

guidance of Prof. Puri S.B. I further declare that the work reported in this

project has not submitted and will not be submitted, either in part or full, for

the award of diploma engineering in this institute or any other university or

examination body.

PLACE- KORTI, PANDARPUR

DATE-

Mr. Viraj Pardeshi

Mr. Prashant Ambule

Mr. Prathmesh Aware
Ms. Mayuri Chavan

3
 Acknowledgement

I hereby declare that the work presented in this Mini project report
entitled, “Dynamic Galary Using Javascript” in partial fulfilment for
the Diploma of "Information Technology" in Computer Science &
Engineering. Our extreme gratitude to Prof. Puri S. B. who guided us
throughout the project. Without his willing disposition, spirit of
accommodation, frankness, timely clarification and above all faith in us, this
project could not have been completed in due time.

Project member:

Mr. Viraj Pardeshi

Mr. Prashant Ambule
Mr. Prathmesh Aware

Ms. Mayuri Chavan

4
 Abstract

Student admissions are playing very important role in major activities of the

any university as the basic requirement of the university is students and

without student’s university cannot survive. An inefficient admission

application system may reduce the number of admitted student in the

esteemed university because if the admission system is slow and having

many delays in the process. When considering Palestine students this is

unfortunate, but when considering Palestinian international students, it can

mean the difference between success and failure because of the large sums

of money each brings to the university’s economy. This project is to design

and develop the Diploma and local admission process at the institute to

develop an easy-to-use system that will significantly quicken and simplify

this process.

5
 Introduction

Introduction to a Dynamic Gallery Using JavaScript

A dynamic gallery is a web application feature where images or content are displayed in an interactive
way, with functionality for users to browse, zoom, or even add/remove images dynamically.
JavaScript is often used to implement the interactivity in such galleries, allowing for user actions like
clicking on images to view them in a larger format or displaying images in a grid layout.

The gallery can be built in various ways, with features like:

• Image Grid Layout: Images are displayed in a grid, and clicking an image might show a larger
version.
• Pagination or Infinite Scroll: If the gallery has many images, you can implement pagination or
an infinite scroll feature to load more images as the user scrolls down.
• Modal View: Clicking an image can open a larger version in a modal window.
• Add/Delete Images: JavaScript can dynamically add or remove images based on user actions or
data from a backend API.

6
 ➢Program
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Image Gallery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="gallery-container">
<div class="image" onclick="openModal('img1')">
<img src="ER.jpg" alt="Image 1" id="img1">
</div>
<div class="image" onclick="openModal('img2')">
<img src="logo.jpg" alt="Image 2" id="img2">
</div>
<div class="image" onclick="openModal('img3')">
<img src="home1.jpg" alt="Image 3" id="img3">
</div>
<!-- Add more images as needed -->
</div>
<!-- Modal -->
<div id="modal" class="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img id="modal-img" class="modal-content" src="">
<div id="caption"></div>
</div>
<script src="script.js"></script>
</body>
</html>
7
Script.js

// Function to open the modal when an image is clicked

function openModal(imageId) {
var modal = document.getElementById('modal');
var modalImg = document.getElementById('modal-img');
var captionText = document.getElementById('caption');

// Get the clicked image element and its source

var img = document.getElementById(imageId);
modal.style.display = "block";
modalImg.src = img.src; // Set the modal image source
captionText.innerHTML = img.alt; // Set the caption of the image
}

// Function to close the modal when the close button is clicked

function closeModal() {
var modal = document.getElementById('modal');
modal.style.display = "none";
}

8
 Styles.css
body {
font-family: Arial, sans-serif;
}
.gallery-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 20px;
padding: 20px;
}
.image img {
width: 100%;
height: auto;
cursor: pointer;
border-radius: 8px;
transition: transform 0.3s ease;
}

.image img:hover {
transform: scale(1.1);
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.8);
padding-top: 60px;
}
9
.modal-content {
margin: auto;
display: block;
max-width: 80%;
max-height: 80%;
}
#caption {
text-align: center;
color: white;
font-size: 20px;
padding: 10px;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: white;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}

10
➢ Output: -

11
 ➢Conclusion
• Javascript provides many benefits when used for creating interactive and engaging
image galleries. It offers greater flexibility than traditional HTML and CSS when creating an
image gallery and can be used to add animations, transitions, lazy load functionality,
responsiveness, interactivity and more.

In this project, we've explored how to create a dynamic image gallery using HTML, CSS, and
JavaScript. The gallery was designed to provide users with an interactive browsing experience,
allowing them to click on images to view them in a larger format within a modal. Below are the
key takeaways and concluding thoughts:

12
 ➢References
https://medium.com/@fyattani/dynamic-image-slides-with-javascript-5f4ec9770eb5

https://medium.com/@ryaddev/creating-a-dynamic-image-gallery-with-next-js- and-tailwind-css-
275f29f1ea45

13