ColorBox — jQuery-плагин для создания Lightbox-эффекта

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Loading ... Loading ...

ColorBox — это настраиваемый jQuery-плагин для создания lightbox-эффекта. Внешний вид полностью настраивается через CSS, так что пользователь может полностью изменить стиль lightbox'а, чтобы он вписывался в общий дизайн проекта.

ColorBox поддерживает:

  • изображения
  • группы изображений
  • AJAX
  • inline— и iframe-контент

Подключение ColorBox'а полностью ненавязчиво и не требует внесения изменений в существующий HTML-код, а так же генерирует полностью валидный XHTML и CSS код.

colorbox-jquery-lightbox-plugin

Требования: jQuery 1.3+
демо-пример 1, демо-пример 2, демо-пример 3, демо-пример 4
ColorBox v1.1.4

Метки: ,

Суббота, 11 апреля 2009 JavaScript
You can follow any responses to this entry through the RSS 2.0 feed.

4 комментария к ColorBox — jQuery-плагин для создания Lightbox-эффекта

  • Wave:

    А не подскажешь, как отключить показ чего-либо, кроме картинок?

    В галерее в слое с классом gallery есть картинки и ссылки — подписи-метки. Так по клику на картинку получается хороший эффект, а при переходе на следующее-предыдущее изображение — вместо картинки в колорбоксовом попапе отображается страница метки. И вообще метки стало невозможно открывать кроме как в новом окне.

  • Vizor:

    код пожалуйста

  • Wave:

    Галереи? Банально

    <div class="gallery"><a href="…" rel="nofollow">Заголовок картинки</a><br />
    <a href="миниатюрка" rel="nofollow"><img src="полноразмерная"></a></div>

    И так несколько подряд, либо несколько картинок с подписями в одном диве.

    (По каким правилам тут можно постить hmtl, чтоб не резался?)

    И вызов такой:

    echo '
    $(document).ready(function(){
    	$("div.gallery a").colorbox({rel:"true",transition:"'.$options['effect'].'"'.$size.'});
    	$("a.lightbox").colorbox({transition:"'.$options['effect'].'"'.$size.'});
    	$("div.slideshow a").colorbox({rel:"true",transition:"'.$options['effect'].'"'.$size.',slideshow:"true",slideshowSpeed:"'.$options['slideshowspeed'].'"});
    });
    ';
  • Vizor:

    с помощью <pre>

    ну все правильно — куда стоит ссылка — то и открывает, и как раз <img src="..."> должен быть миниатюрой, а ссылка указывать — на полную версию

  • Ответить

    Апрель 2009
    Пн Вт Ср Чт Пт Сб Вс
    « Мар   Май »
     12345
    6789101112
    13141516171819
    20212223242526
    27282930