【发布时间】：2018-03-25 20:23:09
【问题描述】：
我会放大并显示带有灯箱的图像。
示例在此链接中：
http://www.elevateweb.co.uk/image-zoom/examples
在站点中，转到名为画廊和灯箱的分区。
我已经尝试了代码，但它不起作用。
代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="gal1">
<a href="#" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png">
<img id="img_01" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" />
</a>
</div>
<script type="text/javascript">
//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {
var ez = $('#zoom_03').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
</script>
<style type="text/css">
/*set a border on the images to prevent shifting*/
#gallery_01 img{border:2px solid white;}
/*Change the colour*/
.active img{border:2px solid #333 !important;}
</style>
</body>
</html>
请帮忙。
不是：我的英语不好。对不起。希望你能理解。
【问题讨论】：
-
你试过什么代码？ Stack Overflow 不是代码编写服务。请通过向我们展示您尝试过的内容以及遇到的具体问题来帮助我们。
-
我们能看到你的完整代码吗？如果我们没有看到任何代码，我们将无能为力。确保包含所有 JS 文件和 css 文件..
-
你用过这个代码吗 $("#zoom_01").elevateZoom();对于elevateZoom你需要包含java脚本和css文件
-
@LambdaNinja 我添加了代码
-
@Timothy 我添加了代码