На днях, делая очередной сайт для одного детского учреждения, меня попросили сделать фото галерею. Захотелось сделать что-то красивое. Писать самому - лень (как всегда). И я бросился в поиск по дебрям Интернета. Скажу сразу – выбор огромен. Но проблема в том, что все красивые и удобные скрипты писаны на PHP. Меня это в корне не устраивало потому, что сервер, на котором должен размещаться сайт, не предоставляет услуги PHP хостинга.
Значит надо искать Java-скрипт. Таких скриптов тоже хватает, надо только поискать… Но вот в чем проблема: Навороченные Java-скрипты с переходами, прокруткой и прочими примочками зачастую очень громоздки, требуют переналадки под дизайн или возникают проблемы при увеличении количества фотографий, заданных автором.
После долгих поисков, на сайте Михаила Русакова, я нашел простой и удобный скрипт. Хочу поделиться, потому что такой скрипт может пригодиться.
Сам код Java-скрипта прописывается между тегами <HEAD> и </HEAD>:
Значит надо искать Java-скрипт. Таких скриптов тоже хватает, надо только поискать… Но вот в чем проблема: Навороченные Java-скрипты с переходами, прокруткой и прочими примочками зачастую очень громоздки, требуют переналадки под дизайн или возникают проблемы при увеличении количества фотографий, заданных автором.
После долгих поисков, на сайте Михаила Русакова, я нашел простой и удобный скрипт. Хочу поделиться, потому что такой скрипт может пригодиться.
Сам код Java-скрипта прописывается между тегами <HEAD> и </HEAD>:
<script type="text/javascript">
function setBigImage(foto) {
document.getElementById("bigimg").src = foto.src;
}
</script>
Между тегами <body > и </body> прописываем код HTML:
<div>
<p style = 'text-align: center;'>
<img id = 'bigimg' src = 'gallery1.jpg' height = '300' alt = 'Главное изображение' />
</p>
<table style = 'margin: 0 auto;' border = '1'>
<tr>
<td>
<img src = 'gallery1.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 1' />
</td>
<td>
<img src = 'gallery2.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 2' />
</td>
<td>
<img src = 'gallery3.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 3' />
</td>
</tr>
<tr>
<td>
<img src = 'gallery4.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 4' />
</td>
<td>
<img src = 'gallery5.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 5' />
</td>
<td>
<img src = 'gallery6.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 6' />
</td>
</tr>
</table>
</div>
Все. Осталось только прописать (обязательно вручную) пути к файлам изображений в атрибутах img src = 'galleryN.jpg' и заполнить, если надо, alt = 'Изображение N'.
При необходимости количество изображений в строке можно увеличить, как и количество строк.
Так же хочу заметить, что в строке <img id = 'bigimg' src = 'gallery1.jpg' height = '300' alt = 'Главное изображение' />, значение атрибута height можно изменить под вашу страницы.
И одна рекомендация для начинающих. Изображения лучше обработать до формата основного окна вывода (в минимизированных окнах они уменьшатся автоматически). Зачем это надо? Можно конечно загрузить на сервер фото размером и на 4000 пикселей, но страница тогда будет грузиться намного дольше. Проверено (пример галереи).
Комментариев нет:
Отправить комментарий