Бесконечная галерея с прокруткой

веб галерея

От автора: При работе с веб-галереями меня раздражает то, что приходится переходить со страницы на страницу; так что в сегодняшнем учебнике мы изучим, как создать автоматически генерируемую одностраничную бесконечную веб-галерею с прокруткой при помощи PHP и AJAX. Давайте начнем!


скачайте исходники себе на компьютер!

Шаг 1: Эскиз проекта бесконечной галереи

Мы начнем с обычной страницы с галереей, у которой есть контейнер для изображений, и далее будем отслеживать позицию прокрутки, в течение коротких интервалов периодически вызывая функцию JavaScript. Каждый раз, когда полоса прокрутки нашей бесконечной галереи будет достигать нижней границы, мы будем делать запрос AJAX к внешнему файлу PHP, который возвращает список названий изображений. После этого, все, что нужно сделать – добавить эти изображения в контейнер, модифицируя, таким образом, высоту страницы и передвигая позицию прокрутки выше.

веб галерея

Шаг 2: Разметка HTML

Мы будем работать с очень стандартной разметкой: заголовок и контейнер для изображений. Уменьшенные изображения сгруппируем во множество из трех рядов, которые будут содержать ссылки на полноразмерные изображения. После каждой группы мы добавим текст, показывающий общее количество изображений, и ссылку к началу страницы.

Бесплатный курс по PHP программированию

Освойте курс и создайте динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Получить курс сейчас!

веб галерея

Шаг 3: CSS

CSS тоже довольно стандартный. Во-первых, мы определяем цвета страницы и местоположение заголовка и абзацев.

веб галерея

Шаг 4

Далее для контейнера и изображений я использовал чуть-чуть CSS3 для добавления закругленных углов и теней. Не забывайте, «-moz-box-shadow»и «-moz-border-radius» используются в Firefox, а «-webkit-box-shadow» и «-webkit-border-radius» — в Chrome и Safari.

веб галерея

Шаг 5: Скрипт PHP

Это очень короткое действие. Нам нужно вызвать скрипт PHP индексом следующего изображения, который нам нужен в качестве параметра. Прежде всего, мы должны извлечь все доступные имена изображений из каталога и сохранить их в массив. Я систематизировал свои изображения в две папки: «thumb» и «img», которые содержат соответственно уменьшенные и полноразмерные. Обратите внимание, что уменьшенные изображения должны иметь точно такие же имена, как соответствующие им изображения.

веб галерея

Здесь мы определяем переменную для каталога, из которого нам нужно получать изображения, проверяем, существует ли он и является ли доступным для чтения и считываем все имена файлов из него. При чтении полного содержимого папки, мы обязательно получим два дополнительных элемента, которые нам не нужны: «.» – это означает текущий каталог, и «..» – означает ссылку на родительский каталог. Чтобы учесть это, нам нужно проверять, отличается ли читаемый элемент от указанных двух, чтобы затем безопасно добавить его в свой массив.

Заметьте, что при добавлении элемента в массив, если не указывать позицию куда он будет помещен, он будет помещен в конец массива.

Шаг 6

Теперь нужно построить текст ответа. Мы отошлем обратно в JavaScript одну строку, содержащую все необходимые имена файлов, разделенные точкой с запятой.

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

Как я уже говорил, картинки будут сгруппированы в наборы из трех рядов, где каждый ряд будет содержать по три изображения, так что нам нужно всего девять изображений, чтобы вернуть все имена файлов в группе. Начинаем с индекса, полученного в качестве параметра, $n, и двигаемся до $n+9. При каждом приращении добавляем имя изображения, за которым следует «;», в текст ответа. Тут происходит небольшой фокус. У нас нет бесконечного количества изображений; так что для создания эффекта «бесконечной», никогда не заканчивающейся галереи, мы должны сбрасывать в начало текущий индекс каждый раз, когда он становиться больше общего количества изображений. Это сделано с применением функции «modulo» или «%» между индексом и общим количеством изображений.

В результате этой операции мы получаем остаток от деления этих двух элементов. Например, если индекс «$i» равен «50″, а количество изображений «count($files)» равно «45″, результат будет равен «5″. Таким же образом, если «$i» — «50″, а «count($files)» — «65″, результат будет «50″. Наконец, нам необходимо отправить обратно текст ответа.

Шаг 7

Вот окончательный вариант скрипта для PHP. Просто поместите этот код в новый файл .php.

Шаг 8: JavaScript

Как обычно, сначала мы определяем переменные, которые нам позже понадобятся.

веб галерея

Чтобы определить, находится ли полоса прокрутки вблизи низа страницы, нам нужны три переменные:

«contentHeight» – высота исходной галереи

«pageHeight» – высота видимой в браузере страницы

«scrollPosition» – позиция полосы прокрутки, отмеренная от верха

Наконец, нам нужна переменная для индекса следующей страницы (которую мы собираемся послать в PHP-скрипт) и переменная для объекта запроса Ajax.

Шаг 9

Здесь нам нужно определить функцию, которая добавит изображения в контейнер HTML.

Бесплатный курс по PHP программированию

Освойте курс и создайте динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Получить курс сейчас!

Объект запроса проходит различные состояния после того, как запрос сделан, и у каждого состояния есть свое числовое обозначение. Нас интересует только одно значение — «4», которое означает финальную стадию, когда запрос окончен. Сначала проверяем, находится ли запрос в этом состоянии, а затем проверяем, получили ли мы отклик.

Шаг 10

Если выполнены оба условия, тогда нам нужно разобрать текст ответа на части. Это означает, что мы должны разделить имена файлов в массив. Помните, что скрипт PHP возвращает одну строку с именами, разделенными точкой с запятой. Вот пример: Achievements.jpg;Bw.jpg;Camera.jpg;Cat-Dog.jpg;CREATIV.jpg;creativ2.jpg;Earth.jpg;Endless.jpg;EndlesSlights.jpg;

Имеется небольшая проблемка, с которой мы должны справиться в первую очередь; текст ответа может начинаться с символа перевода строки, который нам не нужен. Это легко исправить при помощи функции «replace», которая принимает два параметра: «\r\n» – символ перевода строки и «» – пустая строка, которая должна заменить все вхождения первого параметра. Теперь все, что нужно сделать – это разбить строку по разделителю «;».

Шаг 11

Далее мы должны добавить изображения в свой контейнер.

Для каждого элемента массива мы делаем проверку, не пустая ли это строка, и добавляем уменьшенное изображение и ссылку на него. Также нам нужно использовать счетчик «j» для распределения изображений по рядам. После каждого третьего и шестого добавленного изображения мы создаем новую строку, а после девяти добавленных изображений вставляем текст, отражающий общее число показанных изображений и ссылку к верху страницы.

Шаг 12

Вот функция в завершенном виде.

Шаг 13

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

Во-первых, нам нужно определить местоположение полосы прокрутки. Для Internet Explorer это делается немного по-другому, поэтому нам нужно проверить, каким браузером пользуется клиент, и затем просто сохранить это значение в переменной, которую мы ранее предусмотрели.

Шаг 14

веб галерея

Теперь проверяем, насколько далеко мы находимся от конца нашей галереи, т.е. не достигла ли видимая в браузере часть страницы расстояния в 500px от низа страницы. Это — не точная величина, и можно использовать любое другое значение, которое посчитаете подходящим. До тех пор, пока это условие верно, можно продолжать добавить новые изображения.

Шаг 15: Создание объекта XMLHttpRequest

Мы готовы создать объект XMLHttpRequest и отослать данные с помощью него. Снова повторяю, для Internet Explorer определения немного другие, так что мы также должны это учитывать.

Шаг 16

Перед отправкой запроса нам нужно задать имя PHP-скрипта на сервере и добавить параметры, которые нужно ему придать.

Это – простая текстовая переменная, представляющая URL страницы.

Шаг 17

Настало время отправить запрос.

URL определяется вызовом метода «open». Второй параметр является единственно важным для нас, так как он обозначает URL скрипта. После этого все, что нам нужно – это отправить запрос с помощью send(). Это запустит PHP-скрипт, а результат его работы будет находиться в «xmlhttp.responseText».

Шаг 18

Последний шаг – разместить новый контент на странице, вызвав определенную ранее функцию «putImages», и подготовить переменные для следующего запроса.

веб галерея

У нас в галерее девять новых изображений, таким образом, мы увеличиваем «n» на 9. Еще нам нужно изменить высоту страницы; поэтому увеличиваем «contentHeight» на 800.

Шаг 19

Вот использованный нами JavaScript целиком.

Шаг 20

Последнее, что мы должны сделать, это запускать JavaScript периодически с заданным интервалом времени.

Просто определите свойство «onload» тэга «body» и установите его значение на функцию «setInterval». Это будет запускать функцию «scroll» каждую четверть секунды. Кроме того, вы можете изменить это значение времени, но я обнаружил, что оно оптимально для того, что нам нужно.

Конец!

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

Автор: Alexandru Pitea

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: http://net.tutsplus.com

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Бесплатный курс по PHP программированию

Освойте курс и создайте динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Получить курс сейчас!

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Получить

Метки: , , , ,

Похожие статьи:

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

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

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

  1. Константин

    Хорошо описано

  2. Александр

    Хорошо описано, но сложно для новичков.

  3. Jelena

    демо-результат не работает :( (

  4. Ckazochnik

    У данного метода есть два больших недостатка.
    1. Фотографии подгружаются с небольшими тормозами.
    2. По страницам ориентироваться удобнее.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree