Улучшаем AJAX галерею jQuery Lightbox (часть 1) – добавляем поля заголовка и даты

« Предыдущая запись
 
  Следующая запись »
 

kbpen thumb Улучшаем AJAX галерею jQuery Lightbox (часть 1)   добавляем поля заголовка и даты Все знают данный плагин для jQuery как один из лучших и популярных скриптов галереи. Он всем хорош, приятен, работает на ура, кроссбраузерен (за исключением маленького бага с затемнением фона в Opera 10).

Однако как-то раз пришлось задуматься над тем, как же ему всё таки добавить для изображений заголовок и даты, которые бы отличались внешне и не зависели от поля с описанием как такового. Решение пришло, посему делюсь (конечно, уже давненько, но это не меняет суть; привер использования можно посмотреть на сайте www.asunaro.ru). Я не буду описывать как встраивать галерею в сайт, думаю, это итак понятно из примеров, плюс ко всему, по этоё теме написано много статей. Поговорим только об изменениях.

Для начала внесём изменения в html-код. Теперь одна "нода" галереи будет выглядеть следующим образом.

<li>
<a href="photos/image3.jpg" rev='Название изображения' rel='23.03.2010' title="Дефолтовое описание из плагина">
  <img src="photos/thumb_image3.jpg" width="72" height="72" alt="">
</a>
</li>

Добавляем ссылкам два атрибута, rel и rev. Первый используется для названия изображения, второй для даты. Минус только в том, что если вы надумаете прописать ссылкам nofollow, чтобы индексация не проводилась, то не выйдет, т.к. атрибут занят. Хотя можно использовать вместо него какой-нибудь другой атрибут, вот только на его валидность нужно будет провести проверку.

Вносим изменения в jQuery Lightbox

На самом деле работа не особо сложная и делается в три шага. Открываем полный файл скрипта и…

  1. Находим 77 и 81 строки, принадлежащие функции _start. 77 строка выглядит следующим образом:
    settings.imageArray.push(new Array(objClicked.getAttribute('href'),
    objClicked.getAttribute('title')));
    Эта строка отвечает за то, какие атрибуты ссылки будут использованы. Нам нужно ещё два атрибута - rev и rel, их и добавим. Заменяем строку на:
    settings.imageArray.push(new Array(objClicked.getAttribute('href'),objClicked.getAttribute
    ('title'),objClicked.getAttribute('rev'),objClicked.getAttribute('rel')));
    В 81 строке дела обстоят аналогичным образом. Выглядит она так.
    settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),
    jQueryMatchedObj[i].getAttribute('title')));
    А заменить её надо на
    settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),
    jQueryMatchedObj[i].getAttribute('title'),jQueryMatchedObj[i].
    getAttribute('rev'),jQueryMatchedObj[i].getAttribute('rel')));
  2. Изменяем 128 строку, принадлежащую функции _set_interface(). Именно здесь расположен html-код вывода окна изображений. В представленном чуть ниже листинге можно увидеть его форматированный вид - он чисто для ознакомления, для лучшего понимания. Цветом выделены исправления и добавления.
    <div id="jquery-overlay"></div>
    <div id="jquery-lightbox">
      <div id="lightbox-container-image-box">
        <div id="lightbox-container-image">
          <div id="lightbox-naname"></div>
          <img id="lightbox-image">
          <div style="" id="lightbox-nav">
            <a href="#" id="lightbox-nav-btnPrev"></a>
            <a href="#" id="lightbox-nav-btnNext"></a>
          </div>
          <div id="lightbox-loading">
            <a href="#" id="lightbox-loading-link">
              <img src="' + settings.imageLoading + '">
            </a>
          </div>
        </div>
      </div>
      <div id="lightbox-container-image-data-box">
        <div id="lightbox-container-image-data">
          <div id="lightbox-image-details">
            <div id="lightbox-image-details-date"></div>
            <div id="lightbox-image-details-caption"></div>
            <span id="lightbox-image-details-currentNumber"></span>
          </div>
          <div id="lightbox-secNav">
            <a href="#" id="lightbox-secNav-btnClose">
              <img src="' + settings.imageBtnClose + '">
            </a>
          </div>
        </div>
      </div>
    </div>
    Итак, пятая строка листинга. Добавляем контейнер с идентификатором lightbox-naname. Несложно догадаться, что он будет содержать название изображения. Его отличительной особенностью является то, что  он размещается непосредственно перед выводимой картинкой, то есть над ней. В связи с этим связаны некоторые трудности в правках цсс, однако и они преодолимы. Тем не менее лучше всего название вставлять в предлагаемый ниже участок.
    Строка 21. Добавляем контейнер с идентификатором lightbox-image-details-date - в нём будет содержаться дата изображения. В 22 строке, которая создана для вывода описания изображения, изменён тег span на div.
  3. Двигаемся по ходу скрипта далее до строк 228-250. Здесь мы будем изменять две функции: _show_image, отвечающую за вывод картинки, и _show_image_data, отвечающую за вывод информации к картинке. Казалось бы первую изменять не надо, зачем нам изменять картинку? А вот надо, т.к. заголовок картинки будет над ней, то есть и относиться он будет к блоку картинки.
    Итак, первая функция. После строки _set_navigation(); дописываем следующее:
    if ( settings.imageArray[settings.activeImage][2] ) {
        $('#lightbox-naname').html(settings.imageArray[settings.activeImage][2]).show();
    }
    То есть мы созданному нами диву приклеиваем из массива данных название.
    А во второй функции изменений чуть больше. После строки $('#lightbox-image-details-caption').hide(); прописываем следующее (в принципе по аналогии с блоком, выводящим инфу по картинке - строки тут же):
    $('#lightbox-image-details-date').hide();
    if ( settings.imageArray[settings.activeImage][3] ) {
      $('#lightbox-image-details-date').html(settings.imageArray[settings.activeImage][3]).show();
    }

Теперь запускаем наш пример и видим… И видим, что всё бы ничего, если бы заголовку не было столь ущербно с местом. Но дело легко поправимо. Делается всё с помощью пары добавлений в CSS файле скрипта:

  • находим правило #lightbox-container-image-box и смело дописываем ему padding: 20px 0 5px 0; . Это увеличит размер шапки изображения.
  • добавляем класс #lightbox-image и прописываем ему padding-top: 5px;
  • добавляем класс #lightbox-naname, класс того самого контейнера с названием изображения. Самое главное в нём указать: margin: -5px 0 5px 0;. По левому и правому краю ничего не надо указывать, а вот значения верхнего и нижнего края должны быть противоположные: если верхний -10, то нижний будет 10. При этом верхний край всегда отрицателен. Понятное дело - мы просто поднимаем контейнер с надписью выше.

 

Вот и всё, что я хотел сегодня рассказать. Примеры вы можете посмотреть по ссылкам. По первой ссылке вы найдёте классический пример работы jQuery Lightbox, по второй ссылке - изменённый вариант. По ссылке "Скачать" вы можете забрать архив с примерами. Там вы найдёте все скрипты. Изменения, описанные в данной статье, уже включены в соответствующих файлах - скрипт доступен в несжатом виде (с комментариями и разметкой) и в уменьшенном варианте (без комментариев и без разметки).

 

UPD: Обнаружил один недостаток. При смене изображения заголовок картинки не исчезает, а остаётся и изменяется только после того как загрузится следующая картинка. При этом если заголовок картинки не указан, то над новой картинкой будет старый заголовок. Дело исправляется очень просто. В функции _set_image_to_view в строках 181 и 184 допишите в список идентификаторов тег #lightbox-naname и всё будет в шоколаде. Если вы ещё хотите, чтобы заголовок всплывал, а не моментально появлялся, то в добавленной наме 235 строке замените функцию show() на fadeIn(). Правда при плавном появлении шрифт немного косо отображается в некоторых браузерах, поэтому ставит этот параметр только при особом желании.

 

 

Ссылки по теме

, , ,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 1, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 12 на запись

"Улучшаем AJAX галерею jQuery Lightbox (часть 1) – добавляем поля заголовка и даты"

  1. Александр, спасибо за статью.
    p.s. такой вопрос: а Вы решали вопрос подгонки фото под размер окна браузера?

  2. Пожалуйста =)
    Для этого есть специальная опция auto_resize, которая принимает значение true или false. Она по умолчанию стоит в true, но вот что-то не работала. Надо попробовать в false поставить, а может с другими версиями jQuery пробовать.
    Если не поможет, то в принципе можно попробовать написать небольшой хак, но на это нужно время.

  3. хм. За ответ, конечно, спасибо. Но в принципе я искал это параметр. Но не обнаружил :(
    Не ткнете носом где она должна быть в каком файле?

  4. вообще за ресайз отвечает функция _resize_container_image_box в плагине. но она вроде как ориентирована только на внешний бокс изображения. в принципе, если изменить функцию, то через неё можно ресайзнуть не только сам бокс, но и изображение (через его идентификатор – lightbox-image).

  5. ясно. спс. попробую.

  6. Александр Шуйский
    23/03/2010 at 15:53 Постоянная ссылка Цитировать

    будет время, я тоже повожусь, если что, статьёй опубликую. так что следите за обновлениями

  7. этот вариант был бы Супер! :)
    Потому что пока не могу похвастаться такими знаниями, чтобы решить данный вопрос на 100%

  8. хорошо, тогда постараюсь что-нибудь придумать =)

  9. Спасибо. Буду ждать :)
    И не я один. Насколько помню, в начале Вашего блога данный вопрос уже поднимался.

  10. хм, действительно, но его мельком задали без последующих ответов и я не обратил на него внимания.
    ну ладно, тогда будем решать =)

  11. Лучше бы баг фона с оперой 10 попытались решить

  12. Проблема легко решается! в функции objImagePreloader.onload=function() ищите поиском

    var wsc = document.body.clientWidth;
    var hsc = document.body.clientHeight;
    wsc = wsc – 40;
    hsc = hsc – 100;
    if (objImagePreloader.width > wsc) {
    while (objImagePreloader.width > wsc) {
    objImagePreloader.width = Math.ceil(objImagePreloader.width – (objImagePreloader.width * 0.01));
    objImagePreloader.height = Math.ceil(objImagePreloader.height – (objImagePreloader.height * 0.01));
    }
    }
    if (objImagePreloader.height > hsc) {
    while (objImagePreloader.height > hsc) {
    objImagePreloader.width = Math.ceil(objImagePreloader.width – (objImagePreloader.width * 0.01));
    objImagePreloader.height = Math.ceil(objImagePreloader.height – (objImagePreloader.height * 0.01))
    }
    }

    Давно писал и тут типо пропорционально уменьшается размер. но сейчас сам CSS умеет пропорционально уменьшать! так что вы можете тупо от objImagePreloader отнять N количество width или height

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии