Simple Image Viewer Plugin with CSS, JavaScript, and Canvas

Simple Image Viewer Plugin

In this tutorial, we are going to create Simple Image Viewer Plugin with CSS, JavaScript, and Canvas. Using ImageTrans.js is a simple plugin that can display any picture or image viewer. It can zoom in and out, flip to vertical or horizontal, and it has rotating features. You can also check the live demo of this simple tutorial, so you can get an idea and you can try this out, let's start coding.

How to create it

1. Create a simple markup for the container of the image and the buttons.
1. <div id="Image_Container"></div>
2. <button class="btn" id="Left_Image"><i class="fa fa-rotate-left"></i></button>
3. <button class="btn" id="Right_Image"><i class="fa fa-rotate-right"></i></button>
4. <input id="Vertical_Image" type="button" class="btn" value="Vertical Flip" />
5. <input id="Horizontal_Image" type="button" class="btn" value="Horizontal Flip" />
6. <button class="btn" id="Zoom_Out_Image"><i class="fa fa-search-minus"></i></button>
7. <button class="btn" id="Zoom_In_Image"><i class="fa fa-search-plus"></i></button>
8. <input id="Reset_Image" type="button" class="btn" value="Reset" />
9. <input id="Canvas_Image" type="button" class="btn" value="Using Canvas" />
10.  
11. <br />
12. <br />
13.  
14. <input id="image_address" type="text" class="form-control" placeholder="Enter the Image Address . . . . ." autofocus="autofocus">
15. <br />
16. <input id="view_Image" type="button" value="View" class="btn btn-primary">
2. Using this simple script, we can initialize the image viewer to the default options.
1.         var it = $("#Image_Container").ImageTrans( options );
3. These all the script for the feature of ImageTrans.js.
1.         it.load(src);
2.         $("#Zoom_Out_Image").on( "click", function(){ it.zoomout(); })
3.         $("#Zoom_In_Image").on( "click", function(){ it.zoomin(); })
4.        
5.         $("#Vertical_Image").on( "click", function(){
6.                 it.vertical();
7.         } )
8.        
9.         $("#Horizontal_Image").on( "click", function(){
10.                 it.horizontal();
11.         } )
12.        
13.         $("#Left_Image").on( "click", function(){
14.                 it.left();
15.         })
16.        
17.         $("#Right_Image").on( "click", function(){ it.right(); })
18.        
19.         $("#Reset_Image").on( "click", function(){ it.reset(); })
20.        
21.         $("#view_Image").on( "click", function(){
22.                 src = $("#image_address").val();
23.                 it.load(src);

Output

For the full source code, kindly click the "Download Code" button below. If you are interested in programming, we have an example of programs that may help you even just in small ways. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.