Как создать фотоальбом на компьютере

Урок 24. Создание простейших фотоальбомов

Для того, чтобы разместить на своём сайте фотографии, можно пойти тремя путями.

1. Найти в сети Интернет готовый фотоальбом, скачать его и установить на своём сайте. Этот путь я не стану рассматривать.

2. Просто разместить фотографии и подписи к ним на своей html-странице, использовав теги для вставки изображения в текст, о которых Алла Михайловна вела речь в Уроке 20

3. Но допустим, вы не хотите, чтобы картинки просто торчали в тексте. Вы хотите, например, чтобы на странице стояли миниатюры, при нажатии на которые на отдельной странице открывалось бы полномасштабное изображение. Или вы хотите, чтобы у вас получилось слайд-шоу, когда картинки сменяются при нажатии на кнопку «Далее», без смены всей страницы. Я расскажу о трёх простейших вариантах создания таких фотоальбомов.

Первый вариант

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

1) Подготавливаем страницу html, продумываем дизайн. Я возьму для примера простейший дизайн страницы, который стоит на моём сайте:

Это — html-код моей страницы для фотоальбома. Выглядит она так: Пустая страница для фотоальбома Вы делаете такую страницу, какая нужна вам.

На место трёх точек, которые стоят в коде таблицы (70 %, бордер 0), обозначенной у меня красным цветом, мы будем вставлять наши фотографии.

2) Теперь нам нужно подобрать фотографии, которые мы будем загружать на нашу страницу. Они могут быть любого размера, какого хотите. Но желательно всё-таки, чтобы вы подготовили их, сохранив для web-страницы. чтобы они не весили слишком много. По традиции (почему-то очень часто для примера используют фото своих домашних питомцев), я возьму восемь фотографий со своей кошкой. Загружаем эти фотографии в нужную нам папку на наш хостинг и прописываем для каждой фотографии код вот такого вида:

Как вы можете увидеть, это код обычного баннера, в котором вместо ссылки прописан адрес нашей картинки:

Учитывайте то, что при таком способе установки на страницу миниатюрных изображений, они могут оказаться искажены, потому что я не уменьшала их пропорционально, а просто задала размер миниатюры, который поставит сам браузер. Если вы хотите, чтобы ваши картинки и на миниатюрах выглядели пропорционально, вам необходимо либо высчитать, какой размер нужно вписать в каждую картинку, чтобы она уменьшилась пропорционально, либо сделать к каждой картинке соответствующую миниатюру, например, в Photoshop или в программе Paint. Т.е. сделать отдельную картинку — маленькую копию той, что будет увеличиваться — и загрузить в папку с картинками не только фото, но и миниатюры к нему.

Например, я сделала миниатюру первой картинки и назвала её «Kosha1_min.jpg» (она у меня не 100 на 50, а 100 на 77 рх). Тогда мой код будет выглядеть следующим образом:

Размер картинки я убираю из тега, чтобы он не искажал мою картинку.

Итак, у меня в альбоме все миниатюры будут уменьшены до 100 на 50 рх, кроме первой, к которой я сделала отдельную миниатюру 100 на 77 рх и загрузила в папку отдельно. Теперь я вставляю все восемь картинок в табличку кода страницы, на подготовленное место (если помните, я там поставила три точки).

Весь код альбома вместе со страницей будет выглядеть так:

Коды картинок я обозначила синим цветом. Теперь я загружаю всю страницу на хостинг и получается у меня вот такой фотоальбом: Фотоальбом

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

Второй вариант

Но вполне вероятно, что вам захочется не просто фотоальбом, а небольшое слайд-шоу, в котором картинки буду сменяться при нажатии на кнопку или ссылку «Далее». Это делается при помощи JavaScript. Для того, чтобы продемонстрировать этот фотоальбом, я возьму шесть картинок всё с той же Кляксой. Одна картинка у меня будет основная, которой открывается фотоальбом. Ссылки на изображения у меня прописаны полным адресом, потому что страница фотоальбома и сами картинки лежат в разных папках и из-за этого мне необходимо прописать их полный адрес. Первая часть скрипта, которую вы должны будете поставить между тегами

var num=1
img1 = new Image ()
img1.src = «http://dugward.ru/foto/Kosha2.jpg»
img2 = new Image ()
img2.src = «http://dugward.ru/foto/Kosha3.jpg»
img3 = new Image ()
img3.src = «http://dugward.ru/foto/Kosha4.jpg»

img4 = new Image ()
img4.src = «http://dugward.ru/foto/Kosha5.jpg»

img5 = new Image ()
img5.src = «http://dugward.ru/foto/Kosha6.jpg»

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

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

Весь html-код страницы будет выглядеть так (красным я выделила собственно код, который приводила выше):

img4 = new Image ()
img4.src = «http://dugward.ru/foto/Kosha5.jpg»

img5 = new Image ()
img5.src = «http://dugward.ru/foto/Kosha6.jpg»

Копирование материалов сайта возможно только в случае некоммерческого использования данных материалов, с сохранением личных неимущественных прав авторов (имя автора, название произведения и текст произведения без каких-либо изменений) и при обязательном наличии активной ссылки на данный сайт. По вопросам коммерческого использования материалов обращайтесь к администратору сайта. Ваши предложения можете направлять в Гостевую книгу, форум или на e-mail владельца сайта.

Посмотреть то, что получилось, можно здесь: Фотоальбом

Недостатки данного способа: двигаемся мы по нашим фотографиям только вперёд, по кругу. Чтобы вернуться на первоначальную картинку — надо обновить страницу в браузере.

Третий вариант

numimg=0
imgslide=new Array ()
imgslide[0] =new Image ()
imgslide[1]=new Image ()
imgslide[2]=new Image ()
imgslide[3]=new Image ()
imgslide[4]=new Image ()
imgslide[5]=new Image ()
imgslide[6]=new Image ()
imgslide[7]=new Image ()
imgslide[8] =new Image ()

imgslide[0].src =»http://dugward.ru/foto/Kosha1.jpg»
imgslide[1].src =»http://dugward.ru/foto/Kosha2.jpg»
imgslide[2].src =»http://dugward.ru/foto/Kosha3.jpg»
imgslide[3].src =»http://dugward.ru/foto/Kosha4.jpg»
imgslide[4].src =»http://dugward.ru/foto/Kosha5.jpg»
imgslide[5].src =»http://dugward.ru/foto/Kosha6.jpg»
imgslide[6].src =»http://dugward.ru/foto/Kosha7.jpg»
imgslide[7].src =»http://dugward.ru/foto/Kosha8.jpg»
imgslide[8].src =»http://dugward.ru/foto/Kosha9.jpg»

Следующую часть скрипта и форму для «Вперёд» и «Назад» мы поставим в тело страницы, между

Эта часть у нас содержит в себе ссылку на первую картинку слайд-шоу и форму, которую браузер будет преобразовывать в кнопки «Назад» и «Вперёд». Теперь посмотрим, как будет выглядеть весь html-код страницы (скрипты фотоальбома выделены красным):

.p1
<
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-indent: 1.5em;
text-align: justify;
>

Фотоальбом будет выглядеть так: Фотоальбом

Недостатки этого способа: если поставить на страницу перед картинкой фотоальбома ещё и логотип (то есть, воткнуть внутрь фотоальбома скрипта ещё одну не относящуюся к самому фотоальбому картинку), то при переключении туда-сюда логотип исчезает и наше слайд-шоу оказывается на его месте. Поэтому в таком фотоальбоме лучше не ставить логотип.

Я рассказала вам всего о трёх способах создания собственного фотоальбома. Их гораздо больше. Надеюсь, вы найдёте для себя то, что устроит именно вас.

Как создать фотоальбом на компьютере

Хотите узнать о том, как создать музыкальный фотоальбом? В этом нет ничего сложного, если у вас на компьютере установлен специальный софт. Например, сделать оригинальный видеоролик можно в русскоязычной программе «ФотоШОУ PRO». Предлагаем вашему вниманию пошаговую инструкцию, изучив которую вы обучитесь работе в данном приложении и сможете легко создавать красочные фильмы своими руками.

Шаг 1. Подготовьтесь к работе