1

いくつかの修飾子から始めましょう。私は Javascript/jQuery に関しては初心者なので、これらすべてが素晴らしい学習体験であり、スタック オーバーフロー コミュニティは非常に役立つものであることがわかりました。

Google と Stack Overflow の検索機能を使用して、かなりの量の調査を行いました。

当面の問題は、動作中のjQueryスクリプト（Stack Overflowのメンバーによって設計されたラジオボタン「スイッチャー」）があり、ギャラリーの画像を拡大するためにShadowboxスクリプトを実装しようとしたことです...しかし、2つはドン一緒にするとお互いが好きではないようです。

これは競合する rel タグと関係があると思います。ほとんどの場合、両方のスクリプトは正常に実行されているようです (エラーは見つかりません)。唯一の問題は、クリックしたときに画像が表示されないことです。画像が通常ある場所に黒いボックスしかありません (画像はありませんが、サイズは正しいようです)。

すべての images/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>

な

4

2 に答える 2

0

class imgを使用して CSS の一部を削除すると、うまくいきました。どうやら (そして明らかに、今では) 拡大された画像を覆うブラック ボックスは、私自身の CSS を介して配置されました。

于 2012-07-31T15:34:56.103 に答える
0

そのため、この投稿全体を読む時間はありませんでしたが、これはあなたが直面している問題に似たものをカバーしているようです. jQueryへの関数呼び出しの後にシャドウボックスを「再初期化」する必要があることを私は集めました。繰り返しますが、これが必要なものであるかどうかはわかりません。似ているように見え、受け入れられた詳細な回答があっただけです。

于 2012-07-30T19:21:11.093 に答える