Как создать фотопанель для сайта с помощью jQuery RUDEBOXВы бы хотели создать панель для сайта которая будет содержать фотографии, но при этом панель будет скрыта. Это весьма удобно, ведь визуальное оформления ресурса не загромождается, а это, безусловно, плюс для сайта. Ведь множество информации на сайте приводит к плохой организации ресурса, и посетитель попросту не хочет находится на такой помойке, а не сайте. В данном уроке мы рассмотрим нечто необычный подход к организации галереи, а именно создания фотопанели для сайта с помощью jQuery и замечательного ресурса Flickr.

Для нашей демонстрации мы использовали удивительные фотоработы от tibchris. И так, давайте приступим.

Шаг 1. HTML

HTML состоит из одного главной оболочки для всей фотопанели. Внутри мы будем иметь div для изображений и div для фотопанели с оболочкой альбома эскизов и оболочки миниатюр.

Как вы можете видеть, многие элементы будут скрыты в начале. В функции JavaScript мы будем управлять видимостью и внешним видом этих элементов.

Как создать фотопанель для сайта с помощью jQuery RUDEBOX

Шаг 2. CSS

Так как мы хотим? чтобы фотопанель работала на всех страницах сайта, мы добавим большинство элементов в фиксированном положении. Если вы столкнетесь с некоторыми проблемами относительно других элементов на веб-сайте, которые находятся в этой галерее, вы можете настроить z-indexes.

Итак, давайте определим некоторые общие стили.

DIV photobar будет иметь следующий стиль.

Стиль предыдущей и следующей стрелки будет выглядеть следующим образом.

Оболочка для миниатюр будет иметь следующий стиль.

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

Мы зададим для альбомов и наборов миниатюр темную рамку и установим для изображений миниатюр границу.

Нам необходимо показать описание для миниатюр — когда мы наведите курсор мыши на изображение.

Рукоятки для фотопанели будут иметь следующий стиль.

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

Фотопанель остается в неизменном положении когда пользователь прокручивает страницу, она всегда остается в видимой части страницы.

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

Теперь необходимо добавить кнопку закрытия при просмотре изображения.

Следующий и предыдущий элементы управления будут иметь следующие стили.

Со стилями закончили, давайте перейдем к следующему шагу.

Шаг 3. JavaScript

Давайте начнем c общего выполнения сценария, где мы должны определить несколько переменных, кроме этого вы должны зарегистрироваться Flickr Services website. И получить ваши API коды.

Следующая функция для загрузки фотографий определенного набора, который выбрали на сайте.

Теперь нам нужна функция, которая загружает большие изображения.

Мы рассмотрели основные функции, детально можно потрогать все файлы в исходниках.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.