Highslide JS. Увеличение картинки во всплывающем окне при щелчке мышью

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Пример использования этого варианта посмотрите, кликнув на ссылку «демо-пример» или картинку чуть ниже. Изображение в натуральном размере плавно откроется в новом окне. Его можно перемещать курсором мыши. Внизу можно размещать описание и комментарии к изображению. Клик по перекрестию стрелок внизу справа откроет изображение на весь экран. При втором клике картинка примет первоначальные размеры.

Демо-пример

Для корректной работы эффекта необходимо включить поддержку JavaScript в вашем браузере!
Папка highslide является универсальной для всех эффектов Highslide JS, поэтому её стоит закачать один раз на свой сайт. Не беспокойтесь, много места она не занимает, всего-то 887кб.

Изображение можно перемещать. При клике картинка принимает первоначальные размеры.

Html-код этого эффекта представлен в таблице внизу:


<html>
<head>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css">
<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript">
	hs.graphicsDir = 'highslide/graphics/';
	hs.wrapperClassName = 'wide-border';
</script>
</head>
<body>
<div align="center">
<a href="images/002.jpg" onclick="return hs.expand(this)">
	<img src="images/002.jpg" alt="Кристина Агилера" width="120" height="100"></a>
<div class="highslide-caption">Кристина Агилера</div>
</div>
</body>
</html>

Пропись стилей (обязательно в head).

Подключение скриптов (можно располагать как в head так и в body).

Название картинки.

Размеры картинки до увеличения.

Изображения с натуральными размерами поместите в папку images вашего сайта.

Исходники (667 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

Распакуйте архив в отдельную папку. Папка highslide_JS содержит две папки - highslide и images, а так же файл demo.html. Откройте последний в браузере, проверьте, всё должно изумительно работать. Закачайте папку highslide_JS на сервер и после правильного выполнения всех действий с не меньшим успехом всё будет функционировать и на вашем сайте.

Источник урока - сайт //highslide.com/. На этом сайте можно скачать бесплатно архив со многими эффектами. Автор позволяет использовать свои разработки в нескольких вариантах. Вот выдержка из перевода: «Вы хотите использовать Highslide для персонального сайта, сайта школы, фотоальбома Вашей семьи или некоммерческой организации? Тогда вам не нужно разрешение автора, просто используйте Highslide».

Кто не ищет лёгких путей и всегда идёт вперёд, стремится к совершенству, пожалуйста, дерзайте.

Как убрать логотип в верхней левой части изображения?

В комментариях меня просили пояснить как можно удалить логотип «Powered by Highslide JS» во всех вариантах Highslide.

Определите, какой файл ява-скрипта работает в конкретном случае. В нашем варианте, как понятно из кода, принимает участие файл highslide.js;
Откройте папку highslide, в ней найдите и откройте файл highslide.js;
В 17-й строке
creditsText : 'Powered by <i>Highslide JS</i>',
удалите участок кода
Powered by <i>Highslide JS</i>
В итоге, строка должна выглядеть так:
creditsText : ' ',
Всё! Логотип исчезнет!

Успехов в освоении материала. До новых встреч. L.M.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки