jquery .click関数を使用してfancyboxを呼び出す

Question

ページに表示されている4つのイメージのいずれかをクリックすると、fancyboxウィンドウに読み込まれるようにfancyboxをカスタマイズしようとしています。

これを行うには、jquery .attr関数を使用してイメージsrc（変数として）をメインイメージホルダーに渡します。

私の現在のjqueryのコードは次のとおりです。

jQuery(document).ready(function($) { 

     $("a.group").click(function() { 
      var image = $(this).attr("name");  
      $("#largeId").attr({ src: image}); 
      $("a.group").fancybox({ 
         'frameWidth':966, 
         'frameHeight': 547, 
         'hideOnContentClick': false, 
         'overlayOpacity': 0.85, 
         'callbackOnShow': function() { 
            $("#container ul#thumbnails li a").click(function(){ 
            var largePath = $(this).attr("title"); 
            $("#largeId").fadeOut("fast").hide(); 
            $("#largeId").attr({ src: largePath }); 
            $("#largeId").fadeIn("slow");return false; 
          }); 
         $("#container ul#thumbnails li a").click(function(){ 
         $('.active').removeClass('active'); 
         $(this).addClass("active"); 
          }); 
         } 
     }); 

    }); 
}); 

メインページ画像のためのHTMLは次のとおりです。Fancyboxウィンドウの

<ul id="images"> 

<li><a id="one_image" class="group" href="#hidden" title="images/1_large.jpg"><img src="Images/1.jpg" alt="MOMA NY #1" title="MOMA NY #1" /></a></li> 
<li><a class="group" href="#hidden" title="images/2_large.jpg"><img src="Images/2.jpg" alt="MOMA NY #2" title="MOMA NY #2" /></a></li> 
<li><a class="group" href="#hidden" title="images/3_large.jpg"><img src="Images/3.jpg" alt="MOMA NY #3" title="MOMA NY #3" /></a></li> 
<li><a class="group" href="#hidden" title="images/4_large.jpg"><img src="Images/4.jpg" alt="MOMA NY #4" title="MOMA NY #4" /></a></li> 

</ul> 

：

<div id="main_image"> 

<img id="largeId" src="" alt="" title="" /> 

</div> 

----- - EDIT ----------

ちょうどあなたが知っているように、これは主に私が最初にクリック機能を取り除くと機能し、ファンシーボックス内の機能はすべてうまく動作します。

Answer 1

私はそれが過度に複雑になっていると思います。

jQuery(document).ready(function($) { 
     $("a.group").fancybox({ 
       'frameWidth': 300, 
       'frameHeight': 300 
       }); 

    }); 

これは必要なすべてのjavascriptである必要があります。タイトルとグループをaタグに移動する必要があります。

<ul id="images"> 
    <li><a class="group" rel="group" href="images/2_large.jpg" title="MOMA NY #1"><img src="Images/3.jpg" alt="MOMA NY #1"/></a></li> 
    <li><a class="group" rel="group" href="images/1_large.jpg" title="MOMA NY #2" ><img src="Images/3.jpg" alt="MOMA NY #2"/></a></li> 
    <li><a class="group" rel="group" href="images/3_large.jpg" title="MOMA NY #3" ><img src="Images/3.jpg" alt="MOMA NY #3"/></a></li> 
    <li><a class="group" rel="group" href="images/4_large.jpg" title="MOMA NY #4" ><img src="Images/4.jpg" alt="MOMA NY #4"/></a></li> 
</ul> 

これはあなたが探していたものですか？

Answer 2

私は前にfancyboxを使ったことがないが、ちょうどあなたのコードを見てから、私はfancyboxを呼び出す行はこれに

$("a.group").fancybox({ 

から固定することが必要だと思います：

$(this).fancybox({ 

申し訳ありません、私はこれをテストしていない...しかし、私はあなたの問題だと思う。

Answer 3

クリックするとリンクの属性が必要になる場合があります。

//html: 
<a href="#popup" id="lnk_0">Create a new product w/ this image</a> 
<div style="display:none;"><div id="popup"><h1>This is popup text.</h1></div></div> 

//jquery: 
$("a[href='#popup']").fancybox({ 
    'onStart': function(selectedArray, selectedIndex, selectedOpts) 
    { 
    alert(selectedOpts.orig.attr('id')); 
    } 
}); 

Answer 4

注：これは古いスレッドですが、それは、ダブルクリックが必要になりますので、あなたが$（this）を使用しないでくださいクリックコールを使用している場合だけで明確にします。

$(function() { 
    $("myelement").click(function() { 
    $.fancybox(); 
    }); 
}); 

Answer 5

<a style="display: none;" href="#fancy-box" class="fancybox-inline" id="fancybox-trigger"></a> 



<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#fancybox-trigger").trigger('click'); 
    }); 
</script>