Shadowbox和jQuery照片庫衝突

讓我從一些限定詞開始。當談到Javascript/jQuery時，我是一名初學者，因此所有這些都是一次很好的學習經歷，我發現Stack Overflow社區毫無疑問是極其有用的。Shadowbox和jQuery照片庫衝突

我已經通過Google和Stack Overflow的搜索功能做了大量的研究。

手頭的問題是我有一個正在工作的jQuery腳本（由Stack Overflow成員設計的單選按鈕「切換器」），然後我試圖實現一個Shadowbox腳本來放大圖庫中的圖像...但兩人放在一起似乎並不喜歡對方。

我認爲這與衝突的rel標籤有關。這兩個腳本大部分似乎運行良好（沒有發現錯誤），唯一的問題是我的圖像沒有顯示出來，當點擊。通常情況下圖像只有一個黑框（儘管圖像缺失，大小似乎是正確的）。

所有圖像/ js文件都在正確的目錄中，所以我已經排除了。如果任何人有任何建議，爲什麼圖像不顯示，我會非常感激。謝謝！

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css"> 

<script type="text/javascript" src="shadowbox/shadowbox.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript"> 
Shadowbox.init(); 
</script> 

<script type="text/javascript"> 
jQuery.noConflict(); 

(function(jQuery){jQuery(function(){ 

jQuery('.chkbox-container :radio').on('change', function(){ 
    var me = jQuery(this); 
    jQuery.each(jQuery('.img-container img'), function(i,v){ 
    var theShow = jQuery(v).attr('rel'); 
    theShow = theShow.split(' '); 
    if(jQuery.inArray(me.val(), theShow)){ 
     jQuery(v).show(); 
    }else{ 
     jQuery(v).hide(); 
    } 

    });   
}); 

}); })(jQuery); 

</script> 


<style type="text/css"> 

.chkbox-container{ 
    float:left; 
    width:95px; 
} 
.img-container{ 
    float:left; 
    width:300px; 
} 
img{ 
    display:inline-block; 
    width:90px; 
    height:75px; 
    padding:2px; 
    border:1px solid black; 
    display:none;  
} 

</style> 

</head> 
<body> 

<div class="chkbox-container"> 
    <input type="radio" name="THEfilter[]" value="all" checked="checked" /> All<br/> 
    <input type="radio" name="THEfilter[]" value="category1" /> Category 1<br/> 
    <input type="radio" name="THEfilter[]" value="category2" /> Category 2<br/> 
    <input type="radio" name="THEfilter[]" value="category3" /> Category 3<br/> 
</div> 
<div class="img-container"> 
    <a href="images/rufus.jpg" rel="shadowbox[gallery]" title="June 15th - Dr. Hanna's   Office"> <img src="images/rufus-small.jpg" rel="category1" /> 
    <a href="images/york.jpg" rel="shadowbox[gallery]" title="June 20th - Jim's House"> <img src="images/york-small.jpg" rel="category2" /> 
    <a href="images/rufus2.jpg" rel="shadowbox[gallery]" title="June 3rd - Steve's Ranch"> <img src="images/rufus2-small.jpg" rel="category3" /> 
</div>

來源

2012-07-30 jamez14

如果您可以鏈接到有助於解決問題的頁面。 – 2012-07-31 15:28:37

刪除部分的CSS類img做了竅門。顯然（現在很明顯，現在）覆蓋放大圖像的黑盒子是通過我自己的CSS實現的。

來源

2012-07-31 15:34:56 jamez14

所以我沒有通過這個後整體讀取時間，但它看起來像this可能包括類似於您所遇到的問題的東西。我從中收集到你必須在函數調用jQuery之後「重新啓動」shadowbox。再次，不知道這是否是您需要的，只是看起來相似並且有一個公認的和深入的答案。

來源

2012-07-30 19:21:11

感謝您的鏈接。我通讀了答案，並收集了與您相同的信息（重新初始化）。雖然它沒有解決我的問題。但我可能沒有正確實施它。我正在進一步研究... – jamez14 2012-07-30 19:50:04

沒問題。我遇到類似的問題，使用bumpbox和jQuery，但是使用jQuery.noConflict（）解決了這個問題。我對Shadowbox並不是很熟悉，但我認爲它是類似的東西。另外，請注意像HoverZoom這樣的插件，這會在Chrome中爲我搞亂BumpBox。 – 2012-07-30 19:52:34

再次感謝您的意見和建議。仍在通過Shadowbox的支持頁面進行研究... – jamez14 2012-07-30 20:30:02

Shadowbox和jQuery照片庫衝突

回答

相關問題