Доброго времени суток уважаемые пользователи и гости! Сегодня разберем библиотеку 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://ваша картинrа" class="highslide" onclick="return hs.expand(this,{align: 'center'})"><img src="http://ваша картинrа" width="220" height="120"/></a>
PS: Размер миниатюры скриншота - width="220" height="120" здесь меняем как угодно вам. работу скрипта можно посмотреть тут
Простая галерея скриншотов для сайта
Файл:
Зарегистрирован 📅 18-Янв-19 | ⏰ 20:04
Скачать
Статус: √ Проверено
Скачан/Смотрели: 270/666
Размер: 99.9 Kb
Оценка: 0.0
- Оценить -
Отлично
Хорошо
Неплохо
Плохо
Ужасно +0
Тэги:
Поделиться:
FAQ: