Министерство по развитию информационных технологий и коммуникаций республики узбекистан нукусский филиал ташкентского университета информационных технологий

2. Создание фотогалереи.

2.1. Создаем html разметку.

Теперь давайте посмотрим (на официальном сайте jquery UI раздел Demos&Documentation пункт slider) на еще один очень интересный пример реализации виджета слайдер – это Simple scrollbar.

Как вы видите с помощью этого виджета можно реализовать, как бы скроллер каких то объектов, к примеру картинок. Можно поместить в каждую ячейку по картинке и с помощью ползунка прокрутки листать изображения.
Давайте реализуем этот пример, то есть сделаем маленькую очень простую галерею картинок. Для этого, что бы не терять время скопируем из файла price.html весь код кроме кода расположенного между script и body и сохраним под именем slider.html (вот его код):
Далее, я заготовил папку с изображениями images, в ней 10 изображений маленького размера и 10 этих же изображений, но большого размера, которые имеют такие же имена, но располагаются в папке big. Скопируем папку в корень нашего скрипта.
Теперь откроем исходный код примера реализации Simple scrollbar, давайте начнем его рассматривать снизу. Как Вы видите, внизу у нас идет обычная html разметка. Давайте скопируем этот участок кода (он содержится между тегами body). Затем внесем в него некоторые изменения, а именно добавим стиль style=»width:800px» в блок div с классом class=»scroll-pane», вставим картинки в каждую ячейку будущей галереи, и добавим блок div с классом class=»results», в котором будут отображаться увеличенные изображения (в момент загрузки будет отображено первое изображение).
Итак, в итоге получился вот такой код html разметки:

2.2. Пишем логическую часть фотогалереи.

Дальше опять возвращаемся к исходному коду и скопируем код расположенный между тегами script. Я удалил из него две функции, которые для нашего примера не нужны, эти функции отвечали за поведение слайдера при изменении размеров окна. Вот такой вид имеет код, который необходимо вставить между тегами head:

Здесь, конечно, все сложнее, чем в нашем первом примере, но это на первый взгляд. Смотрите, вначале производим выборку по классу $( «.scroll-bar» ) пустого блока div, в котором будет располагаться слайдер (полоса прокрутки). Затем сравниваем по ширине два блока первый с классом scroll-content, второй с классом scroll-pane. Блок с классом scroll-content изначально намного шире блока scroll-pane, так как в нем располагаются изображения и если посмотреть стили этого блока (в исходном коде, мы чуть позже добавим их к скрипту), то можно увидеть, что там выставлена огромная ширина width: 2440px. Поэтому выполнится условие if и при движении ползунка слайдера, наш блок с классом scroll-content будет получать отрицательный левый отступ пропорционально движению ползунка, тем самым смещаясь влево. Далее описывается функция sizeScrollbar(), которая рассчитывает длину ползунка сладера в зависимости от ширины блока с классом scroll-content (тоесть размер ползунка пропорционален контенту который он перемещает — чем больше контент тем меньше ползунок).
И последнее перед просмотром в браузере давайте скопируем из исходного кода стили и вставим в наш файл, только я их немного подкорректировал в соответствии с нашим примером (немного изменил ширину блока с изображениями и добавил стилей для изображений ), вот смотрите:

Теперь давайте перейдем в браузер и посмотрим на результат нашей работы:

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

Для начала сделаем выборку всех изображений в блоке с классом scroll-content-item, затем применим метод each. Этот метод позволяет нам создавать циклы, для последовательно прохода по каждому элементу выборки. Так как изображений у нас десять, а значит и в выборку попадет десять элементов, поэтому с помощью метода each мы можем работать с каждым элементом выборки. Внутри этого метода описываем функцию, которая будет отрабатывать для каждого элемента выборки. Далее для каждого элемента выборки вызываем обработчик события click. Этот обработчик сработает, когда по элементу кликнуть мышью, и как только это произойдет – выполнится функция, которая описана в обработчике. В этой функции мы получаем значение атрибута src, для изображения, с помощью метода attr() (в скобках указываем имя атрибута, значение которого хотим получить). То есть в переменную url запишется строка images/1.jpg (для первой картинки).

Далее формируем переменную path в которой будет хранится путь к изображению большого размера. Делаем это следующим образом: вначале вырезаем имя файла с помощью методов substring() и indexOf(), а затем прибавляем строку ‘images/big/’. И в конце производим выборку блока с классом results, вставляем в этот блок новую картинку (при помощи метода html()) с адресом, записанным в переменной path, далее мгновенно скрываем этот блок (при помощи метода hide()). Затем показываем блок, используя анимацию при помощи метода fadeIn(), со скоростью в 1 секунду(1000 миллисекунд).
Давайте перейдем в браузер и посмотрим:

Как Вы видите, теперь, если кликнуть мышью по маленькому изображению, в центральном блоке появляется увеличенная копия этого изображения (то есть как бы предварительный просмотр).
Теперь давайте сделаем так, что бы при клике по изображению в центре – это изображение увеличивалось до своего исходного размера, а при последующем клике – возвращалось обратно в исходное положение.
Итак, вначале как обычно код, а затем пояснения:

Первым делом производим выборку блока с классом results и применяем к нему метод toggle(). Этот метод позволяет реализовать своего рода переключатель, то есть в этом методе мы описываем две функции: первая выполнится при первом клике мыши, вторая – при втором клике мыши.
Итак, функция для первого клика: производим выборку изображений в блоке с классом results и с помощью метода css() (метод позволяет задать выбранному элементу произвольные css-стили) зададим несколько правил css-стилей, а именно рамку, позицию и свойство z-index то есть вынесем изображение на первый план. Далее к этому блоку применяем метод animate() (данная функция предназначена для создания пользовательской анимации, то есть она принимает параметрами css правила, и если они отличны от существующих правил элемента, то происходит анимированное изменение этих правил, к примеру, если ширина элемента 100 пикселей и мы передаем методу animate() ширину в 200 пикселей то ширина элемента плавно увеличится до 200 пикселей) и передаем новые правила css-стилей, а именно исходные ширину и высоту изображения, а также верхний и левый отступы, чтобы изображение не смещалось в сторону, и при увеличении располагалось по центру.
Далее аналогично описываем функцию для второго клика, только при этом меняем правила css-стилей, которые передаем в методы css() и animate().

Итак, переходим в браузер и посмотрим, что у нас получилось:

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