Question

以下是一些代码：

    <script type="text/JavaScript" src="@Url.Content("~/Scripts/cloud-zoom.1.0.2.js")"></script> 
    <script type="text/JavaScript" src="@Url.Content("~/Scripts/jquery.colorbox.js")"></script>
    <script type="text/JavaScript" src="@Url.Content("~/Scripts/jquery.colorbox-min.js")"></script>
    <link href="@Url.Content("~/Content/colorbox.css")" rel="stylesheet" type="text/css" />

       <div id="large-image">
        <a  href='http://some-image'  class = 'color cloud-zoom'  id='zoom1' rel="adjustX: 10, adjustY:10">
            <img  src="http://some-image" />
        </a>
        <a  href='http://some-image2'  class = 'color cloud-zoom'  id='zoom1' rel="adjustX: 10, adjustY:10">
            <img  src="http://some-image2" />
        </a>
      </div>

正如您可能已经注意到我在同一个锚中使用了云缩放和彩色框。云缩放工作得很好，但是由于云缩放插件，colorbox没有。

例如，如果我从cloud-zoom类删除<a>，则此代码可以正常运行

$('a.color').colorbox({ width: "75%", height: "85%"});

因此，由于云缩放插件，上述行无效。我也尝试过：

 $('#large-image').click(function () {
    jQuery("a.color").colorbox({ width: "75%", height: "85%" });
     });

但这都不起作用..

任何想法??

Answer 1

$mouseTrap.bind('click',this,function(event){
     $("#zoom").trigger("click");
});

添加zoom.js

$('#zoom').colorbox();

Jquery彩盒问题

1 个答案: