It’s amazing how many web pages today make use of the feature of opening a full-width image in a modal popup after clicking on an interactive image slider. Here, users click on a thumbnail image to see a larger version in a popup. For instance, the user can navigate through images using the left and right arrow keys. In this tutorial, we will walk you through step by step on how to build an image popup slider with HTML, CSS, and JavaScript. This is one easy way to create this slider without requiring extra libraries.
During the article, we will use the following keywords:
- Popup image slider
- Image slider with popup HTML CSS
- How to Create Popup Image Slider HTML CSS JS example
- How to make popup image slider HTML CSS JS using
- Image slider in modal popup
- Image popup on click JavaScript
- Image popup on click HTML
- Popup slider
Let’s get started!
Step 1: Setting Up the HTML Structure
Any website project starts off with HTML. To create the popup image slider, we will require a basic HTML structure. Below is a simple code block that displays multiple images. The image will open in a modal popup on click.
HTML CODE:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Popup Image Slider</title> </head> <body> <!-- Image thumbnails --> <img class="popup-image" src="image1.jpg" alt="Image 1"> <img class="popup-image" src="image2.jpg" alt="Image 2"> <img class="popup-image" src="image3.jpg" alt="Image 3"> <!-- Modal for full-screen images --> <div id="imageModal" class="modal"> <span class="close">×</span> <!-- Close button --> <img class="modal-content" id="modalImage"> <span class="prev">❮</span> <!-- Left arrow --> <span class="next">❯</span> <!-- Right arrow --> </div> </body> </html>
In the following HTML, we have three images with the class popup-image; they’re clickable and open the popup image slider. The div with class modal encapsulates the popup, on which the large version of the clicked image would be visible. Additionally, we include left (prev) and right (next) arrows for navigation purposes.
Step 2: Styling the Popup in CSS
Now, let us add the style to our popup modal and images. The mode popup will fill the screen, and its images will be centralized and big in the middle of the popup.
CSS Code
<style>
/* Style for modal popup */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Black background with opacity */
z-index: 1;
padding-top: 50px;
}
/* Style for modal content (image) */
.modal-content {
display: block;
max-width: 90%;
max-height: 90%;
margin: auto;
}
/* Close button */
.close {
position: absolute;
top: 20px;
right: 35px;
color: white;
font-size: 40px;
cursor: pointer;
}
/* Navigation buttons */
.prev, .next {
position: absolute;
top: 50%;
color: white;
font-size: 40px;
padding: 10px;
cursor: pointer;
user-select: none;
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
/* Style for image thumbnails */
.popup-image {
width: 300px;
cursor: pointer;
margin: 10px;
}
</style>
It is styled here to occupy the full screen height with a semi-transparent black background using the class .modal. The following class is .modal-content that will center the image, set its maximum width and height to 90% of the screen size. The classes .prev and .next are two classes that style the navigation arrows, both on the left and right sides of the screen. Then there’s a class named .close which styles the close button that will dismiss the modal.
Step 3: Bringing interactivity with JavaScript
Core popup image slider code comes with JavaScript. The click functionality is used in opening the modal; it will display the image clicked on and navigational controls so that you can be able to view images by using left and right arrows
JavaScript Code:
<script>
var modal = document.getElementById('imageModal');
var modalImage = document.getElementById('modalImage');
var closeBtn = document.getElementsByClassName('close')[0];
var prevBtn = document.getElementsByClassName('prev')[0];
var nextBtn = document.getElementsByClassName('next')[0];
var images = document.getElementsByClassName('popup-image');
var currentIndex = 0;
// Function to open modal and display clicked image
function showModal(index) {
modal.style.display = "block";
currentIndex = index;
modalImage.src = images[currentIndex].src;
}
// Loop through all images and add click event listener
for (let i = 0; i < images.length; i++) {
images[i].onclick = function() {
showModal(i);
}
}
// Close modal on close button click
closeBtn.onclick = function() {
modal.style.display = "none";
}
// Navigate to the previous image
prevBtn.onclick = function() {
currentIndex = (currentIndex === 0) ? images.length - 1 : currentIndex - 1;
modalImage.src = images[currentIndex].src;
}
// Navigate to the next image
nextBtn.onclick = function() {
currentIndex = (currentIndex === images.length - 1) ? 0 : currentIndex + 1;
modalImage.src = images[currentIndex].src;
}
</script>
This JavaScript code is enabling the modal popup functionality. When clicking on any image, the modal opens up and shows the clicked image inside the modal. Navigation buttons – prev and next – enable cycling of images. The close button hides the modal once clicked.
How to Create a Popup Image Slider Using HTML, CSS, and JavaScript Example
HTML: We constructed the modal thumbnail image structure and popup.
CSS: we styled the modal to take up the full height and width of the screen, centre all images, and added styles for the navigation arrows and close button.
JavaScript: we added interactivity to make the modal open display the right image, and navigate through images with the arrow buttons. Advantages of a Popup Image Slider
Enhanced User Experience: A popup image slider is also a good looking way to display images in view without leaving the webpage.
Navigation through Images Using Left and Right Arrows: This makes the experience much more interactive.
Friendly to Mobile Users: Since the popup slider image is flexible enough to accommodate various screen sizes, it does very well on both desktop and mobile clients.
Preview:
Conclusion
In this article, we shall discuss the essential steps taken to develop a popup image slider using HTML, CSS, and JavaScript. A popup image slider with a modal popup nicely displays several images in an elegant manner while enlarging them when clicked. That feature can easily be added to any web project with the aim of increasing the number of some image galleries or portfolios.
This popup image slider HTML CSS JS example, how-to guide show that creating an effective popup slider can be achieved with fewer lines of code. Whether you’re working on a small website or on a large-scale project, this feature can be easily integrated and will undoubtedly improve the overall user experience.
By following the tutorial above, you should be able to now create a fully functioning slider that will pop up within a modal popup. You could even navigate through images with a click on an image that opens the popup.
Customize the code above to fit your own unique design needs!
Know, how can converting HEX to Pantone simplify your color workflow? The HEX to Pantone conversion provides a standardized, accurate, and efficient method for communicating and reproducing colors. With the best HEX to Pantone converter, you can ensure that everyone involved in a project is using the same color system to simplify production processes, ultimately resulting in high-quality products.