1

elevateZoom ( http://www.elevateweb.co.uk/image-zoom ) でレンズをマウス カーソルの中心に配置するにはどうすればよいですか? 問題は、メイン画像にカーソルを合わせると、レンズがカーソルからずれて表示されることです。ElevateZoom は、左: 86px と上: 178px に配置された DOM に次の 2 つの div を挿入します。しかし、div zoomContainer と zoomLens を left: 0 top: 0 に配置する必要があります。

<div class="zoomContainer" style="position: absolute; left: 86px; top: 178px; height: 574px; width: 453px;">
    <div class="zoomLens" style="background-position: 0px 0px; float: right; overflow: hidden; z-index: 999; opacity: 0.4; width: 201.333px; height: 200.875px; background-color: white; cursor: default; border: 1px solid black; background-repeat: no-repeat; position: absolute; left: 0px; top: 0px; display: none;"> 
</div>

以下は私のコードです

HTML

<div id="images">
    <div class="image current">
        <span>
            <img id="zoom_01" src="img/product1_small.jpg" data-zoom-image="img/product1.jpg">
            <div class="zoomContainer" style="position: absolute; left: 86px; top: 178px; height: 574px; width: 453px;">
                <div class="zoomLens" style="background-position: 0px 0px; float: right; overflow: hidden; z-index: 999; opacity: 0.4; width: 201.333px; height: 200.875px; background-color: white; cursor: default; border: 1px solid black; background-repeat: no-repeat; position: absolute; left: 0px; top: 0px; display: none;">
                </div>
            </div>
        </span>
    </div>
    <div id="zoomBox"></div>
</div>

JS

$("#zoom_01").elevateZoom({
    zoomWindowWidth: 400,
    zoomWindowHeight: 400,
    zoomType: 'window',
    zoomWindowPosition: 'zoomBox'
});

CSS

#zoomBox{
    position: absolute;
    width: 400px; height: 400px;
    right: -100%;
    border: 5px solid #000;
}
.image{
    display: table;
    position: absolute;
    left: 100%;
}
.image.current{
    left: 0;
}
.image span{
    display: table-cell;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}
4

0 に答える 0