FancyBoxサムネイルヘルパーはサムネイルを直接呼び出すのではなく、サムネイルの最後に作成します

Question

36イメージのギャラリーにFancyBoxを使用しようとしていますが、FancyBoxをトリガーするイメージをクリックするたびにサムネイルヘルパーは2物事：

1）私はギャラリーのサムネイルの最後にクリックされた画像の余分なサムネイルをロードするには、

2）サムネイルヘルパーはクリックされた画像のサムネイルには行きません。代わりに、ギャラリーの最後に作った画像の新しいサムネイルに移動します。ここ

は、私がこれまで持っているものへのリンクです： http://lalalichan.com/temp/process_test6.html

一番下で、あなたは、表示領域に画像をトリガーサムネイルが表示されます。その表示領域に表示される画像は、FancyBoxをトリガーするリンクです。

それ以外のものはすべて想定どおりに動作しています。私は私のイメージの間を移動することができます、私はFancyBoxから閉じることができます、そして、私が望むサムネイルをクリックすると、対応するイメージが表示されます。

これは他の点ではスムーズな機能を実現しているだけの厄介なことです。

ご協力いただければ幸いです。事前に感謝します。

Answer 1

あなたは、このスクリプトを

<a class="fancybox" href="{target}" .... etc 

ようfancyboxにバインドセレクタと同じクラスで

$('.fancybox').fancybox({}); 

と6のリンクを持っているので、もしFancyboxがそれにバインドされたクラスを使用して、各リンクのサムネイルを生成します

fancyboxは6つのサムネイルを生成します...これまでのところとても良いです。

あなたのケースでは、（デモ）ページを読み込むときに、class="fancybox"の6つの（非表示の）リンクがあります。また、あなたは大きなサムネイル

<div style="width: 820px; height: 546px;" id="content"></div> 

を表示していますが、ページの下部にある（非fancybox）のいずれかのサムネイルをクリックすると、id="content"とコンテナが移入された空の容器（id="content"）がありますの7番目のリンクで、クリックしたサムネイルに応じて元のリンクを複製します。この操作の後で、ファンシーボックスに7つのサムネイルが生成されます。

このリンクはファイルの最後に追加されるため、ギャラリーの最後にも配置されます。

あなたは別のプラグイン（thumbnailScroller）を使用していますが、これは余分な要素をDOMに追加していると思います。

EDIT：新しい質問は尋ねた：私はまだ完全にスクロールサムネイルをクリックすると、第七リンクと#content divのを移入する方法を理解していない

。スクロール機能のすべての機能を維持しながら、どうやってそれをやめることができますか？

あなたのコードにはちょっとした調整が必要です。まず、あなたのfancyboxカスタムスクリプトを複製しています...あなたは一度それを必要とします。次に、jquery.fancybox.jsまたはjquery.fancybox.pack.jsのいずれかをロードするだけで、両方をロードする必要はありません。私はどうなるのかあなたが求める機能について

は、次のとおりです。

1：DIVのID = "コンテンツ"
2にDIVのID = "ロード" から隠されたリンクを移動：

にCSSを変更します

#content a { 
position:absolute; 
visibility: hidden; 
} 

3：この

に

$(function(){ 
     $('.image').live('click',function(){ 
      var href = $(this).attr('href'); 
       if ($('#content').is(':visible')) { 
        $('#content').css('visibility','hidden'); 
        } 
       $('#content').load('#load #'+href,function(){ 
        $('#content').css('visibility','visible').hide().fadeIn('3000'); 
       }); 
     }); 
     return true; 
}) 

このスクリプトを変更しますサムネイルがDIV内のリンクと同じ順番であると仮定して、id="content"とすると、

$(function(){ 
     $('.image').each(function(i){ 
      $(this).bind('click', function(){ 
       $("#content a").css('visibility','hidden').eq(i).css('visibility','visible').hide().fadeIn('3000'); 
      }); // bind 
     }); // each 
     return false; 
}); 

となります。

私は、コードをテストしていませんが、それはかなりトリックを行うだろう何

EDIT：

： はコードがいくつかのCSSへの変更とJS

新しいCSSを改善

new js：最初の大きなサムネイルをページに表示する

$(function(){ 
$("#content a").eq(0).show(); 
$('.image').each(function(i){ 
    $(this).bind('click', function(){ 
    $("#content a").hide().eq(i).fadeIn('3000'); 
    }); // bind 
}); // each 
return false; 
}); 

私はインラインスタイル（style属性を使用）を追加しません。代わりにスタイルシートを使用します。