I am currently using jquery to zoom images.
<figure>
<img src="images/normal/bambit2.jpg" class="magnify" alt="Bambi-aiheisia koriste-esineitä" />
<figcaption class="kuvateksti">
Bambi-aiheisia koriste-esineitä
</figcaption>
</figure>
However, i havent figured out, how to magnify image from folder in a same way, by using a hyperlink. I do not want to load this image as a part of finished page.
<a href=#" rel="magnify[img_at_some_folder]">Click me to see image that is not in this page</a>
If someone could point me in correct destination with this i would be very thankful.
[edit] Basically same thing is done here: http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm at
Links that expand a particular "magnify" image
I dont want to load image of Sarah at page, but have the same efect when pressing link "Enlarge Sarah"
First you have to specify where the image is coming from and give it an id
<img id="Virtanen" src="ek.gif" class="imagexample" data-magnifyby="5" style="width:200px; height:150px" />
then the hyperlink is as follows
<a style="color:blue" href="#" rel="magnify[Virtanen]">Click Me</a>
if you want an image that zooms in to an area of that image then use this code:
html:
<div id="zt-container" class="zt-container">
<div class="zt-item" data-id="zt-item-1">
<img class="zt-current" src="images/image1.jpg" />
<div class="zt-tag" data-dir="1" data-link="zt-item-2" data-zoom="5" data-speed="700" data-delay="50" style="top:138px;left:151px;"></div>
<div class="zt-tag" data-dir="1" data-link="zt-item-3" data-zoom="6" data-speed="700" data-delay="50" style="top:253px;left:520px;"></div>
</div>
<div class="zt-item" data-id="zt-item-2">
<img class="zt-current" src="images/image1_1.jpg" />
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="5" data-speed="500" data-delay="0"></div>
</div>
<div class="zt-item" data-id="zt-item-3">
<img class="zt-current" src="images/image2_2.jpg" />
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="6" data-speed="500" data-delay="0"></div>
</div>
jquery
$('#zt-container').zoomtour({
// if true the tags are rotated depending on their position
rotation : true,
// zoom out animation easing. Example: easeOutBounce , easeOutBack
zoominEasing : '',
// zoom out animation easing
zoomoutEasing : ''
});