CSS Modal Image Gallery - askthedev.com

In the world of web design, a modal image gallery is a powerful tool that allows users to view images in a larger format without leaving the current page. It creates a visually appealing and interactive experience for visitors. This article aims to guide complete beginners through the process of creating a CSS modal image gallery, highlighting its structure, styling, and functionality. Let’s dive into the details!

I. Introduction

A. Overview of a modal image gallery

A modal image gallery typically consists of a collection of thumbnails that, when clicked, open a larger version of the image in a modal window. This modal can include navigation features, allowing users to move between images seamlessly.

B. Use cases and benefits

Enhances user experience by keeping users on the same page
Provides a clean, organized view of images
Can be customized further for different projects and needs

II. How To Create a Modal Image Gallery

A. Step-by-step guide

We’ll build a simple modal image gallery using HTML, CSS, and JavaScript. This step-by-step guide will help you code along.

III. HTML Structure

A. Create the images

First, we will set up our HTML with image thumbnails that will trigger the modal when clicked.

<div class="gallery">
    <img src="image1_thumb.jpg" alt="Image 1" class="thumbnail" onclick="openModal();currentSlide(1)">
    <img src="image2_thumb.jpg" alt="Image 2" class="thumbnail" onclick="openModal();currentSlide(2)">
    <img src="image3_thumb.jpg" alt="Image 3" class="thumbnail" onclick="openModal();currentSlide(3)">
</div>

B. Create the modal structure

The modal structure will be defined with a separate div that contains elements for the larger image view and navigation controls.

<div id="myModal" class="modal">
    <span class="close" onclick="closeModal()">&times;</span>
    <div class="modal-content">
        <img class="modal-image" id="img01">
        <a class="prev" onclick="plusSlides(-1)"><< Previous</a>
        <a class="next" onclick="plusSlides(1)">Next >></a>
    </div>
</div>

IV. CSS Styling

A. Basic styles for images

Here’s some CSS to style the gallery and the images.

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.thumbnail {
    width: 150px;
    height: auto;
    margin: 15px;
    cursor: pointer;
    transition: transform 0.2s;
}
.thumbnail:hover {
    transform: scale(1.1);
}

B. Modal styles

The modal will be styled to cover the viewport and align the content appropriately.

.modal {
    display: none; /* Hidden by default */
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9); 
}
.modal-content {
    margin: auto;
    display: block;
    width: 80%; 
    max-width: 700px;
}
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}
.next, .prev {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    color: white;
    font-size: 18px;
    transition: 0.6s ease;
    border: none;
    background-color: transparent;
}

C. Responsive design considerations

Make sure the modal looks good on all devices by applying the following CSS rules:

@media only screen and (max-width: 600px) {
    .thumbnail {
        width: 80px;
    }
    .modal-content {
        width: 90%;
    }
}

V. JavaScript Functions

A. Opening the modal

To open the modal, we’ll create a simple JavaScript function.

function openModal() {
    document.getElementById("myModal").style.display = "block";
}

B. Closing the modal

Here’s the code to close the modal window when the close button is clicked:

function closeModal() {
    document.getElementById("myModal").style.display = "none";
}

C. Navigating between images

This function allows users to navigate through the images in the modal gallery:

let slideIndex = 1;

function currentSlide(n) {
    showSlides(slideIndex = n);
}

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    if (n > slides.length) {slideIndex = 1}    
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";  
    }
    slides[slideIndex-1].style.display = "block";  
}

VI. Conclusion

A. Summary of steps

In this article, we covered how to create a functional modal image gallery using HTML, CSS, and JavaScript. We built a layout, styled it, and added functionality for opening, closing, and navigating between images.

B. Encouragement to customize and expand upon the gallery

Now that you have the basic structure, customize the gallery to match your site’s look and feel, and consider adding features like captions, animations, or additional navigation controls. The possibilities are endless!

FAQ Section

Question	Answer
What is a modal image gallery?	A modal image gallery is a UI component that displays images in a larger format over the existing content on the page.
Can I use videos in a modal gallery?	Yes! You can modify the modal structure to include videos or other media formats.
Is it mobile-friendly?	Yes, with responsive design techniques, you can ensure that the modal gallery works well on mobile devices.

askthedev.com Latest Articles