Loading





Форекс с Альпари

eTXT




Анкетка


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.

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

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


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка