jQuery colorbox问题 - 编程之家

如何解决jQuery colorbox问题

| 这是一些代码：

    <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可以正常工作，但是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%\" });
     });

但这都不行.. 有任何想法吗？？

解决方法

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

添加zoom.js

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