6

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

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

これらのリンクのいずれかがクリックされるたびに、fancybox がポップアップするはずです。「 」タグまたはその他のタグに onclick 属性を使用すると思っていました<a hrefが、これを変更することはできますが、fancybox はどのように使用すればよいですか? 私はこれを試しましたが、何も起こりませんでした:

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

助けてくれてありがとう

4

7 に答える 7

7

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

列をなして：

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

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

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

iframe :

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

$('.menuitems').click(function () {
    $.fancybox({
        type: 'iframe',
        href: 'http://www.abc123.com'
    });
});
于 2012-10-17T13:22:34.857 に答える
7

そのようにしないでください。一意の ID を生成できない (または単に生成したくない) 場合は、代わりに CSS クラスを使用する必要があります。

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

と：

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

（使用ページから）。

于 2009-05-16T21:51:55.720 に答える
4

HTML:

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

JS コード:

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; 
}
于 2011-12-16T10:43:28.670 に答える
2

場合によっては、ページ内の複数の 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 が含まれていることを確認してください

于 2012-07-06T04:12:09.047 に答える
1

Ronald の回答により、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>
于 2014-03-12T15:47:44.143 に答える