GalleryView - красивый плагин галереи на jQuery

Скидка на хостинг

Если Вам нужен качественный хостинг и Вы непротив сэкономить 10% на его покупке, то Вы можете воспользоваться моим специальным предложением по скидке на хостинг от компании Ютекс.

Узнать подробнее

Главная » Уроки » Рубрика jQuery

Метки урока: jquery, галерея, изображения

GalleryView - красивый плагин галереи на jQuery

GalleryView предлагает Вам гибкую, привлекательную галерею, которую легко внедрить в любой дизайн и просто модифицировать под Ваши потребности.

Демо версия данной галереи находится здесь. Скачать все файлы можно тут.

Внешний вид галереи

Все содержимое находится здесь. Можете вставлять сюда картинки для создания галерей или HTML для контента. Также можно использовать iframes и AJAX для просмотра страничек с других сайтов

Необязательный элемент, который позволяет предоставить больше информации о содержимом панели

Миниатюры всех панелей находятся здесь. При движении от панели к панели появляются дополнительные миниатюры

Вид миниатюры

Необязательный элемент, чтобы дать название каждой миниатюре. Если данная функция включена, названия берутся из атрибута 'title' каждой картинки

Установка и использование галереи

После скачивания архива (по ссылке в начале урока) у Вас уже будет готовый html файл, в котором Вы сможете увидеть данную галерею в действии. Для того, чтобы галерея работала без ошибок необходимо:

1) Подключить все необходимые javascript файлы и таблицу стилей (style.css) между тегами <head></head> (помните про правильный путь к файлам, если поменяете их месторасположение)

<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery-galleryview-1.0.1/jquery.galleryview-1.0.1-pack.js"></script>
    <script type="text/javascript" src="js/jquery-galleryview-1.0.1/jquery.timers-1.1.2.js"></script>

2) Также между тегами <head></head> подключить еще скрипт с параметрами галереи

<script type="text/javascript">
$(document).ready(function(){ 
$('#photos').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 38,
transition_speed: 1200,
background_color: '#222',
border: 'none',
easing: 'easeInOutBack',
pause_on_hover: true,
nav_theme: 'custom'
});
});
</script>

3) Также обязательным являются три структурных элемента галереи:

3.1 Непосредственно слой галереи "galleryview"

<div id="photos" class="galleryview">
...
</div>

3.2 Серия картинок <div class="panel"> с описанием путей и дополнительных полей

...
<div class="panel">
  <img src="img/01.jpg" /> 
  <div class="panel-overlay">
  <h2>Effet du soleil sur le paysage</h2>
  <p>Photo by <a href="http://www.sxc.hu/profile/tomharry" target="_blank">tomharry</a>.  View full-size photo <a href="http://www.sxc.hu/photo/158829" target="_blank">here</a>.</p>
  </div>
...

3.3 И неупорядоченый список картинок миниатюр

...
<ul class="filmstrip">
<li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
<li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li>
<li><img src="img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li>
<li><img src="img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" /></li>
<li><img src="img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li>
<li><img src="img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li>
<li><img src="img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li>
<li><img src="img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li>
</ul>

Вот и все! Галерея готова. Данный плагин очень функциональный, и на его основе будут подготовлены еще уроки по созданию красивых и полезных решений для Ваших сайтов. Следите за нашими уроками!

Данный урок подготовлен для Вас командой сайта http://ruseller.com
Источник урока: www.spaceforaname.com

Рейтинг: 0

Урок создан: 3.4.2009 Просмотров: 20515 Правила перепечатки

Оценивать уроки могут только зарегистрированные пользователи

Если хотите не упустить данный урок, добавьте его в закладки

Пять последних добавленных уроков в рубрике jQuery:

»Маленький плагин jQuery для автопрокрутки до верха страницы
В данном уроке рассмотрим плагин, который обеспечивает эффект элегантной прокрутки на верх страницы с помощью нескольких строк JavaScript.

»Как использовать виджет Autocomplete iQuery UI
В данном уроке мы рассмотрим один из новых компонентов jQuery UI 1.8 – виджет Autocomplete. Автозаполнение полей формы может быть очень полезной функцией для посетителей вашего сайта, так как она облегчает ввод информации. Такую функцию можно использовать, например, для поля, или при вводе страны, города, или чего либо подобного, что можно выбрать из общего списка. Виджет jQuery UI Autocomplete популярен у разработчиков, так как его легко использовать, он достаточно мощный и гибкий.

»Подсчет введеных символов с индикатором (jQuery)
В данном коротеньком уроке мы покажем как организовать подсчет введенных символов "на лету" с помощью jQuery. Это достаточно просто организовать с помощью нескольких строчек кода JavaScript. Такая функция, используемая на вашем сайте позволит улучшить интерфейс пользователя.

»Как использовать селекторы jQuery для выделения элементов страницы
Описание

»Делаем пользовательский проигрыватель для видео c YouTube на основе API YouTube
Мы собираемся сделать плагин jQuery, который будет использовать проигрыватель Chromeless YouTube, и создадим наш собственный минимальный набор элементов управления, который будет отлично интегрироваться с дизайном страницы. Набор управления будет включать кнопку старт/пауза/повторить и индикатор состояния с возможностью изменения положения.

Зарегистрируйтесь, чтобы иметь возможность добавлять комментарии

Комментарии:

Автор: Justtie (2010-07-18 15:14:16)

возникла ошибка при интеграцыи этой галереи в джумлу. Просто напросто не отображается она в опере, хотя в ФФ и ИЕ6-8 показуется, а в опере токо отоброжает бекграунд галерее.

Автор: yariiiko (2010-03-28 21:02:52)

хотелось бы изменить время, через которое будет переключаться фото. не подскажете, как бы это реализовать?

Автор: ole (2010-03-26 21:07:57)

Подскажите пожалуйста как изменить фрейм вокруг маленького изображения внизу, на панели "filmstrip" на голубой цвет. В папке "themes" есть gustom dark and light, они дают только черный и белый цвета. С файлами рointer, next and prev вопросов нет. А как изменить рамку?

Автор: ice (2010-03-19 10:57:11)

Ирина панель можно отредактировать файл jquery.galleryview-1.0.1-pack.js к примеру в самом низу файла цифра 70 она соответствует высоте overlay_height вот параметры которые там задаются: background: black none repeat scroll 0% 0%; position: absolute; z-index: 998; width: 390px; height: 70px; bottom: 0pt; left: 0pt; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; opacity: 0.6;"

Автор: Ирина (2010-02-21 15:43:57)

Подскажите пожалуйста, как убрать панель с текстом наезжающую на фотографию?

Автор: rondns (2009-12-11 17:26:51)

Как убрать панель с описанием????

Автор: rimiden (2009-12-04 14:10:58)

нескромный вопрос: какой смысл выкладывать здесь УПАКОВАННУЮ версию плагина, если даже на официальном сайте есть чистый и незашифрованный код?

Автор: Vetka (2009-11-25 17:09:17)

Ошибочка у вас - в блоке 3.2 не закрыт div class="panel". Если оставить так, как есть - работать не будет. И независимо от этой ошибки вопрос: скрипт не работает в файрфоксе 3.5.5. Ошибок в коде нет, всё по тысяче раз перепроверено. В остальных браузерах всё в порядке, проблема только в FF версии 3.5.5. Кто-нибудь еще сталкивался и находил решение? Caramelle, у вас вообще код неправильно написан. Откройте здешнюю демо и посмотрите ее код - каждая картинка должны быть заключена в отдельный div class="panel", а не все в один, и div class="panel-overlay" со всем содержимым тоже должен быть персональный для каждой картинки. Ну и кроме того вы повторили ошибку, напечатанную в примере - не закрыли div class="panel".

Автор: dorian (2009-10-09 01:58:18)

Как исправить баг в IE, тексты описания наезжают друг на друга в момент смены изображения?

Автор: ppiks (2009-08-28 21:31:59)

нашёл

Автор: ppiks (2009-08-28 21:20:01)

Как избавиться от :"Необязательный элемент, который позволяет предоставить больше информации о содержимом панели"?

Автор: Dramus (2009-07-20 14:13:00)

Здрасте, все получилось, только один вопрос как сделать чтобы панел мини картинок была справа и они перемещались сверху вниз???подскажите пожалуйста.....

Автор: Иван (2009-06-16 15:13:49)

Уважаемые!!! у кого не получается что либо сделать смотрите "демо" а именно их исходный код там много всего полезного написано=))

Автор: Галина (2009-05-06 16:09:07)

Олег! Если все у тебя получилось,то подскажи "чайникам!!!",что надо еще добавить...

Автор: Галина (2009-05-06 16:07:55)

У меня получилось тоже,что и у Caramelle !!!! Я начинаю учиться ,,,хотелось -бы примеры поточнее!!! Ведь сразу все так начинали...((

Автор: Caramelle (2009-04-28 13:52:21)

Если есть тут кто-нибудь добрый, помогите пожалуйста! Вот что у меня выходит.. http://www.honey-studio.ru/galery/portfolio.html

Автор: Caramelle (2009-04-28 13:30:35)

Я заметила тенденцию, Вы показываете все уроки, особо не вдаваясь в детали.. Очень обидно, потому что у меня еще ни один урок не получился :( Получается уже у опытных веб-дизайнеров, в новичков не хотят учить :'( Например тут, я сделала все так, как показано. Кстати, тут не сказано что вместо точек в 3.1 надо вставить 3.2 и 3.3 и только потом закрыть тег в 3.1 Хотя я например до этого не догадалась сразу. И после того, как я вставила все эти теги и у меня получается одна картинка большая, а под ней в столбик маленькие.. и ни о каком красивом плагине и речи быть не может((

Автор: ABCD (2009-04-27 07:21:05)

Автор: zhdanov (2009-04-13 23:54:33)

Подскажите, пожалуйста, как правильно совместить файлы .css. Основной файл сайта не уживается с файлом стилей галереи. Читал основные правила о css, но увы это не действует: <link href="gallery/style.css" rel="alternate stylesheet" title="gallery" /> <link href="style.css" rel="stylesheet" type="text/css" />

Автор: Reet (2009-04-06 11:56:15)

сорри туплю она и так автоматом переключается))))

Автор: Reet (2009-04-06 11:52:59)

Обращаюсь к команде руселера не подскажите а как сделать что б данная галерея автоматом переключалось с картинки на следующию с задержкой так сказать секунды 3-5 очень надо спасибо

Автор: Олег (2009-04-05 00:22:29)

Отлично все работает ! Уже поставил себе на страничку. Спасибо !

Автор: Валя (2009-04-04 10:27:36)

Спасибо! Очень вовремя!!!

Автор: kickerps (2009-04-03 16:56:15)

КЛЁВА!

Поиск по сайту

поиск

Блог на Wordpress

Если Вы давно мечтаете о создании собственного блога на движке Wordpress, то советую Вам обратить внимание на мой новый видеокурс "Wordpress - Профессиональный блог за один день". Это более 100 видеоуроков по всем аспектам создания и ведения своего блога на самом популярном движке в мире.

Узнать подробнее

Облако меток

timeline таймлайн временная шкала скрипт библиотека событие куки mvc массив xsl сервисы база данных cookie баннер тень mysql html5 центрирование joomla sql курсор css3 закладки oop wordpress часы пароль баги чат звезды ускорение twitter google maps html 5 прозрачность ie6 png seo gd library cookies rss рейтинг цитаты блог комментарии theme тема генератор captcha cycle z index позиционирование загрузка кеширование бегущая строка тест домен советы текст видео регистрация текстуры radikal.ru фото favicon слайдшоу карта лента загрузка файлов голосование опрос поля формы api чарты диаграммы mod rewrite календарь спрайты текстовое поле константа include защита multiple select htaccess выпадающие списки миниатюры сообщения чекбоксы новостной блок вкладки выезжающая панель форма шпаргалка обзоры таблица анимация верстка wysiwyg wysiwig cms faq уголок разное ссылки редакторы email mootools списки юзабилити модальные окна плагины web дизайн счетчик аудио flash ajax слайдер окна javascript html кодинг оптимизация шаблоны формы кнопка меню изображения фон подсказки css контактная форма php ротатор галерея jquery

Показать flash облако

Раскрутка

Меня часто спрашивают, как я раскручивал данный сайт?

Мой ответ таков. Для раскрутки данного сайта использовалась методика "Мастер план по раскрутке сайта", которая была предложена Юсуфом Губайдуллиным в начале 2009-го года.

Узнать подробнее

Ссылки от гугл