Jquery HTML缩放&；灯箱_Jquery_Html_Css

Jquery HTML缩放&；灯箱

jquery html css

Jquery HTML缩放&；灯箱,jquery,html,css,Jquery,Html,Css,我会用灯箱缩放和显示图像此链接中有一个示例： İ在网站上，进入名为gallery&lightbox的分区我试过这个代码，但不起作用代码： <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="gal1"> <a href="#" data-image="http://www.elevatew

我会用灯箱缩放和显示图像

此链接中有一个示例：

İ在网站上，进入名为gallery&lightbox的分区

我试过这个代码，但不起作用

代码：

<!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>


//启动插件并传递包含图库图像的div的id
$（“#zoom_03”）.ElevateToom（{gallery:'gallery_01'，光标：'pointer'，galleryActiveClass:'active'，imageCrossfade:true，loadingIcon:'http://www.elevateweb.co.uk/spinner.gif'}); 
//将图像传递给Fancybox
$（“#zoom_03”）.bind（“单击”，函数（e）{
var ez=$（'zoom_03'）。数据（'elevateToom'）；
$.fancybox（ez.getGalleryList（））；
返回false；
});
/*在图像上设置边框以防止移动*/
#图库_01 img{边框：2件纯白；}
/*换颜色*/
.active img{border:2px solid#333！重要；}

请帮忙

不是：我的英语不好。对不起我希望您能理解。

ElevateToom示例看起来有缺陷。显示的代码似乎有错误，如HTML中重复的ID和JavaScript中引用的不存在的ID，并且似乎与演示中执行的代码不匹配。不知道那里发生了什么

主要是，您用于启动ElevateToom的ID在HTML代码中不存在。在下面的示例中，我将“gallery”元素存储在一个变量中以供以后使用，这样我只需要指定该ID一次

我无法让ElevateToom代码与FancyBox的最新版本一起工作。ElevateToom提供的对象似乎没有为FancyBox正确格式化，所以我重写了该部分

jQuery（函数（$）{
//定义库对象
var$gallery=$（“#gallery_01”）；
//构建要在Fancybox中打开的对象数组。
var$imgs=[]；
$（'a'，$gallery）。每个（函数（）{
$imgs.push（{'src'：$（this.data（'zoom-image'））}）；
});
//启动提升空间
$（“#缩放”）.elevateToom({
画廊：$gallery.attr（'id'），
光标：“指针”，
galleryActiveClass:“活动”，
是的，
加载图标：'//www.elevateweb.co.uk/spinner.gif'
});
//将Fancybox绑定到单击缩放图像。
//将其打开到当前活动索引。
$（“#缩放”）。打开（“单击”，函数（e）{
e、 预防默认值（）；
var active_index=$（'a.active'，$gallery）.index（）；
$.fancybox.open（$imgs，false，active_index）；
});
});
#画廊(01 img){
边框：2倍纯白；
宽度：96px；
}
#画廊_01.活动图像{
边框：2倍实心#333；
}
以下是完整的工作代码。试着从中学习！：）

$（文档）.ready（函数（）{
$（“#zoom_03”）.elevateToom（{gallery:'gallery_01'，光标：'pointer'，galleryActiveClass:'active”，
imageCrossfade:true，loadingIcon:“loading.gif”}）；
$（“#zoom_03”）.bind（“单击”，函数（e）{
var ez=$（'zoom_03'）。数据（'elevateToom'）；
ez.closeAll（）；//新建：此函数强制隐藏镜头、色调和窗口
$.fancybox（ez.getGalleryList（））；
返回false；
}); 
}); 
$（'#zoom_01'）。提升空间({
zoomType:“内部”，
光标：“十字线”，
zoomWindowFadeIn:500，
缩放窗口：750
}); 
您尝试过哪些代码？堆栈溢出不是代码编写服务。请通过向我们展示您的尝试和遇到的具体问题来帮助我们。我们可以查看您的完整代码吗？如果我们看不到任何代码，我们就无能为力。确保包含所有JS文件和css文件。是否使用此代码$（“#zoom_01”）.elevateToom（）；对于ElevateToom，您需要包含java脚本和cssfile@LambdaNinja我加了一个code@Timothy我添加了一个代码İ如果我在商业网站中使用此扩展是否会导致问题？@Thiers不直接。你预计会出现什么样的问题？licanse问题？@我认为，审查任何第三方脚本的许可证都是值得的，尤其是在商业网站上使用的。对于Fancybox，“”。ElevateToom似乎是“”。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title></title>


<link rel="stylesheet" href="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.fancybox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js" type="text/javascript"></script>
<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.fancybox.pack.js" type="text/javascript"></script>

</head>
<body>


<div class="zoom-wrapper">
    <div class="zoom-left">

<div style="height:274px;width:411px;" class="zoomWrapper"><img style="border: 1px solid rgb(232, 232, 230); position: absolute;" 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>

        <div id="gallery_01" style="width:500px">

        <a href="#" class="elevatezoom-gallery active" data-update="" 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/large/image1.jpg">
        <img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" width="100"></a>

        <a href="#" class="elevatezoom-gallery" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg"><img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png" width="100"></a>

        <a href="tester" class="elevatezoom-gallery" data-image="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">
             <img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" width="100">
        </a>

        <a href="tester" class="elevatezoom-gallery" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image4.jpg"><img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png" width="100"></a>

        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function () {
$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: "active",
    imageCrossfade: true,loadingIcon: "loading.gif"}); 

$("#zoom_03").bind("click", function(e) {  
    var ez =   $('#zoom_03').data('elevateZoom');
    ez.closeAll(); //NEW: This function force hides the lens, tint and window   
        $.fancybox(ez.getGalleryList());
        return false;
    }); 
}); 
</script>


<script type="text/javascript">
$('#zoom_01').elevateZoom({
    zoomType: "inner",
    cursor: "crosshair",
    zoomWindowFadeIn: 500,
    zoomWindowFadeOut: 750
}); 
</script>

</body>
</html>