8

Elevate Zoomを試していますが、少し問題があり、助けが必要です。

基本的に、私がセットアップしたDEMOからわかるように、サムネイルをクリックしたときにプラグインを再初期化する方法があるかどうか、またはデータをリセットして背の高い画像 (塔の写真) を取得する方法があるかどうかを調べようとしています。ズーム ウィンドウは最初の画像の寸法を使用していません。（それがしていることを知ることができるものから収集します）

残念ながら、この形式を使用している人々に画像を適切に作成する力がないため、さまざまな高さの画像を考慮する必要があります。それはできますか？

現時点では、デモ ファイルに基づくマイ コード

<img style="border:1px solid #e8e8e6;" id="zoom_03" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" 
data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg"
width="411"  />

<div id="gallery_01">

<a  href="#" class="elevatezoom-gallery active" data-update="" data-image="images/large/image1.jpg" data-zoom-image="images/large/image1.jpg">
<img src="images/large/image1.jpg" width="100"  />
</a>

<a  href="#" class="elevatezoom-gallery" data-update="" data-image="images/large/image2.jpg" data-zoom-image="images/large/image2.jpg">
<img src="images/large/image2.jpg" width="100"  />
</a>

<a  href="#" class="elevatezoom-gallery" data-image="images/large/image3.jpg" data-zoom-image="images/large/image3.jpg">
<img src="images/large/image3.jpg" width="100"  />
</a>

<a  href="#" class="elevatezoom-gallery" data-update="" data-image="images/large/image1.jpg" data-zoom-image="images/large/image1.jpg">
<img src="images/large/image1.jpg" width="100"  />
</a>

<a  href="#" class="elevatezoom-gallery" data-update="" data-image="images/large/image5.jpg" data-zoom-image="images/large/image5.jpg">
<img src="images/large/image5.jpg" width="100"  />
</a>

</div>

jQuery

$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'crosshair', galleryActiveClass: "active", zoomType: "inner" }); 


var image = $('#gallery_01 a');
var zoomConfig = {  };
var zoomActive = false;

image.on('click', function(){

        $.removeData(image, 'elevateZoom');//remove zoom instance from image

        image.elevateZoom(zoomConfig);//initialise zoom

});

サイドノート

画像へのすべての参照を大きなファイル パスに作成したことに気付くかもしれません。これは、このプラグインを使用する必要がある方法で、ユーザーが中解像度のファイルのみをアップロードするためです。

4

10 に答える 10

7

組み込みのギャラリー機能を使用して、画像が変更されるたびに zoomContainer の高さを設定します。

$("#gallery_01 a").click(function() {
    var myVar = setInterval(function(){ // wait for fading

        var height = $("#zoom_03").css("height");
        $(".zoomContainer").css("height", height);
        $(".zoomContainer .zoomWindow").css("height", height);

        clearInterval(myVar);
    }, 100);
});
于 2013-08-14T08:31:12.057 に答える
2

問題を理解しようとすると、小さな画像をクリックした後、ズーム領域の幅と高さを変更してはなりません。もしそうなら、 

 imageCrossfade: false,

私にとってはうまくいきました-スタイルシートで #zoom_03 に設定したように、ズーム領域の画像は寸法を保持します。

于 2014-07-17T15:12:43.417 に答える
1

次のように DOM 属性を直接変更できます。

$('#zoomImage').attr('src', NEW_SMALL_URL)
$('.zoomWindow')[0].style.backgroundImage = ['url(', NEW_BIG_URL, ')'].join('')
于 2013-12-10T11:56:42.367 に答える
1

FülöpGáborsの優れた回答に加えて、幅を設定して寸法のサイズを完全に変更することもできます。これは私にとってはうまくいきました。

$("#gallery_01 a").click(function() {
            var myVar = setInterval(function(){ // wait for fading

                var height = $(".zoom_01").css("height");
                var width = $(".zoom_01").css("width");
                $(".zoomContainer").css("height", height);
                $(".zoomContainer").css("width", width);
                $(".zoomContainer .zoomWindow").css("height", height);
                $(".zoomContainer .zoomWindow").css("width", width);

                clearInterval(myVar);
            }, 100);
        });
于 2013-10-02T10:40:26.200 に答える
0

私は美しい解決策を見つけました！このオプションを構成に追加します。constrainType: 'width'

image.elevateZoom({constrainType: 'width'});
于 2014-10-03T01:46:18.740 に答える