Главная » Javascript » Используем галереи Highslide на своем сайте.

Используем галереи 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 и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru