CSS/JQueryでマスクされたギャラリーを作成する

Question

私はポートフォリオサイトで働いていますが、ギャラリーはCMSに固定されています。ここでは、すべての画像を上下に重ねて配置し、次にサムネイルを実際にマスクした部分を表示します。その上にマウスを置くと、他のすべての「マスクされた画像」の代わりに画像が表示されます - シンプルなフェードインがJQueryでフェードアウトします。ギャラリーはちょうど周り70x70pxかなり小さなここにそれが動作する方法の例だプレビューボックス（マスク）のシリーズのようなものです：、私は理由ので、これらの画像をマスクとのトラブルを抱えていると述べた

http://imgur.com/t3lJa

それはCMSによって実行されるので、マスクの実際の位置は同じにならないので、新しい画像がアップロードされるときにマスクが移動するようになります。私はCSSのクリッププロパティを使用しようとしましたが、それはオプションではなく1つの場所に配置する必要があります。私が固執しているアイデア：/

私はこれで作業しており、jQueryとCSSを組み合わせて使用​​する方法を見つけました。

http://haiderali.heliumhost.tk/site/

しかし、私はまだ私はマウスオーバー作業を取得することができないような問題を持っている：ここに私の進捗状況です。今すぐあなたが見ているのは、ギャラリーがホバー上をどのように見えるかです。私はテスト用に2つのイメージを設定しました。また、イメージsrc属性をすべて配列に集めるプログラムも設定しました。どのようにこの作品を得るための任意のアイデアですか？ここでは、コードです：

// Assign each link it's class by position on screen 
    var i = 0; 

    for (i = 0; i <= 71; i++) { 
     clipNum = i + 0; 
     $('#links').find('a').eq(i).addClass('clip' + clipNum); 
    } 

// Define all img>src attributes to an array 
    var SRC = new Array(71); 

    for (i = 0; i <= 71; i++) { 
     clipNum = i + 0; 
     SRC[i] = $('a.clip' + clipNum + ' > img').attr('src'); 
    } 

私は画像のsrc値を格納し、その他のすべてのソースを交換することにより、正常マウスオーバーを試みたが、私が唯一のように硬く、次のようにコーディングすることを行うことができました：

var imgSrc1 = $('a.clip1 > img').attr('src'); 
$('a.clip1').mouseenter(function() { 
    $('a.clip1 > img').attr({src: imgSrc1}); 

私の問題は、今私は:(これはループカウンタで動作するように得ることができないことを私は本当にいくつかの助けのように1が、それは私だけでこれを行うことができ、画面上のすべてのボックスのために動作させるためにしたい方法です

それぞれのボックスを別々にハードコーディングしているのは、72ボックス×2画像×72画像...それは大変だよ！

Answer 1

私は問題を理解することができた、それは私の鼻の下にあった。ホバー上のすべてのボックスに適切なイメージソースをポストして、イメージソースのセット配列を介して標準に戻すコードをループする簡単な.each（）ステートメントです。

私はこのコードをここに掲載していますので、興味を持っている可能性のある他の人が見ることができます。 （CSSと.clip1-以降設定クリッピング画像をグリッドに配置された）

HTML：

<div id="links"> 
    <a href="#nogo" class=""> 
    <img src="images/one.jpg" /> 
    </a>... 
    <a href="#nogo" class=""> 
    <img src="images/one.jpg" /> 
    </a> 
</div> 

のjQuery：

$(document).ready(function() { 
// Assign each link it's class by position on screen 
var i = 0; 

for (i = 0; i <= 71; i++) { 
    clipNum = i + 0; 
    // Add incremented clip class to each link 
    $('#links').find('a').eq(i).addClass('clip' + clipNum); 
} 

// Define all img>src attributes to an array 
var SRC = new Array(71); 

for (i = 0; i <= 71; i++) { 
    clipNum = i + 0; 
    SRC[i] = $('a.clip' + clipNum + ' > img').attr('src'); 
} 

// Set initial opacity of boxes 
$('#links a > img').fadeTo('fast', '0.8'); 

// Hover Magic!! 
$('#links a > img').hover(
    function() { 
     // store img>src under current link 
     var imgSrc = $(this).attr('src'); 
     // replace all img>src 
     $('#links a > img').attr({ src: imgSrc}); 
     $('#links a > img').fadeTo('slow', '1.0'); 
    }, 
    function() { 
     $.each(SRC , function(index, value) { 
      // replace img>src from array 
      $('#links a.clip' + index + ' > img').attr({ src: value}); 
     }); 
     // .stop() to make sure fadeIn() stops before fadeout() 
     $('#links a > img').stop(true,true).fadeTo('fast', '0.8'); 
    } 
); 
});