3

ファンシーボックスをカスタマイズして、ページに表示されている4つの画像のいずれかをクリックすると、これがファンシーボックスウィンドウにロードされるようにしようとしています.

これを行うには、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 は次のとおりです。

    <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>

Fancybox ウィンドウの場合:

<div id="main_image">

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

</div>

- - - -編集 - - - - -

ご存知のように、これは、最初にクリック関数を取り除くとほとんど機能し、fancybox 呼び出し内の関数はすべて正常に動作します。

4

5 に答える 5

4

複雑になりすぎていると思います。

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

    });

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

<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>

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

于 2009-08-14T19:06:36.373 に答える
1

クリックされるリンクの属性が必要な場合に、これが役立つ場合があります。

//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'));
   }
});
于 2010-10-09T18:58:59.903 に答える
1

私はこれまでfancyboxを使用したことがありませんが、コードを見るだけで、fancyboxを呼び出す行を修正する必要があると思います

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

これに：

$(this).fancybox({

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

于 2009-08-15T20:43:08.997 に答える
0 
<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>
于 2015-08-26T07:45:54.283 に答える
0

注: これは古いスレッドですが、クリック呼び出しを使用するかどうかを明確にするために、ダブルクリックが必要になるため、$(this) を使用しないでください。

$(function() {
   $("myelement").click(function() {
    $.fancybox();
  });
});
于 2013-06-11T21:38:23.150 に答える