jQuery画像をクリックして部門を表示

Question

私は今、いくつかの製品画像を表示するために画像スライスショーに取り組んでいます。

まずサムネイルをいくつか表示し、サムネイルをクリックすると、別のdivに大きな画像が表示され、デフォルトでimg1の大きな画像が表示されます。

次に、ユーザーが大きな画像にカーソルを合わせると、カーソル画像が拡大鏡（zoomin.cur）に変わり、大きな画像をクリックすると別のdiv（class = "detailview-container-bg"隠されたdivには、小さなサムネイル画像が上に表示され、大きな画像が下の部分に表示され、img1がデフォルトディスプレイとして表示されます。

これまでのところ、最初のクリックでサムネイルをクリックすると大きな画像が表示され、カーソルの変更と2回目のクリックで隠れたdivが表示されます。2回目のクリックでjQueryを作成しましたが、エラーはなく、理由はわかりませんdivを表示しようとしていません

 $(function(){ 
      $('#primaryImageDisplay').on("click",function(){ 
       $('#productSlide').css({'display':'absolute'}); 
      }); 
     }) 

私はコードをJSFiddleで締め切りましたが、あなたに私にそれに関するいくつかのアイデアを教えてください。お時間をいただきありがとうございます...

Answer 1

表示には適切な値を使用します。 （例：ブロックhttp://learnlayout.com/display.html） 値の絶対値はcssプロパティ 'position'から取得されます

コードをデバッグすると、表示プロパティが絶対値で更新されないことがわかります。

Answer 2

これを自分でコードする必要がありますか？あなたのサイトでかなり高度なギャラリーを探しているようです。

http://lokeshdhakar.com/projects/lightbox2/をお勧めしますか？

これは素晴らしいツールです。私は多くのサイトでこれを使用しています。

Answer 3

jqueryのソースリンクを追加しました。これらのアクションはすべて、ある文書関数内で使用することができます。私は以下のサンプルを含んでいます。

CSSを変更する代わりに、show（）/ hide（）メソッドまたはslideToggle（）メソッドを使用することができます。それはより良い表示とデバイス間でより良い動作します。

$(document).ready(function(){ 
 
    $('#desktopThumb1').on("click",function(){ 
 
    $('#primaryImageDisplay').attr("src","img1.jpg");}); 
 

 
    $('#desktopThumb2').on("click",function(){  
 
    $('#primaryImageDisplay').attr("src","img2.jpeg");}); 
 

 
    $('#desktopThumb3').on("click",function(){   \t \t \t   
 
    $('#primaryImageDisplay').attr("src","img3.jpeg");}); 
 

 
    $('#desktopThumb4').on("click",function(){ 
 
    $('#primaryImageDisplay').attr("src","img4.jpeg");}); 
 

 
    $("#primaryImageDisplay").click(function(){ 
 
    $("#productSlide").slideToggle(); 
 
    }); 
 
});