12

画像のズーム機能にエレベートズーム効果を使用しています。私の画像タグは次のとおりです。

<img id="zoom_01"
 src='New folder/small/image.jpg'
 data-zoom-image="New folder/large/image.jpg">

elevatezoom スクリプトは次のとおりです。

<script>
    $("#zoom_01").elevateZoom({scrollZoom : true});
</script>

ズームしたい画像がたくさんあります。同じ ID の src 値が変更されていますが、data-zoom-image 値を変更できませんでした。data-zoom-image 値を変更するにはどうすればよいですか。 ]それは私が言おうとしていることです。1

4

7 に答える 7

21

データ zoom-image 属性を変更した後、次のように再初期化する必要がありますelevateZoom。

$("#zoom_01").data('zoom-image', 'newURL').elevateZoom({
   responsive: true,
   zoomType: "lens", 
   containLensZoom: true
});
于 2014-03-23T16:05:27.513 に答える
2

これが必要だと思います...

$("#zoom_01").attr('data-zoom-image', 'new path');
于 2013-10-01T07:27:18.653 に答える
0

プラグイン自体が提供するギャラリー機能を使用するだけで、画像をコンテナにラップするだけです

<img src="img1-small.jpg" id="zoom_x" data-zoom-image="img1-large.jpg">
<div id="my_images">
<a href="#" data-image="img1-small.jpg" data-zoom-image="img1-large.jpg"><img src="img1-small.jpg" alt=""></a>
<a href="#" data-image="img2-small.jpg" data-zoom-image="img2-large.jpg"><img src="img2-small.jpg" alt=""></a>
...
</div>

次に、次のようにプラグインを呼び出す必要があります。

$("#zoom_x").elevateZoom({ gallery: "my_images", zoomType   : "inner", cursor: "crosshair", imageCrossfade: true });
于 2016-04-11T00:26:16.747 に答える
0

私はここでまったく同じ問題を抱えていました.プラグインはその特定の属性の変更をサポートしていないため、おそらく機能しません. 独自のドキュメントにエラーがあります。これがどのように機能するかです。

メイン画像とサムネイルの HTML:

<img id="bigpic" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>

<div id="gal1">

<a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
<img src="thumb/image1.jpg" />
</a>

<a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
<img src="thumb/image2.jpg" />
</a>

</div>

ギャラリーを初期化するための jQuery:

$("#bigpic").elevateZoom({
gallery:'gal1',
galleryActiveClass: 'active'
  • それに加えて、あなたがそれに与えたい他の属性

画像をメイン コンテナに渡すための jQuery:

$("#bigpic").bind("click", function(e) {  
var ez =   $('#bigpic').data('elevateZoom');    
$.fancybox(ez.getGalleryList());
return false;
});

私はjQueryを初めて使用し、ここでのメカニズムを100％理解していませんが、それが機能する方法です。うまくいくことを願っています!

于 2013-11-01T05:20:47.130 に答える