问题描述
|
这是一些代码:
<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();