Подключение colorbox, lightbox

[Heidel]

Colorbox
Страница плагина http://www.jacklmoore.com/colorbox

1. Создать папку colorbox, в неё положить
-- colorbox.css
-- папку images (в ней лежат элементы оформления colobox'а)


2. В компоненте подключить

<sсript src='<?= $nc_core->SUB_FOLDER.$nc_core->HTTP_ROOT_PATH ?>require/js/jquery.colorbox-min.js' type='text/javasсript'></sсriрt>
<sсript>$(document).ready(function(){ $("a[rel='gallery']").colorbox({photo:true}); });</sсriрt>

!!! Должна быть подключена библиотека colorbox-min.js

!!! если брать фрагмент кода из компонента Фотогаллерея, то обязательно добавить в него {photo:true}

3. изображение положить в ссылку с атрибутом, совпадающим с атрибутом, заданном в функции rel='gallery'

<a href="<?= $f_Image1 ?>" rel='gallery'><img src="<?= $f_Image1 ?>" style="width: 120px; height:90px;" /></a>

Подключение Lightbox
Ссылка на обсуждение на форуме нетката линк

Подключение лайтбокс к странице
Ссылка на плагин http://lokeshdhakar.com/projects/lightbox2/

1. Подключить к странице стили и скрипты

<link href="/css/lightbox.css" rel="stylesheet">
<sсript src="/sсriрt/jquery-1.8.2.min.js"></sсriрt>
<sсript src="/sсriрt/lightbox.js"></sсriрt>

2. Положить изображение в ссылку

<a href="http://<a" rel="lightbox" target=_blank><img src="http://static.diary.ru/images/photo1.jpg" title="Изображение" width="169px;" height="112px;"></a>

К ссылке добавить атрибут rel="lightbox"

3. В папку с изображениями images скопировать нужные для плагина изображения loading.gif и др.

Прозрачность в ие7,8
При подключении к странице этого плагина лайтбокса в ие7,8 страница не затемняется, а становится полностью черной и непрозрачной.

Решение: нарисовать полупрозрачный .png и сделать его фоном для лайтбокса в активном состоянии.

css для IE7 b IE8

#lightboxOverlay {
 background: url(../images/overlay.png) repeat;
}

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

МЕГАВАЖНЫЙ АПДЕЙТ !!!
Для того, чтобы лайтбокс работал с jQuery 1.9 необходимо
в коде lightbox.js заменить

$("<div>", {
        id: 'lightboxOverlay'
      }).after($('<div/>', {
        id: 'lightbox'
      }).append($('<div/>', {
        "class": 'lb-outerContainer'
      }).append($('<div/>', {
        "class": 'lb-container'
      }).append($('<img/>', {
        "class": 'lb-image'
      }), $('<div/>', {
        "class": 'lb-nav'
      }).append($('<a/>', {
        "class": 'lb-prev'
      }), $('<a/>', {
        "class": 'lb-next'
      })), $('<div/>', {
        "class": 'lb-loader'
      }).append($('<a/>', {
        "class": 'lb-cancel'
      }).append($('<img/>', {
        src: this.options.fileLoadingImage
      }))))), $('<div/>', {
        "class": 'lb-dataContainer'
      }).append($('<div/>', {
        "class": 'lb-data'
      }).append($('<div/>', {
        "class": 'lb-details'
      }).append($('<span/>', {
        "class": 'lb-caption'
      }), $('<span/>', {
        "class": 'lb-number'
      })), $('<div/>', {
        "class": 'lb-closeContainer'
      }).append($('<a/>', {
        "class": 'lb-close'
      }).append($('<img/>', {
        src: this.options.fileCloseImage
      }))))))).appendTo($('body'));

на

$("<div id='lightboxOverlay'></div><div id='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' ><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'><img src='" + this.options.fileLoadingImage + "'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'><img src='" + this.options.fileCloseImage + "'></a></div></div></div></div>").appendTo($('body'));

ЛИНК https://github.com/lokesh/lightbox2/issues/29

Дополнение. Для того, чтобы крестик и подписи к картинкам находились над картинкой, необходимо в lightbox.js
написать

$("<div id='lightboxOverlay'></div><div id='lightbox'><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'><img src='" + this.options.fileCloseImage + "'></a></div></div></div><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' ><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'><img src='" + this.options.fileLoadingImage + "'></a></div></div></div></div>").appendTo($('body'));

но при этом при открытии лайтбокса картинка будет прыгать.

@темы: NetCat, Компоненты, Colorbox, Lightbox, jQuery, Ссылки