IssamWac05
App Monitoring Strategist
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 2
1000 XP
Getting Started
First, we need the jQuery library and the Magnify CSS and JS. I've included these files in the downloadable of this tutorial but if you want, you can download them yourself using the links below:
For jQuery
For Magnify ->Github Repo
Displaying our Image
Next, we display our image that we want to add the magnify functionality. Take note that in order for this function to work, we will be using two images with same aspect ratio, one smaller and one larger.
In this tutorial, I've also included sample images in the downloables that you can use.
Create a new file, name it as index.html and paste the codes below.
Note: We have called the magnify() function in our script using.
That ends this tutorial. Happy Coding :)
Download
First, we need the jQuery library and the Magnify CSS and JS. I've included these files in the downloadable of this tutorial but if you want, you can download them yourself using the links below:
For jQuery
For Magnify ->Github Repo
Displaying our Image
Next, we display our image that we want to add the magnify functionality. Take note that in order for this function to work, we will be using two images with same aspect ratio, one smaller and one larger.
In this tutorial, I've also included sample images in the downloables that you can use.
Create a new file, name it as index.html and paste the codes below.
- <!DOCTYPE html>
- <html
>
- <head
>
- <meta
charset
=
"utf-8"
>
- <title
>
How to Create a Magnifying Lens of Image using jQuery and Magnify.js</
title
>
- <link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"magnify/magnify.min.css"
>
- <style
type
=
"text/css"
>
- /*resize magnifying lens*/
- .magnify > .magnify-lens {
- width: 100px;
- height: 100px;
- }
- </
style
>
- </
head
>
- <body
>
- <img
src
=
"pc_smaller.jpg"
class
=
"zoom"
data-magnify-src
=
"pc_larger.jpg"
>
- <script
src
=
"jquery.min.js"
></
script
>
- <script
src
=
"magnify/magnify.min.js"
></
script
>
- <script
>
- $(document).ready(function() {
- $('.zoom').magnify();
- });
- </
script
>
- </
body
>
- </
html
>
Note: We have called the magnify() function in our script using.
- $(
document)
.ready
(
function
(
)
{
- $(
'.zoom'
)
.magnify
(
)
;
- }
)
;
That ends this tutorial. Happy Coding :)
Download
You must upgrade your account or reply in the thread to view the hidden content.
