2011-05-25 48 views
0

下面是一些代码:jQuery的颜色框问题

<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不是因为云变焦插件。

例如,如果我从教室<a>这个代码删除cloud-zoom所以由于云变焦插件上面行不起作用正常工作

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

。 我也试过:

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

但也并不工作..

任何想法?

+0

只是一个观察 - 你可能不希望颜色框颜色框和民在那里,对不对?只是一个或另一个? – 2011-05-25 17:27:00

+0

yes just colorbox-min .. – mathew 2011-05-25 17:28:42

+0

我认为问题在于云端缩放代码阻止了colorbox预期的点击操作。我没有看到任何与云端缩放插件中的任何点击事件相关的内容,因此我认为您必须深入代码并自定义云端缩放插件才能以您想要的方式工作。 – 2011-05-25 17:43:12

回答

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

在zoom.js添加

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