onclick を使用して fancybox を使用するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/873378

  •  22-08-2019
  •  | 
  •  

質問

JQueryとFancyboxを利用しようとしています。使用方法は次のとおりです。 http://fancy.klade.lv/howto

ただし、「a href」に対して多くの ID を生成することはできず、fancybox のインスタンスを多く用意したくありません。したがって、同じことを行う多くのハイパーリンクに対して 1 つのファンシー ボックス インスタンスを使用できるようにしたいと考えています。

これらのリンクのいずれかがクリックされると、ファンシーボックスがポップアップ表示されます。onclick 属性を「<a href" タグやその他のタグは変更できますが、ファンシーボックスはどのように使用すればよいですか?これを試してみましたが、何も起こりませんでした:

<a href="#not-working" onclick="fancybox(hideOnContentClick);">Not Working?</a>

助けてくれてありがとう

役に立ちましたか？

解決

そのようにしないでください。あなたはユニークなIDを生成することができない（あるいは単にしたくない）場合は、代わりにCSSクラスでそれをやるべきます：

<a href="image.jpg" class="fancy"><img src="image_thumbnail.jpg"></a>

と

$(function() {
  $("a.fancy").fancybox({
    'zoomSpeedIn': 300,
    'zoomSpeedOut': 300,
    'overlayShow': false
  }); 
});

（その使用のページから）。

他のヒント

これは、fancybox (1.3.4) を必要とせずに使用する方法を示しています。 <a href> fancybox を直接呼び出して要素をリンクします。

列をなして：

<div id="menuitem" class="menuitems"></div>

<div style="display:none;">
    <div id="dialogContent">
    </div>
</div>

$('.menuitems').click(function() {
    $.fancybox({
        type: 'inline',
        content: '#dialogContent'
    });
});

インラインフレーム:

<div id="menuitem" class="menuitems"></div>

$('.menuitems').click(function () {
    $.fancybox({
        type: 'iframe',
        href: 'http://www.abc123.com'
    });
});

HTMLます：

<a href="http://domain.com/bigimage.jpg" onclick="return fancybox(this);><img scr="http://domain.com/smallimage.jpg" /></a>

JSCodeます：

function fancybox(elem) {
elem = $(elem);
if (!elem.data("fancybox")) {
    elem.data("fancybox", true);
    elem.fancybox({
        'overlayColor' : '#000',
        'overlayOpacity' : 0.5
    });
    elem.fancybox().trigger('click');
}
return false; 
}

の場合には、ページ内の複数のdivの内容を開きたいです。すなわちfancybox内の同じページの一部には、次のコードでそれを行うことができます：

<a href="#show-in-fancy1" class="popup">open_fancy1</a>
<a href="#show-in-fancy2" class="popup">open_fancy2</a>
<div style="display:none">
  <div id="show-in-fancy1">
    this content is shown in fancybox.
  </div>
  <div id="show-in-fancy2">
    this content is shown in fancybox.
  </div>
</div>
<script>
  $(document).ready(function(){
    $('.popup').fancybox({
          'zoomSpeedIn': 300,
          'zoomSpeedOut': 300,
          'overlayShow': false
      });
  });
</script>

注：あなたが含まれていることを確認しfancybox.jsを行います。

ロナルドの答えは私にfancyBoxのv2.1.5内の文字列#dialogContentコンテンツを与えました。使用してみてください。

<div id="item"></div>

<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

<script type="text/javascript">
jQuery(document).ready(function() {
 jQuery("#item").fancybox({
       type: 'inline',
       content: jQuery('#data').html()
   });

});
</script>

fancybox 3においては、次のコードを使用して行うことができます。

jQuery().fancybox({
    selector : 'your selector'
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top