Как добавить лайтбокс в ссылки на веб-страницы

0

Может ли кто-нибудь помочь мне показать всплывающее окно лайтбокса для ссылок, таких как ниже,

1) test1 2) test2 3) test3

Когда кто-то щелкнет ниже ссылок, он должен показать в лайтбоксе jquery вместо открытого в целевом пустом или перенаправлении в том же браузере.

  • 0
    Что вы пробовали?
  • 0
    Существует множество различных плагинов для ligthbox, просто google 'jquery lightbox', и большинство из них имеют хорошую документацию и просты в использовании.
Показать ещё 1 комментарий

2 ответа

1

Я думаю, что это сработает

<script type="text/javascript">
 $(document).ready(function() {
 $("a", ".rest-menuitem").click(
   function(event) {
    event.preventDefault();
    var elementURL = $(this).attr("href");
    $.colorbox({iframe: true, href: elementURL, innerWidth: 645, innerHeight: 509});
   });
 });
</script>

Установите innerWidth и innerHeight в соответствии с вашим контентом.

1

если вы используете плагин fancybox, это будет работать.

<a id="manual1" data-image="/example-full.jpg,/example-full-2.jpg'><img src="/example-thumb.png" alt="example" /></a>

<script type="text/javascript">
$('#manual1').click(function() {
    var data = $(this).data('images').split(','),
        options = {
            padding : 38,
            nextEffect : 'fade',
            prevEffect : 'fade',
            type: 'image'
        };
    $.fancybox.open(data , options );
})
 </script>

Скрипка: http://jsfiddle.net/voigtan/jJpAM/2/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню