JavaScript Image Thumbnail Preview Using HTML/CSS


Hello everyone, welcome to javascript article. In this article, we are going to learn how to create Image Thumbnail Preview. We will understand how to build it so we can use it in the website layout. Nowadays, Making things dynamic is so important. This article will show you the way you can make things dynamic and interactive. So we gonna start with a very basic HTML layout and add CSS. Our project would something look like this.

Preview

 

So we will start with a grid layout and add thumbnail previewer to it. When you click on the image you will get all the information of that image in the preview. In the preview, we will add an image on the left side, title, description, and button on the right side. You can notice in the image, we have a close button as well to the image to close the preview. After completing this article, you will be able to make an image previewer for your website.

So let’s get started and create the first index.html file.

Getting started with Index.html

So we will get started with the index file. Create a new directory in the visual studio code editor and create an index.html file in the root directory. In this file, we will first link style.css file and our custom jquery file. Now keep in mind, we also going to use jquery in this article, so we also need to link jquery before any custom or pre-build javascript file. Now let’s look at index.html file and see what we have inside it.

index.html

In this file, we have done lots of things. So let me explain it.

In the head section, we have added style.css custom stylesheet to our project. Inside the body tag, we have project title, thumbnail images, and previews. Then we added jquery from the root directory path. Now keep in mind, In this example, we are using jquery from the root path file. You need to link it from CDN or by creating a new file and placing a jquery code inside it.

In  <ul class="grid-col">  this .grid-col class we gonna add different images. So we can click on it and get the preview. This is actually a grid container. Using style.css file we gonna make this grid-col class as grid container. Inside   <div class="data-content">  division tag, we have image preview. We are going to add preview in the division tag and display it when the user clicks on the image. Inside this .data-content class, we have different images, it’s title and description. We added these divs depending on the images. So when the user clicks on the image, he will get the appropriate preview.

You can notice the href of the anchor tag <a href="#img-1" class="img1">  and id of the division tag is same  <div id="img-1" class="tabcontent"> . So we are linking both these anchors and div with the id. So when you click on the anchor tag it will redirect to the division tag. Now let’s look at style.css file.

So let’s create a new file in the root directory and name it style.css. We already link this file to index.html.

style.css

In this file, we are going to add styling for the index.html file. I am not going to explain everything in this file because it’s very easy to understand. So just copy and paste this code inside style.css file in your project.

Now let’s see what we have inside the main.js file. Let’s create the main.js file inside the root directory. If you want you can put this file in the separate folder as well, but then you need to specify the relative path of that folder in the src attribute later.

main.js

You can notice, we don’t have anything special in this file. I have just added a  $(document).ready(function () {  function which executes ones the document is ready. Then we will create a click event on the anchor tag. Once we click on it we will get the href attribute of the anchor tag for future reference.

Then we gonna remove the active class from all the tab content elements except the clicked element. So I don’t want to remove the active class from the clicked element that is why we added an if expression and check with the href value. Inside this href variable, we have an id of the image. Then   $('.tabcontent').css({ height: "30rem" });  using height property we are going to add smooth scroll to the element. In the style.css file, we have added a transition on the height.

To execute this project just open index.html file in the browser. Once you click on the image you will get an image thumbnail preview. So that’s it. Your Thumbnail Preview project is now ready. If you want to download this project link is on the Github.

If you have any question ask me any time in the comment box. That is all for now. I will see you in the next article.

Leave a Reply

Your email address will not be published. Required fields are marked *