jQuery颜色框问题答案

【问题标题】：Jquery colorbox problemjQuery颜色框问题
【发布时间】：2014-04-10 04:06:52
【问题描述】：

这里有一些代码：

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

您可能已经注意到，我在同一个锚点中同时使用了云缩放和颜色框。 Cloud-zoom 工作得很好，但 colorbox 不能因为 cloud-zoom 插件。

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

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

因此，由于 cloud-zoom 插件，上述行不起作用。我也试过了：

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

但这都不起作用..

有什么想法吗？？

【问题讨论】：

只是一个观察 - 你可能不希望 colorbox 和 colorbox-min 在那里，对吧？只有一个或另一个？
我认为问题在于云缩放代码阻止了 colorbox 期望的点击动作。我没有看到任何与云缩放插件中的任何点击事件相关的内容，因此我认为您必须深入研究代码并自定义云缩放插件才能使其以您想要的方式工作。
好吧，也许这会奏效。但我想通了！它需要一个 jQuery("a.color").colorbox({ open:true width: "75%", height: "85%" });
很高兴你能成功！我会添加您使用的答案并接受它，以防万一其他人有类似的问题。

标签： jquery colorbox

【解决方案1】：

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

添加 zoom.js

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

【讨论】：