How to preview Image on click in Gallery View using HTML, CSS and JavaScript ?

Last Updated : 22 Jul, 2024
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

In this article, we see how easily we can create an Image Gallery with a preview feature using HTML, CSS, and some JavaScript.

Approach

  • Create a div with a class container.
  • Create two more div inside the first div one for the main view and the other for the side view with classes main_view and side_view.
  • Inside the main view insert one image tag with the id main.
  • Inside the side view insert all other images of the gallery with function change and pass the src of the image to function.
  • Give width and margin to a container.
  • Give the height and width to a main_view.
  • Set the dimensions of the image in the main_view.
  • Set side_view to display all images in proper dimensions using flex.
  • Using the change function we will just replace the src of main_view with the source of the clicked image.

Example: This example shows the implementation of the above-explained approach.

HTML 
<!DOCTYPE html>
<html>

<body>
      <!-- Container for our gallery -->
    <div class="container">
        <!-- Main view of our gallery -->
        <div class="main_view">
            <img src="one.jpg" id="main" alt="IMAGE">
        </div>

        <!-- All images with side view -->
        <div class="side_view">
            <img src="one.jpg" onclick="change(this.src)">
            <img src="two.jpg" onclick="change(this.src)">
            <img src="three.jpg" onclick="change(this.src)">
            <img src="four.jpg" onclick="change(this.src)">
        </div>
    </div>
</body>
  
</html>
CSS 
/*Setting Basic Dimensions to give 
    gallery view */
.container {
    margin: 0 auto;
    width: 90%;
}

.main_view {
    width: 80%;
    height: 25rem;
}

.main_view img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.side_view {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.side_view img {
    width: 9rem;
    height: 7rem;
    object-fit: cover;
    cursor: pointer;
    margin: 0.5rem;
}
JavaScript 
const change = src => {
    document.getElementById('main').src = src
}

Output: Click here to see the live Output.


N
NANDINIJAIN
News
Improve
Previous Article
How to make Incremental and Decremental counter using HTML, CSS and JavaScript ?
Next Article
Multiplication Quiz Webapp using HTML CSS and JavaScript

Similar Reads

Create an Image Gallery to view it in a Modal in Tailwind CSS
Modals are like pop-up windows that show content without navigating away from the page. By putting your image gallery in a modal, you give visitors a clear view of your images without any distractions. With Tailwind CSS, you can quickly set up and customize modal-based image galleries, making your website more engaging and user-friendly. Preview Pr
3 min read
How to Create Image Lightbox Gallery using HTML CSS and JavaScript ?
A lightbox gallery is basically used to view the gallery images in detail specifically. You can code the JavaScript to do so but also we can use some downloaded JS and CSS. In this article, we will download the lightbox and attach the JS and CSS files into our code. For our own design satisfaction, we can also use the CSS code as we want. We will d
3 min read
Design a Rotating Image Gallery App in HTML CSS & JavaScript
We'll gather some images and build a gallery that can be rotated with straightforward buttons. To rotate the images to the right, we'll use the right button, and for left rotation, we'll use the left button. The process will be simple, allowing us to easily rotate the images using these buttons. Preview Image ApproachTo start, we make a folder. In
3 min read
Design an Expanding Image Gallery Template using HTML and CSS
In this article, we design an expanding image gallery template using HTML and CSS. An Expanding Image Gallery provides an interactive user experience compared to static galleries. The image expands when the user hovers over the image, enhancing user experience. This template allows for an intuitive expansion of images, enhancing user experience in
2 min read
How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
With the advent of new frameworks in web technologies, it has become quite easy to design and implement feature-rich and responsive web pages. Here, we are going to design a responsive image gallery using HTML, CSS, jQuery, and Bootstrap.  Features or Functionalities to implement: Responsive imagesResponsive Grid SystemImage viewer Prerequisites: B
3 min read
How to add filter with Portfolio Gallery using HTML CSS and JavaScript?
A portfolio gallery is ideal for websites with diverse or extensive content. It allows you to showcase all content on the front page in an organized manner. By adding filters, users can easily find specific content they are interested in. ApproachThe HTML defines the structure, including a container for the title, buttons for filtering different ca
5 min read
How to upload image and Preview it using ReactJS ?
In React upload and preview images improves the user experience of the application, It's typical for online apps to provide image upload capability that enables users to choose and upload photographs. We simply upload a photo from our local device to our React Project and preview it using a static method URL. createObjectURL(). Prerequisite:NPM
2 min read
How to Create an Image Gallery with a Horizontal Scrollbar using CSS?
Image galleries are essential tools for showcasing multiple images within a single container on a website. They allow users to view a collection of images in an organized way. When we use the horizontal scrollbar, then we can reduce the space. In this tutorial, we will go through the steps on how to create an image gallery with a horizontal scrollb
4 min read
How to create an image gallery with a horizontal scrollbar using CSS ?
In this article, we will learn how to create an image gallery with a horizontal scrollbar using CSS. It provides a way to navigate through a set of images, on scroll horizontally to view different pictures. This effect is helpful when space optimization of the web page is a concern that efficiently utilizes the horizontal space for displaying a lar
4 min read
How to Create a Responsive Image Gallery using CSS?
Creating a responsive image gallery using CSS is a common task in web development. A responsive gallery adjusts to different screen sizes and ensures that images look good on devices ranging from mobile phones to desktop monitors. In this article, we will explore different approaches to creating a responsive image gallery using CSS. These are the f
3 min read
Preview an image before uploading using jQuery
Previewing an image before uploading using jQuery allows users to see the selected image on the webpage before submitting it to the server. This enhances user experience by providing immediate visual feedback, ensuring the correct image is chosen. There are several methods to preview an image before uploading it to the server using JQuery which are
4 min read
How to Create Image Gallery using JavaScript?
An Image Gallery is a collection of images displayed in a grid or slideshow format on a webpage. To create an Image Gallery using JavaScript, you can dynamically load images, create HTML elements, and use CSS for styling. JavaScript can add interactivity, like transitions and navigation controls. Here is the Preview Image of the Project we are goin
3 min read
How to Upload and Preview an Image in React Native ?
Image uploading and previewing are widespread in mobile apps. With the Expo ImagePicker package, React Native makes this work easier. Uploading and previewing photographs is a common feature in Android and iOS applications, especially in the user profile section. This feature allows users to submit an image and view a preview of it. In this article
4 min read
How to create a Portfolio Gallery using HTML and CSS ?
The portfolio gallery is useful when your website contains different types of content or so much content. With the help of a portfolio gallery, you can easily display all the content on your front page to the user. To create a portfolio gallery we will need only HTML and CSS. We can use JavaScript also but in this article, limits are set so we will
4 min read
CSS Image Gallery
Creating a responsive image gallery is a great way to showcase a collection of pictures on your website. In this article, we'll walk you through the steps to build a responsive image gallery using HTML and CSS. This guide will help you create a beautiful gallery that looks great on all devices. Step 1: Creating a Basic Gallery StructureFirst, let's
4 min read
How to convert a PDF document to a preview image in PHP?
Converting a PDF document into a set of images may not sound that fun, but it can have a few applications. As the content from images cannot be copied that easily, the conversion makes the document strictly 'read-only' and brings an extra layer of protection from plagiarism. The images may also come in handy when you need some ready-made slides for
6 min read
Angular PrimeNG Image Preview
Angular PrimeNG is an open-source UI component library for Angular Applications. Using the components provided by Angular PrimeNG, one can create stunning and responsive angular applications. In this post, we will see Angular PrimeNG Image Preview. The Image component is used to show a single image to the user with the preview and basic transformat
3 min read
How to attach a click and double-click event to an element in jQuery ?
In this article, we will see how to attach a click and double-click event to an element in jQuery. To attach click and double-click events, click and dbclick events are used. These events are attached with the bind() method. This method is used to attach one or more event handlers for selected elements and this method specifies a function to run wh
1 min read
Difference Between @click and v-on:click in VueJS
Vue. JavaScript allows programmers to "hook" events into HTML elements using these unique event directives. One of them is the v-on directive, which is used to listen for certain events (clicks) and then run a method when that event occurs. v-on:click is the full version of the command that binds a click event to an element. That makes it obvious t
3 min read
Animated sliding image gallery using framer and ReactJS
Animated sliding image gallery using Framer and React JS will have some image and show one by one by one with a sliding animation from right to left. Prerequisites:Node.js and NPM React JSReact JS HooksApproach:To design an animated sliding image gallery using Framer in React we will be using the Page and Frame components for showing transitions. T
2 min read
Create an Image/Video Gallery using React-Native
An Image/Video Gallery is a common feature in mobile applications. This article will guide you for creating an Image/Video Gallery using React Native.We will learn to build an Image/Video Gallery app using React-Native. In this app, we will display the images and videos in the form of a grid, and on clicking, we can view them. If an image is clicke
5 min read
How to make Animated Click Effect using HTML CSS and JavaScript ?
In this article, we will see how to make an Animated Click Effect using HTML CSS, and JavaScript. We generally see animations on modern websites that are smooth and give users a good experience. Here, we will see when the user clicks on the button only then some animation would appear. The animation works after the button is clicked this is used in
3 min read
How to Create a Tab Image Gallery ?
To create a tab image gallery you need to use HTML, CSS, and JavaScript. HTML will make the structure of the body, and CSS will make it looks good. This kind of tab image gallery looks attractive on a website. By using JavaScript you can easily change the displayed pictures from the gallery. Creating Structure: In the HTML section, we will create a
2 min read
How to Create a Responsive Image Gallery in Bootstrap ?
An image gallery is like a digital album where we can put our multiple images to attract user attention. We have used Bootstrap a CSS framework for Creating a Responsive Image Gallery where the layout adjusts automatically based on the screen size, ensuring that it looks good on both large desktop screens and smaller mobile devices. Responsive Imag
3 min read
Create an Image Gallery App with Vue.js
In this tutorial, we'll walk through the process of building an image gallery application using Vue.js. We'll explore different approaches to displaying images and provide the complete executable code for each one of them. Table of Content Using Vue components to create the galleryUsing Vue CDN to create image galleryUsing Vue components to create
3 min read
How to Create a Responsive Image Gallery with Flexbox?
A responsive image gallery adjusts to different screen sizes to ensure that images look good on all devices. Flexbox, a CSS layout model, provides a powerful way to create a responsive image gallery by allowing flexible and efficient arrangements of items within a container. ApproachCreate a container div for the gallery items.Within this container
3 min read
Tabbed Image Gallery in WordPress
A tabbed image gallery is a great way to organize and showcase images on your WordPress site, making it easy for visitors to navigate through different categories or sets of images. This guide will show you how to create a tabbed image gallery using the Ultimate Blocks plugin in a few simple steps. Steps to Create a Tabbed Image Gallery in WordPres
3 min read
Create a Markdown Editor with live preview using React
In this article, we will be creating a Markdown Editor with a live preview using React. I have used easy-to-understand concepts like functional components and hooks, such as useState, to manage our app's data. Plus, we'll use the handy react-markdown npm package to show Markdown content in our editor. Output Preview: Let us have a look at how the f
3 min read
How to set a click event once a page or view is loaded in vue.js?
In this article, we will discuss how to set a click event once a page or view is loaded in vue.js. Just like every other JavaScript framework Vue also supports the Mounting hooks. Mounting hooks are often the most used hooks. They allow us to access or modify the DOM of your component just before or after the first render. So, here we will use the
2 min read
What is the Difference Between "vite" and "vite preview"?
Vite is a build tool designed for modern web projects, offering a fast and efficient development environment. It features rapid hot module replacement (HMR), so you can instantly see updates as you change your code. This makes Vite ideal for developers who need a quick and responsive development setup. Vite Preview is a command that enables you to
3 min read
Article Tags :