4 319 Скрипты / Lightbox

Lightbox Plus - превью картинок

Lightbox Plus - превью картинок

Лайтбокс (lightbox) очень здоровский скрипт для отображения изображений на странице. В этом уроке будет рассмотрен изменненый скрипт на базе лайтбокса. Особенности:  изображение можно расширить, если изображение больше текущего размера окна браузера, размер изображения автоматически подгоняется под размер окна, можно наложить на изображение другую картинку (например, new - новинка), изображение можно увеличить с помощью колесика мышки и его можно перетаскивать.

Скрипт может использоваться также, как и Lightbox JS.
Для использования нужно добавить атрибут rel="lightbox" к любой ссылке.

JS

В шапке подключаем скрипт:
<script type="text/jаvascript" src="resource/lightbox_plus_min.js"></script>
Внутри него определены используемые изображения для оформления картинок. Их можно изменить и поместить в другой каталог.
addEvent(window,"load",function() {
    var lightbox = new LightBox({
        loadingimg:'loading.gif',
        expandimg:'expand.gif',
        shrinkimg:'shrink.gif',
        blankimg:'blank.gif',
        previmg:'prev.gif',
        nextimg:'next.gif',
        closeimg:'close.gif',
        effectimg:'zzoop.gif',
        effectpos:{x:-20,y:-20},
        effectclass:'effectable',
        resizable:true,
        animation:true
    });
});
effectimg указывает на адрес накладываемого изображения
effectpos определяет положение накладываемого изображения
effectclass - это класс, к которому будет применено это изображение.
Если класс не назначен, а effectimg заполнен, то изображение накладывается на все картинки к которым применен Lightbox.
В Демо это будет изображение New (Новинка).

Пример:

<a href="file/sky.jpg" rel="lightbox1" class="effectable">
    <img src="tiny/1.jpg" alt="Пример 2" title="Пример 2" />
</a>
Скачать 2048Загрузок 1,07 Mb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи