Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Используем галереи Highslide на своем сайте

Используем галереи Highslide на своем сайте

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

Долго и нудно расписывать все прелести скрипта не буду, так как лучше всего посмотреть примеры использования Highslide в живую:

Теперь давайте рассмотрим исходный код скрипта и научимся применять его у себя на сайте.

Для того чтобы всё это великолепие заработало, вам необходимо разместить файлы скрипта у себя на сервере и уже, непосредственно в документах html, прописать исполняемый , главное не забывайте в последствии правильно оформлять ссылки на .

И так, например, для получения эффекта увеличения изображения в блоке с белой рамкой в 10px и тенью, вам необходимо между тегами <head>...</head> вставить следующее:

<script type="text/javascript" src="*папка скриптов*/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="*папка скриптов*/highslide/highslide.css" />

Не забывайте прописывать правильный путь к файлу таблицы стилей, то есть указывайте папку highslide и сам файл .css

Дальше-проще, между тегами <head>...</head> прописываем следующий код:

1
2
3
4
<script type="text/javascript">
        hs.graphicsDir = '*папка скриптов*/highslide/graphics/';
        hs.wrapperClassName = 'wide-border';
</script>

Значение для параметра hs.graphicsDir, также очень важно прописать корректно.
Ну, и наконец, для достижения результата, нам остается оформить вывод изображения непосредственно на странице HTML.
Выглядеть это будет следующим образом:
В теле страницы, где вам необходимо, между тегами <body>...</body> вставляете следующую конструкцию:

<a href="images/full-image.jpg" class="highslide" onclick="return hs.expand(this)"><img src="..../images/thumbnail.jpg" alt="Highslide JS" title="Нажмите, чтобы увеличить" height="120" width="107" /></a>

Атрибут href ссылки определяет адрес полноразмерного изображения.
И последним штрихом будет вывод надписи на изображении, для этого непосредственно после кода на изображение, следует прописать:

<div class="highslide-caption">
   Тут следует сама подпись изображения.
</div>

Если в подписи нет необходимости, этот пункт можно пропустить.
На этом пожалуй и все, думаю вам понравится данный эффект, особых сложностей при его использовании возникнуть не должно. В следующий раз поговорим о других возможностях замечательного решения вывода изображений с помощью Highslide.js.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>