提升缩放不起作用 [英] elevate zoom not working

问题描述

我使用苹果风格的幻灯片库来提升变焦，并且所有的工作都很好。但是，缩放功能会放大滑块隐藏的隐藏图像，直到它们在缩略图上单击时变为可见。启动缩放插件的原始代码是

I am using elevate zoom with Apple-style Slideshow Gallery and all works fine. However the zoom feature is zooming in the hidden images which are hidden by the slider until they become visible when clicked on the thumbnail. The original code for initiating the zoom plugin was

$("#zoom_01").elevateZoom();

我从其他问题中得到了下面的JavaScript代码，它似乎解决了问题，但它激活了图像悬停并在不悬停时禁用它。我想要的是让变焦只显示在可见图像上，而不是隐藏的图像上。有人可以帮我吗？

I got the below JavaScript code from other question which seemed to solve the problem but it activates the image on hover and disables it when not hovered. What I want is to have the zoom to show only on visible images not the hidden one. Can someone help me out please?

<div id="main">
<div id="gallery">
<div id="slides"><!--Main image-->
<div class="slide"><img src="img/sample_slides/macbook.jpg" data-zoom-image="images/big_mac.png" id="zoom_01" width="300" height="400" /></div>
<div class="slide"><img src="img/sample_slides/iphone.jpg" data-zoom-image="images/big_iphone.png" id="zoom_02" width="300" height="400" /></div>
</div>
<div id="menu"><!--Thumbnail-->
<ul>
<li class="fbar">&nbsp;</li> 
<li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" /></a></li>
<li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" /></a></li>
</ul>
</div>
</div>
</div>
<script>
jQuery( function () {

   var elevate_zoom_attached = false, $zoom_01 = $("#zoom_01") ;

    $zoom_01.hover( 
     // hover IN
     function () {
        if ( ! elevate_zoom_attached ) {
        $zoom_01.elevateZoom({

                  cursor   : "crosshair"
                });
        elevate_zoom_attached = true ;
        };
    },
     // hover OUT
     function () {
        if ( elevate_zoom_attached) { // no need for hover any more
          $zoom_01.off("hover");
        }
     }
  );

}) ;

jQuery( function () {

   var elevate_zoom_attached = false, $zoom_02 = $("#zoom_02") ;

    $zoom_02.hover(
     // hover IN
     function () {
        if ( ! elevate_zoom_attached ) {
        $zoom_02.elevateZoom({

                  cursor   : "crosshair"
                });
        elevate_zoom_attached = true ;
        };
    },
     // hover OUT
     function () {
        if ( elevate_zoom_attached) { // no need for hover any more
          $zoom_02.off("hover");
        }
     }
  );

}) ;
</script>

< ul>
< li class =fbar>& nbsp;< / li>
< li class =menuItem>< a href =>< img src =img / sample_slides / thumb_macbook.png/>< / a>< / li> < / b>< / b>< / b>
< / ul>
< / div>
< / div>
< / div>
< script>
jQuery（function（）{

var elevate_zoom_attached = false，$ zoom_01 = $（＃zoom_01）;

$ zoom_01.hover（
//悬停在
函数（）{
if（！elevate_zoom_attached）{
$ zoom_01.elevateZoom（{

光标：十字线
}）;
elevate_zoom_attached = true;
};
}，
//悬停OUT
function（）{
if（elevate_zoom_attached）{//不需要再悬停
$ zoom_01.off（hover）;
}
}
）;

}）;

jQuery（function（）{

var elevate_zoom_attached = false，$ zoom_02 = $（＃zoom_02）;

$ zoom_02.hover （
// hover IN
function（）{
if（！elevate_zoom_attached）{
$ zoom_02.elevateZoom（{

cursor：crosshair
}）;
elevate_zoom_attached = true;
};
}，
// hover OUT
function（）{
if（elevate_zoom_attached ）{//无需再悬停
$ zoom_02.off（hover）;
}
}
）;

}） ;
< / script>

推荐答案

我不认为你已经设置了elevateZoom来使用它提供了相册功能。

Instead of writing the script like you have, why not just pass the options as a variable?

而不是像你一样编写脚本，为什么不把这些选项作为变量传递？

jQuery("#zoom_1").elevateZoom({ //the feature image gallery: 'menu', //it will seek out the images in the div#menu cursor: 'crosshair' });

Remember to tag on the data-zoom-image="" on each thumbnail, with a link to the larger image.

请记住在 data-zoom-image =


更多信息可以在Elevate Zoom网站上找到： http://www.elevateweb.co.uk/image-zoom/examples

这篇关于提升缩放不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！