jquery увеличить внешнее изображение из текстовой ссылки (решается с помощью js)

Question

В настоящее время я использую jquery для увеличения изображений.

<figure>
    <img src="images/normal/bambit2.jpg" class="magnify" alt="Bambi-aiheisia koriste-esineitä" />
    <figcaption class="kuvateksti">
        Bambi-aiheisia koriste-esineitä 
    </figcaption>
</figure>

Тем не менее, я не понял, как увеличить изображение из папки таким же образом, используя гиперссылку. Я не хочу загружать это изображение как часть готовой страницы.

<a href=#" rel="magnify[img_at_some_folder]">Click me to see image that is not in this page</a>

Если бы кто-то мог указать мне правильный пункт назначения с этим, я был бы очень благодарен.

[править] В основном то же самое делается здесь: http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm в

Ссылки, расширяющие определенное изображение

Я не хочу загружать изображение Сары на странице, но при нажатии на ссылку "Увеличить Сару" эффект тот же.

Answer 1

Сначала вы должны указать, откуда исходит изображение и дать ему идентификатор

<img id="Virtanen" src="ek.gif" class="imagexample" data-magnifyby="5" style="width:200px; height:150px" />

тогда гиперссылка выглядит следующим образом

<a style="color:blue" href="#" rel="magnify[Virtanen]">Click Me</a>

если вы хотите, чтобы изображение было увеличено до области этого изображения, используйте этот код:

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   : ''   
});

Исходный Демо