Случайный альбом
KUBANA-2011
Некультурный отдых - KUBANA-2011
Изображений: 67
Косово поле-2011
Некультурный отдых - Косово поле-2011
Изображений: 214
Flash Point 2011
Некультурный отдых - Flash Point 2011
Изображений: 77
Меточки:
Нацарапано:  01.12.2009
Категория: Работа
Метки новости:
Что касается меня, то я любитель всяких свистелок и перделок на сайтах (ну если они не сильно рвут моск) соответственно такая беда как LightBox мне вполне симпотична. Одно время разрабы этого плагина выпилили оттуда поддержку всенародного Осла [toolfaq]IE6[/toolfaq], однако вскоре одумались, осла погладили между ушами, поддержку вернули. В целом, для тех кто умеет курить мануалы LightBox всем хорош и мил, правда традиционно используется только для изображений. А к примеру если у меня засвербило вонзить видео с YouTube или какой html в iframe? Тут конечно же приходит на помощь FancyBox, но LightBox мне как-то дороже, наверное что-то связанное с дедушкой Фрейдом Посему решено было осмотреться на тему Lightbox-оподобных виджетов.



Приникнем к корням - Lightbox собственной персоной - демо


Ежу понятно, что для получения такой неминучей красоты необходимо подключить к веб-странице библиотеку jquery-1.3.2.js, плагин jquery.lightbox.js и jquery.lightbox.css. Помни - [strike]Сила рыцаря джедай, это Сила Вселенной[/strike], что в папке images хранятся еще и изображения элементов управления, необходимые для работы плагина.
Подключаем плагин:
Квак!
<link type="text/css" href="js/jquery.lightbox.css" rel=" stylesheet" /><script src="js/jquery-1.3.2.js" type="text/ javascript"></script><script src="js/jquery.lightbox.js"  type="text/javascript"></script>


Теперь необходимо организовать галерею. Соответственно понадобятся фотки из которых собственно и будет состоять наша галерея - тумбнайлы (минатюрки) и соответствующие большие изображения.

Конструкция картинки-миниатюры являющейся ссылкой на большую картинку - такая:

Квак!
    <a rel="lightbox" href="images/large.jpg" title="Какой- то текст"><img src="images/small.jpg" /></a>


Тумбнайл засунут в тэг а, href которого направляет на большое изображение. В атрибуте rel содержится собственно ключ, благодаря которому появляется эфект красивого расширения миниатюры - lightbox. При клике по тумбнайлу в отдельном слое раскроется большое изображение. Если в атрибуте title тэга a будет какой то текст - он станет комментарием к открывшейся картинке.

Будем считать что с отдельным изображением в контексте Lightbox покончено, но настоящий джЫгит хочет привести к общему знаменателю группу картинок. Для этого вдупляем в следующий код:

Квак!
<a rel="lightbox-tour" href="images/large.jpg" title=" Какой-то текст"><img src="images/small.jpg" /></a>


К ключу lightbox мы просто привинтили произвольный суффикс, в этом примере -tour. Если юный падаван будет таким макаром прикручивать одинаковые суффиксы к изображениям одной группы, умный плагин [strike]используя Силу[/strike] автоматически сгруппирует изображения. Само собой, в таком случае, помимо комментариев, которые будут материализоваться из содержимого атрибута title, в слое большого изображения отрисуются элементы управления для навигации по нашей галерее.

Если по воле Аллаха нежелательно использовать rel, можно перетоптаться и без него. Забацать галерею простым jQuery-кодом Сила позволяет.

Квак!
$(function(){
  $('a.gallery').lightbox();
});


Ежели данный код объединить с нижеприведенной разметкой, то все элементы а, с классом gallery, внезапно обретут функциональность LightBox, и атрибут rel тут будет совершенно не нужен.

Квак!
<a class="gallery" href="images/large.jpg" title="Какой- то текст"><img src="images/small.jpg" /></a>


Перделка LightBox в своем арсенале имеет массу пользовательских настроек, при помощи которых можно рулить поведением плагина по умочанию. jQuery-плагины хавают подобные настройки в виде объекта, который передается методу в как аргумент. Однако в данном случае дело обстоит немного подругому - для настройки вызывается свой отдельный метод. Вот вам пример кода, что создаст галерею из картинок, которые заключены в тэг а с классом gallery и сообщит плагину некоторое количество настроек.

Квак!
$(function(){
  $("a.gallery").lightbox();
  $.Lightbox.construct({
    text: {
      image: "Фото",
      of: "из"
    },
    download_link: false,
    opacity: 0.5,
    show_linkback: false
  });
});


Кроме использования $.Lightbox.construct(); имеется еще одна возможность перекинуть настройки - в строке запроса. Например:

Квак!
<script src="js/jquery.lightbox.js? show_linkback=false&text.image=Фото&text.of=из" type="text/ javascript"></script>


ПРИМЕЧАНИЕ: В LightBox поддержка IE6 включена по умолчанию. Однако для Осла передача параметров имеет место только в строке запроса (вменяемые браузеры тоже не гнушаются таким способом). Есть мнение что если в IE6 рыпнутся использовать $.Lightbox.construct(); то плагин накрутит дулю и работать откажется.

Всякие опции [strike]свистелки[/strike], которые можно передать [strike]нашей перделке[/strike] LightBox.


  • show_linkback - по умолчанию true, кажет ссыль на сайт plugins.jquery.com в справа сверху. Делаем false, чтобы все поразились нашему уму и сообразительности.
  • show_helper_text - по умолчанию true, показывает крест на пузе - (Click to close) в справа сверху и всплывающие подсказочки (Hover to interact) когда курсор находится над этим текстом. Делаем false, нечего потому что на тексты с подсказками смотреть.
  • show_info - по умолчанию 'auto', кажет текст, который в title под открывшимся изображением только если курсор пролетает над картинкой. Соответственно чтобы всегда показывать тайтл - ставим true.
  • show_extended_info - по умолчанию 'auto', кажет дополнительную инфу типа (Image 1 of nn) когда указатель мыши находится над областью, где заветилась основная инфа (текст, содержащийся в атрибуте title). Дабы гордо показывать эту информацию независимо от того где находится курсор настоящие джЫгиты используют значение true.
  • download_link - по умолчанию true, разрешает распахнуть полноразмерное изображение в новом окне або вкладке браузера, гавкнув на ссылку, которая представляет из себя текст комментария к изображению (тот самый текст который содержится в атрибуте title). Чтобы пресечь подобные поползновения, передаем false.
  • auto_resize - по умолчанию true, изменяет размеры изображения, если оно не влазит в область просмотра. Соответственно false, если надо отменить это поведение.
  • ie6_support - по умолчанию true, включена поддержка IE6. ДжЫгиты передают false - надо переводить людей на нормальные браузеры.
  • ie6_upgrade - по умолчанию true, теоретически должно казать сообщение, взывающее к пользователям о том что IE6 - унылое говно. Почему-то не срабатывает в 90% случаев.
  • speed - количество миллисекунд, в течении которых произойдет переход между двумя изображениями. По умолчанию 400.
  • baseurl - по умолчанию null, однако можно указать url для автоматического подключения файлов, которые использует скрипт (стили, картинки).
  • files - объект, в свойствах коего можно передать местоположение нужных файлов (используется в том случае если названия файлов изменялись). Разрешены к использованию следующие свойства: js.lightbox, js.colorBlend, css.lightbox, images.prev, images.next, images.blank, images.loading.
  • text - объект, в свойствах которого можно передать текст частей интерфейса. ДжЫгитами используется для перевода на русский язык:-) разрешены к использованию свойства: image, of, close, closeInfo, download, help.close, help.interact, about.text, about.title, about.link.
  • keys - объект, определяющий "горячие клавиши" для навигации по галерее туда и сюда, а также для закрытия надоевшей галереи. Рекомендованные свойства close, prev, next.
  • opacity - прозрачность слоя, при просмотре изображений галереи. Значение от 0 до 1. По умолчанию используется 0.9.
  • padding - по умолчанию null, определяет отступы вокруг просматриваемой картинки.
  • rel - по умолчанию 'lightbox', определяет значение в атрибуте rel тега а, найдя который плагин автоматически делает галереи. не возбраняется предавать любое значение. Плагину пофих.
  • auto_relify - по умолчанию true, объясняет LightBox-у что надо бы на странице автоматически понаходить картинки с соотвествующими атрибутами и привести их в галерейный вид. Чтобы не умничал - значение false.


Выводы


  • Плюсы - милое сердцу оформление, большинство опций реально интересны.
  • Минусы - заморочки с настройкой плагина ежели приходится настраивать под IE6, достаточно туп и ограничен - не умеет работать ни с чем кроме изображений.


Галерея NFLightBox

По сравнению с обычным LightBox не имеет таких заморочек с настройкой под все основные браузеры, однако аналогично LightBox-у кажет только изображения. Однако данный экземпляр имеет возможность автоматической смены изображений - слайдшоу.

Зырим дему, ощущаем разницу с LightBox...

Подключается предельно просто:

Квак!
<link type="text/css" href="css/nf.lightbox.css" rel=" stylesheet" /><script src="js/jquery-1.3.2.min.js" type=" text/javascript"></script><script src="js/NFLightBox.js"  type="text/javascript"></script>


В башке html-файла HEAD надо ткнуть плагин носом в CSS-файл, файл библиотеки jQuery и собственно файл плагина. Разметка аналогична LightBox.

Квак!
<a href="images/large.jpg" title="Какой-то текст" ><img src="images/small.jpg" /></a>


Воздвигаем нашу галерею с помощью следующего jQuery-кода:

Квак!
$('a').lightBox({
  overlayBgColor: '#363',
  txtImage: 'Фото',
  txtOf: 'из',
  txtPrev: ' Назад',
  txtNext: ' Вперед',
  keyToClose: 'q',
  keyToPrev: 'z',
  keyToNext: 'c'
});


Плагинчик так же имеет нефиговое количество настроек. Демонстрация возможжностей некоторых из них показана в нарисованном выше коде. Годная, нужна опция - overlayBgColor - дает возможность менять цвет фонового слоя промеж открываемым изображением и веб-страницей которая оказывается под этим слоем. В LightBox для достижения аналогичного эфекта пришлось бы препарировать css-файл.

Собственно остановимся на настройках плагина подробнее:


  • overlayBgColor - по умолчанию #000 (черный), задает цвет фонового промежуточного слоя.
  • overlayOpacity - по умолчанию 0.8, декларирует прозрачностьфонового слоя. Значения соответственно от 0 до 1.
  • imageLoading, imageBtnPrev, imageBtnNext, imageBtnClose, imageBlank, imageBtnBottomPrev, imageBtnBottomNext, imageBtnPlay, imageBtnStop - вся эта шайка [strike]эстонских пидорасов[/strike] параметров отвечает за передачу путей к изображениям и свойствам элементов управления.
  • containerBorderSize - по умолчанию 10, задает толщину рамки вокруг просматриваемого изображения.
  • containerResizeSpeed - по умолчанию 500, время анимации перехода от одного кадра к другому.
  • txtImage, txtOf, txtPrev, txtNext - Есть кому не ясно? Ладно... Задав значения txtImage: 'Фото' и txtOf:'из' мегакодер будет видидеть не Image 1 of 8, а Фото 1 из 8 и очень этому радоваться.
  • keyToClose, keyToPrev, keyToNext - горячие клавиши управления просмотром.
  • slideShowTimer - по умолчанию 5000, время задержки изображения в слайд-шоу в милисекундах.


Далеко идущие выводы:

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


Мега-галерея PrettyPhoto

Чешутся руки накорябать - PrettyPhoto жжот! Feel the power of PrettyPhoto! и т.д. К нашей радости эта припарка может работать отнюдь не только с рисунками. Очень даже можно выводить в ней видео с YouTube, ролики .mov (Apple QuickTime), всякую шнягу во flash-формате и в принципе любое содержимое через iframe. А еще этот чудо-плагин имеет свой API, о чем LightBox-у и NFLightBox можно только мечтать в эротических снах.

Вдупляем в демку и как вводится - сечем отличия от других галерей.

В первых строках жизненно важно подключить файл библиотеки jquery-1.3.2.js, файл плагина jquery.prettyPhoto.js и файлик стилей плагина prettyPhoto.css.

Квак!
<link type="text/css" href="css/prettyPhoto.css" rel=" stylesheet" /><script src="js/jquery-1.3.2.min.js" type=" text/javascript"></script><script src="js/ jquery.prettyPhoto.js" type="text/javascript"></script>


Замут галерейки (или галереек) практически не отличим от анологичного действа в LightBox.

Квак!
<a rel="prettyPhoto[gallery_1]" href="max/1.jpg" title=" Фото номер 1"><img src="min/1.jpg" alt="Фото номер 1" /></a>


Тот же тумбнайлик заключенный в тэг а, атрибут href указывающий на большую картинку и т.д.. В атрибуте rel живет важное ключевое слово - prettyPhoto. Для того, чтобы сваять несколько разных галерей на странице, в атрибуте rel следует прописать - prettyPhoto[gallery_easy] для первой галереи, prettyPhoto[other_gallery] - для следующей и т.д....

Прибегнув к помощи jQuery-кода получаем галерею используя установки по умолчанию.

Квак!
$(function(){
  $("a[rel^='prettyPhoto']").prettyPhoto();
});


Настройки для prettyPhoto:


  • animationSpeed - по умолчанию 'normal'. Варианты - 'fast' и 'slow'. Отвечают за скорость анимации при переходе от одной картинки к другой.
  • padding - по умолчанию 40. Отбивает отступы вокруг картинки.
  • opacity - по умолчанию 0.80, прозрачность промежуточного слоя. Возможные значения от 0 до 1.
  • showTitle - по умолчанию true. Подпись (содержимое title тэга а), отображаемая слева вверху. Для отключения - false.
  • allowresize - по умолчанию true. Позволяет или запрещает масштабирование изображения, ежели оно не влезает в область просмотра в браузере. Можно вдарить по рукам скрипту сказав false.
  • counter_separator_label - по умолчанию '/'. Знак-разделитель в счетчике картинок.
  • theme - по умолчанию 'light_rounded'. Включает ту или иную тему оформления. Ага. Ведь может же если захочет! Помимо light_rounded есть варианты: dark_rounded, light_square, dark_square. Для упрямого IE6 насильно выбирается тема light_square. Потому что Осел.
  • hideflash - по умолчанию false. Ныкаеть с глаз долой flash-объекты на странице когда просматривается галерея, воизбежание того что флешь всегда любит сверху.
  • modal - по умолчанию false. Если будет true - то завершить просмотр галереи можно будет только нажатием на картинку 'close'. Загадочная опция, впрочем кто я такой чтобы судить.


Пара хороших, годных опций, в которых есть возможность задать callback-функции, которые вызываются при наступлении определенного события.
  • changepicturecallback - функция, заданная в этом параметре, будет вызываться постоянно при смене изображения галереи.
  • callback - функция, заданная в этом параметре, будет вызываться когда просмотр будет завершен


Ко всем крайне полезным функциям добрые разработчики дали нам, убогим, еще и четыре метода:

$.prettyPhoto.open('path/to/image','Title',' Description') - разрешает открыть целевую галерею.
$.prettyPhoto.changePage('next') - происходит переход к следующему изображению галереи.
$.prettyPhoto.changePage('previous') - происходит переход к предыдущему изображению галереи.
$.prettyPhoto.close() - закрыть галерею нахрен.

Неподдельный интерес и высунутый в азарте язык наверняка вызовет метод, с помощью которого можно распахнуть галерею. Посему смотрим демо. Код там понятен даже йожегам и эстонским волкам.

В целом данный плагин вполне может удовлетворить практически все потребности веб-мастеров. Однако и тут не без засады - нет слайд-шоу. Но, если взять в руки напильник и применить его по назначению можно дополнительно подключить плагин jquery.timers.js и пользуясь беспомощным положением функций changepicturecallback и callback с пролетарской ненавистью определим им функции. В файле html добавим select, где можно будет невозбранно выбирать значения задержки при смене картинок. Плод трудов праведных: смотрите демо, пытливые умы могут там же засмотреть исходник.

В changepicturecallback, используя разносторонние возможности плагина jQuery Timers, при каждой смене картинок постоянно запускаем одноразовый таймер значение которог получено из выбранной в селекте опции . Как только таймер срабатывает - колдуем метод $.prettyPhoto.changePage('next') бескомпромисно принуждая[toolfaq]БДСМ, доминирование :-)[/toolfaq] плагин казать нам следующее изображение. В опции callback задаем функцию останавливающую таймер, ежели нашелся гад который закрыл галерею до окончания картинок и при помощи alert плюем в него ядом.

Ну и напоследок - серьезный конкурент перечисленных выше плагинов - HighSlide JS правда построен он не на jquery посему подробно описывать ее не буду, но тем не менее...

Плюсы HighSlide JS:


  • Вполне себе на уровне красивое оформление без запарок с CSS;
  • До кучи пристенут файл Outlines.psd, можно при желании поизголяться над эффектами и рамками;
  • Кроссбраузерность жжот - она лучшая среди перечисленных галерей для набора Opera - IE - FF - Chrome;
  • Без проблем совместимо со многими jQuery-плагинами;
  • Можно создать интересные слайд-шоу с всплывающими панельками и прочими бирюльками для папуасов;
  • Можно воткнуть в галерею практически любые объекты содержащие html, iframe, swf и AJAX.
  • Простой как дверь синтаксис вызова; в HTML не надо добавлять ничего типа rel=’lightbox’, а подстраивать вывод на лету
    например, развернуть картинку
    Квак!
    $(”img.th”).click(function() );
    или html-блок: $(”#sh”).click(function() )});
    ;


Но бабе Яге эта хрень норвежская не нравится - потому что надоела уже хуже горькой редьки


Для любителей припасть к истокам - припадайте:



Звиздец рекомендует поделиться ссылкой с камрадами и откомментить эту заметку:
для печатиПечатай!  
 
ZviZdeZ.ru
Придет серенький Фенрир и укусит нас за мир

2009-2011©