Подпишись на наши RSS Уроки по Фотошоп , просто щелкнув по иконке.


Новинка! Узнайте о Самом Результативном Способе Изучения Фотошопа, Без Посещения Дорогих Курсов, Без Черно-Белых Самоучителей и Без Метода Тыка!

10 Часов Практических Уроков Записанных с Экрана Монитора с Подробными Аудио-Комментариями сделают из Вас настоящего Учителя Фотошоп!

Подробнее..


Создаём новогоднюю поздравительную открытку
Создаём сложное выделение волос
Превращаем современную фотографию в старую
Создаём разноцветную светящуюся спираль
Наносим естественную татуировку в Фотошопе


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




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

Хотите освоить весь Фотошоп с нуля?

Рекомендую Вам курс "Учитель Фотошопа в видеоформате", который состоит из 2-х частей: теоретической и практической. Все уроки даны в видеоформате с подробным озвучиванием всех выполняемых действий. Именно такой подход в изучении, позволит Вам в максимально короткие сроки овладеть всеми аспектами работы в Фотошоп.

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

Рейтинг:     Добавлено: 2009-04-05    Просмотров: 1954    Сайт-источник: www.spaceforaname.com

Оцените урок: 1   2   3   4   5   6   7   8   9   10    



Комментарии (1)


Комментарий by Юлия, От 2010-03-06

Можно ли данную галерею сделать на сайте на cms Drupal? Если да, есть ли какие-либо особенности настройки? Может у вас есть примеры?

Оставить комментарий:

Ваше имя:

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

Введите число показаное на картинке (проверка от автороботов):

  


 

Рассылка - "Лучшие видеоуроки Фотошоп даром". Подписавшись на неё, Вы 2 раза в месяц будете получать на свой почтовый ящик, ссылки на лучшие уроки по работе в программе Adobe Photoshop совершенно бесплатно!

Лучшие уроки по Фотошопу 2 раза в месяц!

Ваше имя на русском: *
Ваш Email адрес: *

Подпишитесь сейчас и получите доступ к разделу "Лучшие уроки Фотошопа".


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

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


Существует быстрый способ изменения диаметра кисти. Чтобы уменьшить его, нажмите клавишу [ (открывающая квадратная скобка), а чтобы увеличить – ] (закрывающая квадратная скобка). Переключение цветов переднего и заднего пла- на производится нажати- ем клавиши X.

Узнать больше


Внимание!
X
Хотите Получать 2 Видеоурока по Работе В Программе Фотошоп ЕЖЕМЕСЯЧНО?
Ваш e-mail: *
Ваше имя: *