2013-07-11 29 views
0

当点击链接时,我得到了预期的弹出框,但图像不会加载,它只是旋转和旋转。就我所见,所有的路径都可以。不断旋转加载,但没有图像弹出 - colorbox

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<link rel="stylesheet" href="colorbox/colorbox.css" /> 
<script src="colorbox/jquery.colorbox.js"></script> 
<p><a class="group1" href="http://www.paycoservices.co.uk/colorbox/content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p> 
<p><a class="group1" href="http://www.paycoservices.co.uk/colorbox/content/ohoopee1.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p> 
<p><a class="group1" href="http://www.paycoservices.co.uk/colorbox/content/ohoopee1.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p> 

JS

$(document).ready(function(){ 
      //Examples of how to assign the Colorbox event to elements 
      $(".group1").colorbox({rel:'group1'}); 
      $(".group2").colorbox({rel:'group2', transition:"fade"}); 
      $(".group3").colorbox({rel:'group3', transition:"none", widt h:"75%", height:"75%"}); 
      $(".group4").colorbox({rel:'group4', slideshow:true}); 
      $(".ajax").colorbox(); 
      $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390}); 
      $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409}); 
      $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"}); 
      $(".inline").colorbox({inline:true, width:"50%"}); 
      $(".callbacks").colorbox({ 
       onOpen:function(){ alert('onOpen: colorbox is about to open'); }, 
       onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, 
       onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, 
       onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, 
       onClosed:function(){ alert('onClosed: colorbox has completely closed'); } 
      }); 

      $('.non-retina').colorbox({rel:'group5', transition:'none'}) 
      $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true}); 

      //Example of preserving a JavaScript event for inline calls. 
      $("#click").click(function(){ 
       $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); 
       return false; 
      }); 
}); 

和的jsfiddle http://jsfiddle.net/Kuaet/2/

浏览器控制台提供了这些错误,这些错误是一般,据我所看到的并没有涉及到这个(虽然我知道,他们需要分类!)

GET http://www.paycoservices.co.uk/resources/demos/style.css 404(未找到)newsliderdev.asp:20 GET http://www.paycoservices.co.uk/ahkerrigan-light-webfont.woff 404(未找到)newsliderdev.asp:1 将资源解释为Font,但使用MIME类型application/octet-stream传输:“http://www.paycoservices.co.uk/ahkerrigan-light-webfont.ttf”。

+0

用chrome控制台错误更新了这个问题。 –

回答

0

使用各种版本的colorbox和jQuery后,我终于找到了一个能够很好地协同工作的集合,并解决了这个问题,因为它只是简单地用于我使用的colorbox和jQuery版本。 jQuery 1.6.4和当前版本的colorbox完美地协同工作。