Atencjusz
Exploit Weaponization Expert
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
Have you 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".
In this tutorial, we are going to learn How To Make Bigger Image Viewer.
So, what is it all about?
From the name itself, Bigger Image Viewer automatically adds a caption beneath the images of your choice that when clicked on launches a bigger and clearer version of the image. There may be alteration from the original image to the enlarged version due to the process. The original image loads only to form an enlarged size when requested.
Directions:
First: Kindly add this code below to the HEAD section of your page.
Note: DOWNLOAD the sourcecode for the external files. (click the "Download Code" below)
Second: Just add the sample code to the BODY section of your page.
The two attributes inside the IMG tag:
And, That's all!!!
I hope this simple work, may help you in your project.
Practice, and enjoy coding!!!
Download
In this tutorial, we are going to learn How To Make Bigger Image Viewer.
So, what is it all about?
From the name itself, Bigger Image Viewer automatically adds a caption beneath the images of your choice that when clicked on launches a bigger and clearer version of the image. There may be alteration from the original image to the enlarged version due to the process. The original image loads only to form an enlarged size when requested.
Directions:
First: Kindly add this code below to the HEAD section of your page.
- <link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"css/style.css"
/
>
- <script
type
=
"text/javascript"
src
=
"js/script.js"
></
script
>
- <script
type
=
"text/javascript"
src
=
"js/script_1.js"
>
- </
script
>
Note: DOWNLOAD the sourcecode for the external files. (click the "Download Code" below)
Second: Just add the sample code to the BODY section of your page.
- <img
src
=
"Images/pc_1.jpg"
style
=
"width:200px"
data-plusimage=
"Images/pc_1.jpg"
data-plussize=
"600,366"
/
>
- <br
/
><br
/
>
- <img
src
=
"Images/pc_2.jpg"
style
=
"width:150px"
data-plusimage=
"Images/pc_2.jpg"
data-plussize=
"500,350"
/
>
The two attributes inside the IMG tag:
- data-plusimage: This is the full URL or a path to enlarged our image. Example,
or Images/picture.jpg.
Loading…
www.sourcecodester.com
- data-plussize: This is for the width and height for our enlarged image. The format is "w,h".
And, That's all!!!
I hope this simple work, may help you in your project.
Practice, and enjoy coding!!!
Download
You must upgrade your account or reply in the thread to view hidden text.