Image Bigger Viewer using HTML and JavaScript

Submitted by alpha_luna on Monday, June 27, 2016 - 16:59.
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. Result For the second image. Result Hope 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.
Tags
image resize
image resize etc
image
Javascript
html/css

Add new comment

About text formats
  • 45 views