2011-05-25 77 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();