Image Bigger Viewer using HTML and JavaScript

[B_R_I_A_N]

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"
   
   >
   
6. </
   
   script
   
   >
   

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.

For the second image.

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.

Download