Как сделать фотоальбом в html

Обновлено: 07.07.2024

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

Сначала опишем функцию ShowPhoto(), которая будет открывать фотографию в новом окне, без панели инструментов, строки статуса и строки адреса. В качестве параметра данной функции будут передаваться значения: имя файла - Photo, ширина - WidthWin и высота окна - HeightWin. Данная функция будет вызываться используя ссылку: Функция будет выглядеть следующим образом:

Поскольку данная функция может вызываться с разных страниц сайта, удобно расположить ее в отдельном внешнем файле, например ShowPhoto.jsc. А в коде нашей страничке мы определим этот файл как источник операторов с помощью атрибута SRC тэга

Ну и в итоге код нашего фотоальбома будет выглядеть следующим образом:

Посмотреть как работает наш фотоальбом можно на этой ссылке.

Теперь попробуем сделать фотоальбом, в котором фотографии сменяются нажатием клавиш "Следующее" "Предыдущее". Для этого нам необходимо воспользоваться объектом Array - массив. Сначала объявляем новый массив "Photo", записав:

После этого заполним массив значениями имен наших файлов с фотографиями. Перечисление элиментов массива в JavaScript начинается с цифры 0:

Теперь нам надо описать две функции, которые будут перебирать эти фотографии вперед "next_image()" и назад "prev_image()". Для листания картинок необходимо менять значение переменной n, которая будет оределять порядковый номер фотографии. Увеличивает значение переменной на единицу оператор инкремента (++): Уменьшать значения переменной на единицу будет оператор декремента (--):

Число наших фотографий ограниченно, в нашем примере их всего шесть. Поэтому каждый раз необходимо проверять, не вышло ли значение переменной за границу диапазона: 0 - 5. Проверка условия в JavaScript выполняется с помощью оператора IF, имеющего следующую полную форму записи:

Для нашего случая, если значение переменной n больше 5, то присваеваем переменной n значение 0:

И если значение переменной n меньше 0, присваеваем переменной n значение 5:

И после этого демонстрируем картинку, согласно ее положению в массиве. Делать это мы будем используя объект Image. Каждое изображение на web-странице получает порядковый номер: первое изображение получает номер 0, второе - номер 1 и т.д. Таким образом, к первому изображению мы обращаемся записав document.images[0].

Можно присвоить изображению конкретное значение:

Но нам надо, чтобы изображение выбиралось из элементов массива:

Таким образом наши функции смены картинок будут иметь код:

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

Результат работы данного кода можно посмотреть тут.

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


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

Для начала мы рассмотрим разметку HTML -документа, в котором будет выводиться все изображения, также можно присвоить описание с помощью атрибута alt, подпись изображений будет выводиться внизу изображений.

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

Фотогалереи и слайдеры пишутся с использованием языков программирования, особенно популярны скрипты, написанные на языке JavaScript. Мы с вами изучим, как вставлять в html-страницы готовые скрипты, написанные профессиональными программистами.

  1. Подключение в любом месте
  2. Вынос скриптов в заголовок HEAD
  3. Внешние скрипты

1. Подключение в любом месте

Когда браузер читает HTML-страничку, и видит

При этом файл /my/script.js содержит javascript-код, который иначе мог бы находиться внутри тега

При указании атрибута src содержимое тега игнорируется.

То есть одновременно подключить внешний файл и написать что-то внутри тега нельзя. Придется делать два разных тега

За отображение всех страниц модуля отвечают шаблоны:

Если включена PDA-версия сайта, то для нее будут отображены свои шаблоны модуля:


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


Главная страница фотоальбома

С помощью переключателя страниц $PAGE_SELECTOR$ можно предоставить возможность просмотра всех добавленных фотографий с главной страницы.

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

На странице отображается список фотографий раздела. За их вывод отвечает переменная $BODY$. Данный шаблон может не использоваться на сайте, если ранее не было добавлено ни одного раздела.

Как и на главной странице, $PAGE_SELECTOR$ покажет переключатель страниц, а $CATEGORIES$ — список вложенных в раздел категорий.

Чтобы пользователи могли фильтровать изображения, убедитесь, что в шаблоне включена переменная $FILTER1_MENU$ или $FILTER2_MENU$.

Информация о разделе выводится с помощью переменных $SECTION_NAME$, $SECTION_DESCR$, $SECTION_URL$. Значения этих переменных определяются при создании разделов.

В шаблоне действуют те же переменные, что и в разделе: $BODY$, $PAGE_SELECTOR$, $SORTING_MENU$, $FILTER1_MENU$.

Поскольку в категориях не может быть вложенных категорий, переменная $CATEGORIES$ в данном шаблоне не используется.

Чтобы отобразить информацию о родительском разделе, используйте переменные $SECTION_NAME$, $SECTION_DESCR$, $SECTION_URL$.

Информация о категории выводится с помощью переменных $CAT_NAME$, $CAT_DESCR$, $CAT_URL$. Значения этих переменных определяются при создании категорий.

  • $FULL_PHOTO_DIRECT_URL$. Прямая ссылка на файл фотографии в полном размере (если фотография больше 500x500).
  • $FULL_PHOTO_URL$. Ссылка на страницу с фотографией в полном размере (если фотография больше 500x500).
  • $NEAR_PHOTOS$. Демокартинки с возможностью быстрого переключения.


  • $OTHER_PHOTOS$. Ссылки на другие фотографии текущего альбома.


  • $PHOTO_DESCR$, $PHOTO_NAME$, $PHOTO_NAME$. Описание, название и прямая ссылка на фотографию.
  • $PHOTO_SIZE$. Размеры фотографии в пикселях (ширина и высота).
  • $PHOTO_WEIGHT$. Размер фотографии на диске (в килобайтах).
  • $SLIDESHOW$. Переменная выводит слайдшоу из фотографий категории на Flash.


  • $SLIDESHOW_BUTTON$. Кнопка запуска слайдшоу.
  • $THUMBNAIL_URL$. Прямая ссылка на файл с демофотографией.

Вид фотографий

Шаблон страницы рейтинга и поиска фотографий отвечает за отображение нескольких типов страниц: страницы поиска, страницы рейтинга, страницы фотографий пользователей.

За вывод материалов отвечает переменная $BODY$. Как и на главной странице, $PAGE_SELECTOR$ покажет переключатель страниц.

Главным содержимым страницы является форма добавления фотографии. Ее вид задается с помощью набора полей в настройках модуля. Все поля формы выводятся с помощью переменной $BODY$:


Приватность альбома (категории) задается при его создании или редактировании:


После установки пароля пользователи при посещении категории будут видеть страницу:


Форма ввода пароля выводится в шаблоне переменной $BODY$. А до или после нее вы можете разместить дополнительную информацию. Это может быть произвольный текст или ссылки на другие разделы модуля, которые могут оказаться полезными, если пользователь не знает пароль.


Теперь при нажатии на фотографию в списке подробная информация о ней выводится во всплывающем окне:


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

Форма добавления/редактирования фотографии


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

Например возьмем поле "Краткое описание", за него в форме добавления и редактирования отвечает код:

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

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

Таблица стилей (CSS)

В данном шаблоне код указывается на чистом CSS, а не HTML, как в других шаблонах.

Еще одна особенность шаблона состоит в том, что какие-либо переменные в нем отсутствуют.

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

Читайте также: