Как я могу использовать fancybox с помощью onclick?

Question

Я пытаюсь использовать JQuery и Fancybox. Вот как это должно быть использовано: http://fancy.klade.lv/howto

Однако я не могу сгенерировать много идентификаторов для "href" и не хочу готовить много экземпляров fancybox. Поэтому я хочу использовать один необычный экземпляр для множества гиперссылок, которые делают то же самое.

Всякий раз, когда щелкает какая-либо из этих ссылок, должна появиться fancybox. Я думал, что буду использовать атрибут onclick для тега "<a href" или любых других тегов, я могу изменить это, но как мне использовать fancybox? Я попробовал это, но ничего не подошло:

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

Спасибо за любую помощь

Answer 1

Это демонстрирует, как использовать 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'
    });
});

Iframe

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

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

Answer 2

Не делай так. Если вы не можете сгенерировать уникальные идентификаторы (или просто не хотите), вы должны делать это с помощью классов CSS:

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

с:

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

(со страницы их использования).

Answer 3

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

Answer 4

В случае, если вы хотите открыть содержимое нескольких делений на странице. т.е. часть этой же страницы в 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

Answer 5

Ответ Рональда дал мне строку #dialogContent в fancyBox v2.1.5. Попробуйте использовать:

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

Answer 6

В fancybox 3 это можно сделать с помощью следующего кода.

jQuery().fancybox({
    selector : 'your selector'
});