Доброго времени суток уважаемые пользователи и гости!
Сегодня разберем библиотеку highslide, которую можно использовать как слайд шоу для показа скриншотов на сайте или просто как галерею изображений.
Для того чтобы подключить эту библиотеку необходимо скачать прилагаемый файл и загрузить его на сервер. Вы можете переименовать папку по своему усмотрению.
1 .В редакторе страниц сайта между тегами head подключаем скрипт библиотеки.
Код
<script type="text/javascript" src="/highslide/highslide-with-gallery.js"></script>
сразу после добавляем
Код
<script type="text/javascript">
hs.addSlideshow({
// slideshowGroup: 'group1',
interval: 3000,
repeat: false,
useControls: true,
fixedControls: true,
overlayOptions: {
opacity: .6,
position: 'bottom center',
hideOnMouseOut: true
},
thumbstrip: {
position: 'top center',
mode: "horizontal"
}
});
// Optional: a crossfade transition looks good with the slideshow
hs.wrapperclassname = 'borderless';
hs.outlinetype = 'rounded-white';
hs.graphicsDir = '/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'glossy-dark';
hs.wrapperClassName = 'dark';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.90;
hs.numberPosition = 'caption';
</script>
Далее нужно подключить стили
Код
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
Установка завершена.
2. Теперь будем выводить галерею на страницу материала и комментариев.
HTML такого типа ставим в то место где хотите видеть галерею
Код
<a href="http://ваша картинка" class="highslide" onclick="return hs.expand(this,{align: 'center'})"><img src="http://ваша картинка" width="220" height="120"/></a>
PS: Размер миниатюры скриншота - width="220" height="120" здесь меняем как угодно вам.
49
