[英]jquery zoom external image from text link (solved with js)
我目前正在使用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
擴展特定“放大”圖像的鏈接
我不想在頁面上加載Sarah的圖像,但是在按下鏈接“放大Sarah”時具有相同的效果
首先,您必須指定圖片的來源並為其指定ID
<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 : ''
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.