О HighSlide

Оказалось, что скрипт написан человеком по имени Torstein Hønsi и распространяется свободно (в том смысле, что не требуется разрешения автора на его использование) в некоммерческих целях. Сам скрипт можно загрузить здесь.

Вот, решил с ним побаловаться. Для начала приведу перевод описания с сайта highslide.com:

Highslide JS является программным обеспечением JavaScript с открытым исходным кодом, предлагая подход Web 2.0 к всплывающим окнам. Это упрощает использование эскизов изображений и всплывающих HTML-окон на веб-страницах. Библиотека обладает следующими чертами и преимуществами:

• Не требуется плагинов, таких, как Flash или Java.
• Блокирование всплывающих окон в браузере клиента не мешает выполнению скрипта - содержимое разворачивается внутри активного окна браузера.
• Требуется всего лишь нажатие одной кнопки. После открытия изображения или всплывающего HTML-окна пользователь может далее его прокручивать, или покинуть окно, не закрывая его.
• Совместимость и безопасность применения. Если пользователь отключил JavaScript или использует старый браузер, он будет перенаправлен прямо на само изображение или на дополнительную HTML-страницу.

Подключение

Для использования Highslide на своих веб-страницах будет достаточно базовых знаний использования HTML и CSS. Из загруженного архива распаковываем папку highslide на веб-сервер. На веб-странице необходимо указать размещение скрипта, таблиц стилей и необходимые настройки внешнего вида всплывающих окон. В самом архиве отсутствует файл таблицы стилей, но, я думаю, не составит никакого труда "раздобыть" его на все том же highslide.com или, при желании, создать свой собственный CSS. Уточню, что в загружаемом архиве находится несколько вариантов скрипта "движка" HighSlide, отличающихся составом входящих в него компонентов. Для демонстрации разнообразных возможностей я буду использовать наиболее полный (и, соответственно, имеющий самый большой размер) вариант — highslide-full.js. А к разговору, какой вариант скрипта выбрать, мы еще вернемся, но чуть позже.

Итак, указываем необходимые данные:

Напоминаю, что тег script можно размещать как в заголовке, так и в теле HTML-документа, но тег link обязательно должен быть размещен внутри контейнера head:

Простейший способ разметки уменьшенных эскизов изображений - это размещение тэгов гиперссылки a вокруг тэга изображения img. Тэг a должен иметь верные атрибуты class и onclick, как показано ниже. Только в этом случае, если выполнение скриптов запрещено в браузере пользователя, он будет перенаправлен непосредственно к самому изображению.

Результат на странице выглядит вот так:

При щелчке мышью по миниатюре, изображение откроется во всплывающем окне в полном размере, а блок с миниатюрой будет „изъят” с веб-страницы (конечно, если в Вашем браузере разрешен JavaScript). Увеличенное изображение можно „перетаскивать” с помощью мыши, при этом вы можете также прокручивать саму страницу. Повторный щелчок на изображении закрывает его, и страница отображается как обычно.

Вышеприведенный пример - пожалуй, наиболее простое использование HighSlide JS, имеющего массу возможностей отображения контента. Вы можете изменять свойства всплывающего окна, выводить в окно заголовки, целые веб-документы, динамическое содержимое использующее AJAX, Flash-анимацию и пр. Ниже будет рассказано (и показано) о некоторых из таких возможностей HighSlide JS.

Размещение текста и заголовков миниатюр

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

Сделать это можно несколькими способами:

1. Извлечение текста из атрибутов alt и title тэгов a и img с помощью функций hs.captionEval (для заголовка сверху изображения) и hs.headingEval (для текста внизу изображения). Для этого размещаем в коде страницы такой Java-скрипт:

   <script type="text/javascript">
     hs.captionEval = 'this.thumb.alt';
     hs.headingEval = 'this.thumb.title';
   </script>

   Можно использовать как оба параметра одновременно, так и каждый по отдельности. Значения для hs.captionEval и hs.headingEval могут быть следующими -

   • this.thumb.alt - ссылка на атрибут alt тэга img
   • this.thumb.title - ссылка на атрибут title тэга img
   • this.a.title - ссылка на атрибут title открывающего тэга a
   Пример кода для вывода изображения с заголовком и текстом снизу изображения:
   <a class="highslide" href="full.jpg" onclick="return hs.expand(this)">
     <img src="thumb.jpg" alt="Этот текст будет расположен под изображением" title="Этот текст будет использоваться в качестве заголовка"> </a>

   Неудобство (точнее, негибкость) такого подхода в том, что область действия этой конструкции распространяется на всю страницу. Если тэги a или img, использующие HighSlide JS будут иметь атрибуты alt или title, их значения будут "принудительно" выведены в качестве заголовка или текста всплывающих окон, что не всегда желательно.

2. Использование для вывода текста функций hs.captionText и hs.headingText

   <a class="highslide" href="full.jpg" onclick="return hs.expand(this, { headingText: 'Текст заголовка' } )">
     <img src="thumb.jpg" alt=""></a>
   
   
   
   
   
   <a class="highslide" href="full.jpg" onclick="return hs.expand(this, { captionText: 'Текст снизу изображения' } )">
     <img src="thumb.jpg" alt=""></a>
   
   
   

3. Разместить на веб-странице скрытый div-элемент, содержащий текст. Он должен быть расположен сразу за закрывающим тэгом </a> миниатюры изображения и иметь имя класса highslide-caption для текста описания и highslide-heading для текста заголовка соответственно.

   <a id="thumb1" href="large-image.jpg" class="highslide"
           onclick="return hs.expand(this)">
       <img src="thumbnail.jpg" alt="Highslide JS" title="Click to enlarge"
           height="100" width="100" />
   </a>
   <div class='highslide-caption'>
       Расположите описание или дополнительный HTML здесь
   </div>

   В браузере это будет выглядеть вот так:

   

4. Применение функций hs.captionId и hs.headingId. Для этого необходимо в заголовке страницы разместить скрипт

   <script type="text/javascript">
     hs.captionId = 'the-caption';
   </script>

   а на странице разместить div-элемент

   <div class="highslide-caption" id="the-caption">
     Текст подписи
   </div>

   div с текстом можно размещать в любом месте веб-страницы. Следует учесть, что применение hs.captionId и hs.headingId распространяет свое действие на веб-страницу целиком. Поэтому он наиболее удобен, если необходимо задать одинаковый текст подписи или заголовков для всех изображений.

Помимо пользовательского HTML-кода, в текстовых блоках можно размещать и HTML, относящийся к функциональности самого HighSlide JS. Примеры кода таких ссылок (их назначение будет понятно из текста самой ссылки):

Вот результат в браузере:

Позиционирование

Внимательный читатель, вероятно, уже заметил, что все вышеприведенные изображения открываются по центру колонки, в которой размещен текст, и по центру в вертикальном направлении, если это позволяет текущее положение миниатюры в окне браузера. Такое поведение разворачиваемого с помощью highslide содержимого ссылок задается по умолчанию. Но разработчик страницы может изменить позиционирование открываемых объектов. Для этого используется несколько методов.

1. Использование параметра выравнивания hs.anchor. Если его значение не задано или установлено в 'auto', содержимое ссылки будет разворачиваться одинаково во всех направлениях, если это возможно. При достижении границы окна браузера клиента содержимое будет перемещено в соответствующем направлении или расширится рабочая область окна браузера. Разработчик веб-страницы может изменить значение hs.anchor на 'top', 'top right', 'right', 'bottom right', 'bottom', 'bottom left', 'left' или 'top left'. Для применения определенного выравнивания ко всей странице необходимо указать это в заголовке страницы:

   <script type="text/javascript">
     hs.anchor = 'left';
   </script>

   Если выравнивание необходимо задать для отдельных ссылок, для них используется следующий код:

   <a class="highslide" href="full1.jpg" onclick="return hs.expand(this, { anchor: 'top left' })">
     <img src="thumb1.jpg" alt="">
   </a>

   Примеры выравнивания:

   по верхнему правому углу	по нижнему левому углу

2. Использование параметра выравнивания hs.align. Возможные значения — 'auto' (содержимое ссылки разворачивается во всех направлениях от ее центра, если это возможно) и 'center' (в этом случае содержимое ссылки центрируется в клиенте браузера). Применение такое же, как и у предыдущего параметра. Для страницы целиком:

   <script type="text/javascript">
     hs.align = 'center';
   </script>

   Для отдельных элементов:

   <a class="highslide" href="full1.jpg" onclick="return hs.expand(this, { align: 'center' })">
     <img src="thumb1.jpg" alt="">
   </a>

   Остается лишь отметить, что параметр hs.align перезаписывает значение hs.anchor, если оно задано, и реализован не во всех вариантах скрипта Highslide JS.

3. Использование параметра hs.margin. Позволяет задать фиксированный размер отступа разворачиваемого контента от соответствующих границ браузера в пикселах. Возможно задать значения для hs.marginLeft, hs.marginTop, hs.marginRight, hs.marginBottom. Применение весьма полезно в случае, если вам необходимо, чтобы разворачиваемое с помощью HighSlide содержимое не перекрывало, например, элементы навигации страницы. Допустим, что на странице слева расположено меню шириной 200px и мы хотим, чтобы оно оставалось видимым при открытии ссылки:

   <script type="text/javascript">
     hs.marginLeft = 230;
   </script>

4. Для позиционирования абсолютно точно, используется параметр hs.target. С его помощью можно привязать верхний левый угол разворачиваемого контента к любому элементу страницы, имеющему идентификатор id. Используя стандартные способы HTML или CSS, вы размещаете этот элемент там, где необходимо, а затем указываете параметры hs.targetX и hs.targetY для задания положения относительно него. Небольшой пример. Создаем на странице элемент:

   <div id="baza">
     [...]
   </div>

   Для примера я специально сделаю видимым его границы:

   Это блок с id="baza",
   относительно которого будут показаны
   примеры абсолютного позиционирования

   Допустим, мы хотим, чтобы ссылка была открыта точно над этим блоком. Для этого пишем такой код:

   <a class="highslide" href="full1.jpg"
     onclick="return hs.expand(this,{ targetX: 'baza', targetY: 'baza' })">
      <img src="thumb1.jpg" alt=""/>
   </a>

   Проверяем:

   

   Теперь сместим разворачиваемое содержимое на 50px вправо (то есть на 50px по оси X) и на 80px вверх (то есть на -80px по оси Y) относительно блока 'baza':

   <a class="highslide" href="full1.jpg"
     onclick="return hs.expand(this,
     { targetX: 'baza 50px', targetY: 'baza -80px'})">
      <img src="thumb1.jpg" alt=""/>
   </a>

   Смотрим (можете взять линейку):

   

   Для "отвязки" от элемента по одной из осей можно вместо величины в px использовать значение null. Точно так же, как и вышеприведенные параметры позиционирования, hs.target можно применять ко всей странице целиком. Учтите, что параметр hs.target перекрывает установленные значения hs.align и hs.anchor.

Использование клиентской карты-изображения

Достаточно интересного эффекта, добавляющего "интерактивности" на страницу, можно добиться, сочетая применение highslide совместно с активными областями для карт-изображений. Тэг img, определяющий изображение, может содержать параметр usemap. Этот параметр указывает на контейнер map, в котором задаются невидимые области, расположенные на изображении. Щелчок мышью над такой областью перенаправляет браузер по ссылке, определенной для этой области.

Например, вставим на страницу изображение с тремя прямоугольными областями, содержащими ссылки на другие изображения:

Для наглядности я специально выделил границы областей на изображении. Попробуйте "пощелкать" пример:

Как видите, щелчок над различными областями открывает разные изображения.

Вывод HTML и AJAX

Выше уже говорилось о том, что с помощью highslide можно выводить не только изображения, но и другие типы объектов. Я покажу использование скрипта для вывода статического и обновляемого html-кода в разворачиваемое окно.

В принципе, вывод html ничем не отличается от вывода заголовка и текста для изображения, примеры которых мы рассмотрели. На странице определяется блок div, в который вставляется необходимый html-код, а его вывод осуществляется функцией hs.htmlExpand, в качестве параметра которой передается идентификатор блока:

"Живьем" это выглядит так:

Важное отличие вывода AJAX-контента в том, что его содержимое не размещается заранее на веб-странице, а запрашивается у сервера, когда пользователь щелкает по ссылке. В качестве примера я приведу вывод данных монитора показаний датчиков с моего сервера, которые обновляются каждую минуту. Это код:

А это - результат:

Хотя, конечно, тут я слукавил. Для вывода "красивого" окошка я немного усложнил код для изменения внешнего вида самого разворачиваемого окна и его панели управляющих элементов. Кроме дополнительных параметров, передаваемых функции разворачивания окна, на страницу был добавлен еще один блок div, который является макетом для вывода содержимого. Полностью код выглядит так:

Превращение ссылок элементов управления в графику производится присваиванием класса controlbar5, а его оформление задается в файле css (стиль controlbar5 описан в "стандартном" css-файле highslide). Правда, пришлось долго выяснять, почему в горячо любимом IE, в отличие от других браузеров, графические ссылки элементов управления окном переставали работать. Решить эту проблему в используемой мной версии highslide - 4.0.5 удалось лишь отключением вывода ссылки на страницу разработчика (строка showCredits : false, в скрипте, разработчик это не запрещает).

Вот еще пример "украшательства" с использованием графических элементов управления и эффектом затенения фона:

и код для него:

Заканчивая этот небольшой обзор, хочу обратить внимание на еще одну важную вещь. На сайте разработчика присутствует конфигуратор Highslide. Этот инструмент позволяет выбрать и загрузить лишь те компоненты скрипта, которые действительно вам понадобятся, исключая ненужные функции. Благодаря этой возможности вы сможете использовать наиболее компактный вариант скрипта, уменьшая время его загрузки и исполнения в браузере клиента. Также на сайте находится полная справочная информация (на английском языке, конечно же) по работе со скриптом и оформлением css-файлов для highslide.

На этом, пожалуй, я и закончу обзор этого замечательного, достаточно простого в применении и бесплатного (повторюсь - бесплатного лишь для случаев некоммерческого его использования) инструмента - Highslide JS.