Image Bigger Viewer using HTML and JavaScript

Have you ever encountered images that are so small or blur? These images need to be resized or zoomed in. There is a way to see this kind of images clearly. It is called "Bigger Image Viewer". You can use this tutorial for your Electronic Commerce System to bigger the image of your product.

Directions

Kindly add this code below to the HEAD section of your page.
  1. <link rel="stylesheet" type="text/css" href="css/style.css" />
  2.  
  3. <script type="text/javascript" src="js/script.js"></script>
  4.  
  5. <script type="text/javascript" src="js/script_1.js">
Note: DOWNLOAD the source code for the external files. (click the "Download Code" below) Just add the sample code to the BODY section of your page.
  1. <img src="Images/11.jpg" style="width:200px" data-plusimage="Images/11.jpg" data-plussize="600,366" />
  2.  
  3. <br /><br />
  4.  
  5. <img src="Images/22.jpg" style="width:150px" data-plusimage="Images/22.jpg" data-plussize="500,350" />
For the CSS source code.
  1. .caption{
  2. position: absolute;
  3. font: normal 13px Arial;
  4. }
  5.  
  6. .caption a{
  7. position: block;
  8. background: azure; /*bg color of caption*/
  9. padding: 3px;
  10. border:1px solid blue;
  11. text-decoration: none;
  12.  
  13. font-family:cursive;
  14. font-size:13px;
  15. }
  16.  
  17. .caption a:hover{
  18. background: azure; /*bg color of caption when mouse rolls over it*/
  19. font-family:cursive;
  20. font-size:13px;
  21. border:1px solid red;
  22. color: red;
  23. }
  24.  
  25. .enlargebox{
  26. position: absolute;
  27. display:none;
  28. }
  29.  
  30. .enlargebox .title{
  31. background:azure;
  32. color:white;
  33. padding: 3px 2px;
  34. text-align: right;
  35. font:bold 14px Arial;
  36. }
  37.  
  38. .enlargebox .title img{
  39. cursor:pointer;
  40. cursor:hand;
  41. }

Result

For the first image. ResultFor the second image. ResultHope that this tutorial will help you a lot. 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.

Add new comment