How to Create Image Viewer Using JavaScript 


In this article we will show you how to create image viewer using JavaScript.  This article is really amazing for all the readers. We are creating Image Viewer using HTML CSS and JavaScript. You will learn how to insert a data using jQuery.  we dynamically insert the node into the Dom element.  

we also create left and right navigation key event with jQuery.  so when you press the left navigation key the image will move to the left side.  when you press the right navigation key the image will move to the right side.

How to Create Image Viewer

You can randomly change your image as per your key event.  you can import images from the database but in this tutorial, we are importing images from the array. We are importing images using an array and display it on the document.  when you change the image we also wanted to show which image is active right now so we also create that functionality to this tutorial also.

 

Index.html

The first thing you need to do it create the index.html file. In this file, we put the DOM element that represents our images. My first create the container class and put viewer class inside of it. In this viewer class, we insert the image tag. we specify source attribute to the image tag and change its value using for loop. you just look at the code you will understand everything clearly.

  • First, we create a simple HTML5 snippet and link cascading style sheet to the index file using link tag.
  • Then in the body section, we create the container class and put we viewer class inside of this container. Just after the closing we viewer class we insert slider class. inside the slider class, we insert storage class that represents the active images.
  • In the end, we put jQuery cdn on the bottom of the document just before the closing body tag and then we link main.js file which we are creating just after some time in this article.

Now everything is ready we need to move to the style file.

 

Style.css

Create a style.css file in the root directory. We already link this file in index.htm I’m so you don’t care about this. Now in the style file, we insert some properties and change style of the document.  we just wanted to focus on those properties which are important to know. we are not describing each property at this time because it is beyond the article.

Import this file code in your style.css file. In this code, we just Centre the image and add inline-flex to the storage class and display out images in the one line.

Then we create a keyframe that generates fade in animation when you change your image.  when you press left and right navigation key you will see this fade in animation on the present image. Then we also have the active class that we are inserting when we dynamically add the element into the DOM.

 

main.js

Now the last file which we wanted to create is main.js. In this file, we put jQuery code that creates our Image Viewer. In this file, we insert some event and create some function that make the whole tutorial works. Import the following code in the main.js file. we will explain it just after the code.

  • After you create this file you first need to create a document not ready function that executes just after the Dom element is completely loaded.
  • Then we create storage and viewer class and store it in the variable. Using this we can access this element anytime.
  • Then we create a global variable call index. we assign zero value to this index variable.
  • The zero value represents the first image. when you change the index value you’re changing the image. But how it is possible? we are using the array to store image path and using the array index you can change your image path dynamically.
  • Then we create a for loop that equals to the length of the array and in this loop, we insert a storage variable and append Division tag with glass image. To specify different class to the different division tag we use indexed I variable just after the class.
  • Then we select the previously created division tag using the class name and in this division that we append image tag with source attribute.  in the source attribute, we specify image array and we specify index value I. so this will generate images equals to the length of the array.

The function that does the whole work

In the above code, you also see the function that does the whole work for us. So just wanted to explain to you what this function does. Using keydown event we will call this function. then we check if the user pressed the key code 39. but first I just wanted to explain to you how you can identify keycode.

Now you know how to get the key code.

Then we create a keydown event and call this function. Then we get the value returned by the function and store it in the indexed Global variable.

In the if and else statement with the check if the index value is greater than the array then we specify index is equal to zero if it is not then we specify index value is equal to an array -1. You can also stay in the code we just change the display property of each image to none and block and in the keydown event, we also add the active class which we created in the style.css file.

Now you know How to Create Image Viewer.

I think I explain everything about this code.  but if you still not understand then comment me in the comment box below of this article. if it is possible to me to solve your problem then it is pleasure to me. That is all for this article we will get back to you in the next one. Share this article with your friend. Bookmark this website for more related articles.

Leave a Reply

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