For image that carry the CSS class "magnify
",
clicking on them obviously triggers the magnifying effect. However, if that's
not enough, you can also add arbitrary links on the page that expand a
particular "magnify" image as well. Given the following "magnify
"
image:
<img id="goose" src="/id90/Oldies/1_1970goose.jpg" class="imagewarp" data-magnifyby="5" style="width:200px; height:150px" />
The following arbitrary link will also magnify the above when the link is clicked:
<a href=#" rel="magnify[/id90/Oldies/1_1970goose.jpg]">Zoom in on goose </a>
The syntax is simply rel="magnify[imageid]"
, added
inside the link, where imageid is the ID of the "magnify
" image you
wish to associate the link with. Of course, be sure to give your "magnify" image
a unique ID first.
Here's an example:
So far everything above pertains to adding the magnify effect to
a static image on the page, by modifying its markup. You can, however, also
apply the magnify effect to an image dynamically, or reapply the effect to the
same image, such as after the image's src
has been changed, for
example.
To add the magnify effect to an image on demand, call the method
imageMagnify(options)
on the desired images' jQuery wrapper
object, such as:
jQuery("#myimage").imageMagnify({
//apply effect to image with ID="myimage"
magnifyby:5
})
or
jQuery("div#mygallery img").imageMagnify({
//apply effect to image with ID="myimage"
magnifyto:750,
magnifyduration: 1000 //<--No trailing comma after last option!
})
If you're unfamiliar with selecting elements using jQuery,
please see jQuery
Selectors. When calling imageMagnify(options)
, the following
options can be passed into the method, serving the same purpose as their HTML
attributes counterparts above: