![]() |
---|
|
Фотогалерея на jQuery
Сегодня мы с вами научимся создавать галерею, которая называется "PrettyGallery" и основана на технологии jQuery. Пример работы данной фотогалереи вы сможете посмотреть здесь Итак, с чего начнем: Шаг 1. Подготовим фотографии для нашей галереи: миниатюры размером 60х60 px и оригинальные изображения произвольного размера (в моем случае это 800х600 px). Скачать уже готовые изображения можно здесь. Сохраним их в папку images в корне нашего сайта. Для удобства можно создать отдельно папки для больших картинок и миниатюр. Шаг 2. Распакуем в корень сайта файлы со скриптами, необходимыми для работы. Шаг 3. Вставим следующий код между тегами <head> </head>. Тем самым мы подключаем css-стили, отвечающие за внешний вид галереи, а также скрипты jquery, lightbox и prettyGallery, скачанные в предыдущем шаге. <link rel="stylesheet" href="scripts/styleGallery.css" type="text/css" media="screen" title="prettyDropdown main stylesheet" charset="UTF-8" /> Шаг 4. В том месте, в котором мы хотим видеть нашу галерею на странице, нужно вставить код: <ul class="gallery"><br> Как видим, галерея организована на основе списка, в котором можно изменить пути к картинкам (если вы скачали картинки из урока, то ничего изменять не нужно). Здесь вы можете добавить или уменьшить количество изображений, а также указать их названия в параметре alt="". Шаг 5. Заключительный! Перед закрывающим тегом </body> вставим код скрипта: <script type="text/javascript" charset="utf-8"> В последней строке этого скрипта можете настроить количество миниатюр, показываемых одновременно ("itemsPerPage:"); расположение панели навигации (параметр "navigations:" который может принимать значения 'top' или 'bottom', или 'both', т.е. либо сверху, либо снизу, либо одновременно и сверху, и снизу); а также скорость прокрутки (параметр "animationSpeed", который может принимать значения 'fast', 'normal', или 'slow', т.е. быстро, нормально или медленно). Вот и все! Можете использовать эту галерею на ваших веб-сайтах!
Если хотите не упустить данный урок, добавьте его в закладки:
Рейтинг: ![]()
Супер галерейка спасибо! http://compplace.net
Отличная наработка по галерее. Подскажите как расположить на одной странице html несколько таких галерей, каждая из которых сможет запускать фотографии из своей папки? Заранее благодарен.
Марк хороший вопрос )) Я ищу такую галерею уже довольно долго. Искал на флеш теперь ищу на JQuery пока что готового решения не нашел. Если что найдется дайте плизз ссылочку на djslon собака на mail.ru
Не приятный глюк это галереи заключается в том, что, при нажатии на Enter при увлечиченном изображении, галерею ведет себя просто не адекватно. Может и мелочь для кого-то, но мне не приятно!
Жопа галереи в том что нужно делать маленьки копии фото и вручную вписывать картинки в html
ну почему жопа?, сделай в цикле вывод картинок и всё Оставить комментарий: |
|
---|
|