2012-02-24 6 views
5

私は非常にユニークな状況があります。ここに私のシナリオがあります: ギャラリーにリンクしている4つのサムネイル+ 1つのメディアイメージ(最初のサムネイルと同じソースを指しています)。私は同じギャラリーを中画像でクリックして開きたいですが、 "rel"属性でそれらをリンクすると、最初の画像がループ内に2回あります(ループ内の5つの大きな画像)。外部リンク内の指定されたfancyboxギャラリーを呼び出す方法はありますか?そうすれば、私は中程度のイメージ上でクリック機能を引き金にかけることができ、ループ内に4つの大きな画像しか残さない。助けてください、私はこれのための解決策を見つけることができません。私はどうなるのか他のリンクとファンシーボックスのギャラリーを呼び出す

UPDATEここ

は私のhtml

<div class="details_gallery"> 
<a href="max/1.jpg" class="fancybox"><img src="mid/1.jpg" /></a> 
<div class="details_gallery_min"> 
    <a rel="details" href="max/1.jpg" class="fancybox"><img src="min/1.jpg" alt="" /></a> 
    <a rel="details" href="max/2.jpg" class="fancybox"><img src="min/2.jpg" alt="" /></a> 
    <a rel="details" href="max/3.jpg" class="fancybox"><img src="min/3.jpg" alt="" /></a> 
    <a rel="details" href="max/4.jpg" class="fancybox"><img src="min/4.jpg" alt="" /></a> 
</div> 
</div> 

である私は、 "半ば" 画像をクリックすると、 "詳細" のギャラリーをトリガーにしたい...

答えて

13

""のリンクを変更してギャラリーonclickをトリガするようにギャラリー自体の一部としては使わないでください:

<a href="max/1.jpg" onclick="$('a.fancybox').eq(0).trigger('click'); return false;"><img src="mid/1.jpg" alt="mid image" /></a> 

.eq()の方法では、ギャラリーが最初のイメージから確実に開始されます。それ以外の場合は、fancyboxにバインドされた最後の要素から開始します。あなたはギャラリーの別の要素から始めるように指定することもできます。

+0

これは私が必要としていたものです。ありがとうございました! – lokers

+0

これを正しい答えとしてマークすることを忘れないでください、ありがとう;) – JFK

+0

done:)ありがとう! – lokers

5
<div class="details_gallery"> 
<a href="#" class="manualfancybox">Manual Call Fancybox</a> 
<div class="details_gallery_min"> 
    <a rel="details" href="max/1.jpg" class="fancybox"><img src="min/1.jpg" alt="" /></a> 
    <a rel="details" href="max/2.jpg" class="fancybox"><img src="min/2.jpg" alt="" /></a> 
    <a rel="details" href="max/3.jpg" class="fancybox"><img src="min/3.jpg" alt="" /></a> 
    <a rel="details" href="max/4.jpg" class="fancybox"><img src="min/4.jpg" alt="" /></a> 
</div> 
</div> 

<script> 

$(document).ready(function(){ 
    $(".manualfancybox").click(function() { 
     var photos = new Array(); 

     $(".details_gallery_min a").each(function(){ 

      href = $(this).attr("href"); 
      title = $(this).attr("title"); 
      photos.push({'href': href, 'title': title})   

     }); 

     jQuery.fancybox(photos , 
      { 'transitionIn' : 'elastic', 
       'easingIn' : 'easeOutBack', 
       'transitionOut' : 'elastic', 
       'easingOut' : 'easeInBack', 
       'opacity' : false, 
       'titleShow' : true, 
       'titlePosition' : 'over', 
       'type'    : 'image',   
       'titleFromAlt' : true 
      } 
     ); 
    }); 
}); 

</script> 
関連する問題