Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/388.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何将缩放默认库提升到左侧?_Javascript_Jquery_Css_Zooming - Fatal编程技术网

Javascript 如何将缩放默认库提升到左侧?

Javascript 如何将缩放默认库提升到左侧?,javascript,jquery,css,zooming,Javascript,Jquery,Css,Zooming,我想将主图像下方的Deafolt画廊放大到图像的左侧 我的电梯房间窗口是这样的 我想要这样的缩放窗口 <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-c

我想将主图像下方的Deafolt画廊放大到图像的左侧

我的电梯房间窗口是这样的

我想要这样的缩放窗口

<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="https://raw.github.com/    elevateweb/elevatezoom/master/images/large/image1.jpg" data-zoom-image="https://raw.github.com/elevateweb/    elevatezoom/master/images/large/image1.jpg">
    <img src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" width="100"  />
</a>

<a  href="#" class="elevatezoom-gallery" data-update="" data-image="https://raw.github.com/elevateweb/    elevatezoom/master/images/large/image2.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/    master/images/large/image2.jpg">
<img src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg" width="100"  />
</a>

<a  href="#" class="elevatezoom-gallery" data-image="http://image.motortrend.com/f/roadtests/overview/1301_    2013_mercedes_benz_gl450_vs_2012_e350_4matic_wagon/45952740/2013-Mercedes-Benz-GL450-front-view-in-motion.j    pg" data-zoom-image="http://image.motortrend.com/f/roadtests/overview/1301_2013_mercedes_benz_gl450_vs_2012    _e350_4matic_wagon/45952740/2013-Mercedes-Benz-GL450-front-view-in-motion.jpg">
<img src="http://image.motortrend.com/f/roadtests/overview/1301_2013_mercedes_benz_gl450_vs_2012_e350_4mati    c_wagon/45952740/2013-Mercedes-Benz-GL450-front-view-in-motion.jpg" width="100"  />
</a>

<a  href="#" class="elevatezoom-gallery" data-update="" data-image="http://th00.deviantart.net/fs70/PRE/    i/2011/040/e/5/snow_hill_tower_by_past1978-d395ezn.jpg" data-zoom-image="http://th00.deviantart.net/fs70/    PRE/i/2011/040/e/5/snow_hill_tower_by_past1978-d395ezn.jpg">
<img src="http://th00.deviantart.net/fs70/PRE/i/2011/040/e/5/snow_hill_tower_by_past1978-d395ezn.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>
$("#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

});