В этом разделе мы поэтапно расскажем, как делался сайт "Созвездие Близнецов"
Урок 24. Создание простейших фотоальбомов
Для того, чтобы разместить на своём сайте фотографии, можно пойти тремя путями.
1. Найти в сети Интернет готовый фотоальбом, скачать его и установить на своём сайте. Этот путь я не стану рассматривать.
2. Просто разместить фотографии и подписи к ним на своей html-странице, использовав теги для вставки изображения в текст, о которых Алла Михайловна вела речь в Уроке 20
3. Но допустим, вы не хотите, чтобы картинки просто торчали в тексте. Вы хотите, например, чтобы на странице стояли миниатюры, при нажатии на которые на отдельной странице открывалось бы полномасштабное изображение. Или вы хотите, чтобы у вас получилось слайд-шоу, когда картинки сменяются при нажатии на кнопку "Далее", без смены всей страницы. Я расскажу о трёх простейших вариантах создания таких фотоальбомов.
Первый вариант
Размещаем на странице миниатюры, при нажатии на которые в отдельном окне будет открываться полномасштабная картинка.
1) Подготавливаем страницу html, продумываем дизайн. Я возьму для примера простейший дизайн страницы, который стоит на моём сайте:
Это - html-код моей страницы для фотоальбома. Выглядит она так: Пустая страница для фотоальбома Вы делаете такую страницу, какая нужна вам.
На место трёх точек, которые стоят в коде таблицы (70 %, бордер 0), обозначенной у меня красным цветом, мы будем вставлять наши фотографии.
2) Теперь нам нужно подобрать фотографии, которые мы будем загружать на нашу страницу. Они могут быть любого размера, какого хотите. Но желательно всё-таки, чтобы вы подготовили их, сохранив для web-страницы. чтобы они не весили слишком много. По традиции (почему-то очень часто для примера используют фото своих домашних питомцев), я возьму восемь фотографий со своей кошкой. Загружаем эти фотографии в нужную нам папку на наш хостинг и прописываем для каждой фотографии код вот такого вида:
Как вы можете увидеть, это код обычного баннера, в котором вместо ссылки прописан адрес нашей картинки: <a href="http://dugward.ru/foto/Kosha1.jpg" target="_blank">, а в коде картинке мы проставим размер миниатюры: <img src="http://dugward.ru/foto/Kosha1.jpg" width="100" height="50"> . Я поставила размер 100 на 50 рх.
И закроем эту конструкцию закрывающим тегом ссылки: </a>
Учитывайте то, что при таком способе установки на страницу миниатюрных изображений, они могут оказаться искажены, потому что я не уменьшала их пропорционально, а просто задала размер миниатюры, который поставит сам браузер. Если вы хотите, чтобы ваши картинки и на миниатюрах выглядели пропорционально, вам необходимо либо высчитать, какой размер нужно вписать в каждую картинку, чтобы она уменьшилась пропорционально, либо сделать к каждой картинке соответствующую миниатюру, например, в Photoshop или в программе Paint. Т.е. сделать отдельную картинку - маленькую копию той, что будет увеличиваться - и загрузить в папку с картинками не только фото, но и миниатюры к нему.
Например, я сделала миниатюру первой картинки и назвала её "Kosha1_min.jpg" (она у меня не 100 на 50, а 100 на 77 рх). Тогда мой код будет выглядеть следующим образом:
Размер картинки я убираю из тега, чтобы он не искажал мою картинку.
Итак, у меня в альбоме все миниатюры будут уменьшены до 100 на 50 рх, кроме первой, к которой я сделала отдельную миниатюру 100 на 77 рх и загрузила в папку отдельно. Теперь я вставляю все восемь картинок в табличку кода страницы, на подготовленное место (если помните, я там поставила три точки).
Весь код альбома вместе со страницей будет выглядеть так:
Коды картинок я обозначила синим цветом. Теперь я загружаю всю страницу на хостинг и получается у меня вот такой фотоальбом: Фотоальбом
При нажатии на миниатюрную картинку вы каждый раз будете переходить на страницу с полномасштабным изображением.
Второй вариант
Но вполне вероятно, что вам захочется не просто фотоальбом, а небольшое слайд-шоу, в котором картинки буду сменяться при нажатии на кнопку или ссылку "Далее". Это делается при помощи JavaScript.
Для того, чтобы продемонстрировать этот фотоальбом, я возьму шесть картинок всё с той же Кляксой. Одна картинка у меня будет основная, которой открывается фотоальбом. Ссылки на изображения у меня прописаны полным адресом, потому что страница фотоальбома и сами картинки лежат в разных папках и из-за этого мне необходимо прописать их полный адрес.
Первая часть скрипта, которую вы должны будете поставить между тегами <head> и </head> выглядит так:
<SCRIPT LANGUAGE="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"
function slideshow()
{
num=num+1
if (num==4)
{num=1}
document.photos.src=eval("img"+num+".src")
}
</SCRIPT>
Как видите, в ней я поставила только три картинки, которые и будут сменять одна другую. Вы можете поставить столько картинок, сколько будет нужно вам.
Вторая часть скрипта, которую нужно вставить в любое место вашей страницы между <body> и </body>, выглядит так:
Копирование материалов сайта возможно только в случае некоммерческого использования данных материалов, с сохранением личных неимущественных прав авторов (имя автора, название произведения и текст произведения без каких-либо изменений) и при обязательном наличии активной ссылки на данный сайт.
По вопросам коммерческого использования материалов обращайтесь к администратору сайта. Ваши предложения можете направлять в Гостевую книгу, форум или на e-mail владельца сайта.
Посмотреть то, что получилось, можно здесь: Фотоальбом
Недостатки данного способа: двигаемся мы по нашим фотографиям только вперёд, по кругу. Чтобы вернуться на первоначальную картинку - надо обновить страницу в браузере.
Третий вариант
Эту часть скрипта нужно поставить между <head> и </head> . Обратите внимание: фотографии у нас пронумерованы с цифры "1", а в этом скрипте обозначение меняющихся снимков ОБЯЗАТЕЛЬНО ДОЛЖНО с цифры "0". Поэтому у нас будет небольшое несовпадение: первый слайд будет пронумерован как нулевой, но фотографии все так и останутся пронумерованы с цифры "1". И записывая функцию, мы обозначаем, что у нас фотографий 9, а слайдов - тоже 9, но пронумерованы они с нуля, поэтому последнее число слайда - 8. Я обозначила эти цифры в функции красным цветом, для наглядности.
Эта часть у нас содержит в себе ссылку на первую картинку слайд-шоу и форму, которую браузер будет преобразовывать в кнопки "Назад" и "Вперёд". Теперь посмотрим, как будет выглядеть весь html-код страницы (скрипты фотоальбома выделены красным):
{
if (n==1)
{ numimg++ if (numimg==9)
numimg=0;
}
else
{numimg--
if (numimg== -1) numimg=8;
}
document.images [0].src=imgslide [numimg].src
}
</script>
</head>
<body>
<table align="center" width="90%" cellspacing="5" cellpadding="5" border="3">
<td align ="center" body bgcolor=#e5e5e7 VALIGN=top>
<h1> Кошка по имени Клякса </h1>
<img src="http://dugward.ru/foto/Kosha1.jpg">
<form name=form1>
<input type=button value=Назад onClick="dem(0)" >
<input type=button value=Вперед onClick="dem(1)" >
</form>
<p class="p1"> Это просто фотоальбом, который расскажет об одной очень милой кошке. Ничего бессмертного в этих фотографиях нет. Но тем не менее, кому-нибудь они могут доставить радость. А хранить их у себя в компьютере - зачем тогда было фотографировать? </p>
Недостатки этого способа: если поставить на страницу перед картинкой фотоальбома ещё и логотип (то есть, воткнуть внутрь фотоальбома скрипта ещё одну не относящуюся к самому фотоальбому картинку), то при переключении туда-сюда логотип исчезает и наше слайд-шоу оказывается на его месте. Поэтому в таком фотоальбоме лучше не ставить логотип.
Я рассказала вам всего о трёх способах создания собственного фотоальбома. Их гораздо больше. Надеюсь, вы найдёте для себя то, что устроит именно вас.
