Highslide JS - это open source просмотрщик на JavaScript для текста, изображений, видео и галлерей. Highslide легко вставить на любой сайт или блог. Вот несколько преимуществ этого инструмента:
- Быстрый и элегантный просмотр.
- Не нужны plugins как Flash или Java.
- Popup-блокировщики - не проблема. Контент открывается внутри активного окна.
- Достаточно одного щелчка мыши. После открытия изображения или HTML окна, пользователь может прокрутить информацию вниз или покинуть страницу не закрывая её.
- Множество настроек, которые просты в применении. Маленький размер исходного файла.
- Бесплатная поддержка как для платных так и для бесплатных пользователей.
- Если у человека отключен JavaScript или он пользуется старым браузером, то его автоматически перенаправят к самому изображению или нужной HTML-странице.
Шаг 1:
Перейдите в настройки блога: "Дизайн" > "Изменить html".Скопируйте этот код и вставьте его после тега <head>.
<script src="http://colorsandrej.narod2.ru/scripts/highslide-with-html.js" type="text/javascript"></script><script charset="utf-8" src="http://colorsandrej.narod2.ru/scripts/highslide.config.js" type="text/javascript"></script>
<script type="text/javascript">
hs.graphicsDir='http://highslide.com/highslide/graphics/'
</script>
Шаг 2:
В этом шаге я вставляю сам контент на нужной мне странице. В моем случае это текст и видео с ВКонтакте.Создаем новое сообщение > Отправка > Новое сообщение.
//ниже прописан код Highslide-виджета; вся информация, которая будет отображаться в виджете заключается в теги div; в моем случае ссылка, при нажатии на которую открывается Highslide-окно, это "Серия 1", в вашем случае это может быть любой нужный для вас текст или слово. <div> <a href="http://www.blogger.com/rearrange?blogID=5988361672553280428&action=editWidget§ionId=main&widgetType=null&widgetId=HTML1#" onclick="return hs.htmlExpand(this, { width: 620, headingText: 'Для IE - нажмите клавишу Esc', wrapperClassName: 'titlebar' } )">Серия 1</a> В этой серии Беар Гриллc выбирается из горящего автомобиля и спасает другого водителя, а затем вытаскивает из воды двух человек. // и далее вставляется код самого контента, который вы хотите показать в Highslide-окне; вмоем случае это видео с ВКонтакте, у васэтоможет быть текст, фото, видео, что пожелаете. <div class="highslide-maincontent"> <iframe frameborder="0" height="360" src="http://vkontakte.ru/video_ext.php?oid=7669799&id=150683173&hash=73d8c28021d31ba6&hd=1" width="607"></iframe></div> </div>
Итог того, что получилось можно посмотреть здесь.
Ниже приведена видеоинструкция с англоязычного сайта-источника.
Ссылки скриптов я нашел сам, но их можно взять также непосредственно на сайте highslide.
Если вы хотите дополнить эту статью или вам нужна помощь, комментируйте.
Здравствуйте Андрей.
ОтветитьУдалитьЯ бы рекомендовал своим читателям парковать скрипты на своем хостинге. Тем самым не подставлять свой ресурс в зависимость от чужого хоста.
Р.С. хорошо что посмотрел этот пост, а то хотел перекладывать скрипты на хосте.
С Уважением. Дмитрий.(nadimmir)
Здравствуйте, Дмитрий
ОтветитьУдалитьСпасибо за рекомендацию, вы правы. Я сам пользуюсь вашим скриптом, пора уже мне разместить скрипты на своем хосте.
Андрей, разъясните пожалуйста шаг2, что необходимо прописывать в коде, где его ставить и какую функцию они несут. Заранее благодарен.
ОтветитьУдалитьd@n, в коде прописываете путь к скриптам в тегах head /head.
ОтветитьУдалитьА потом в том месте, где должна быть ссылка с всплывающем окне, вставляете полностью мой код. В нем меняете ссылку на видео и все.
Это не работает, если ссылки на изображение создаются службой Blogger.
ОтветитьУдалитьНапример:
http://lh3.ggpht.com/-Ot8I14XKwbw/TpGlkXu881I/AAAAAAAAAjQ/MDkaBSnw6Qw/IMG_9989_lw_thumb%25255B2%25255D.jpg?imgmax=800
Возможно, я уже давно не проверял этот скрипт.
ОтветитьУдалить