Автор | Сообщение | |||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Доброго времени суток уважаемые пользователи и гости! Сегодня разберем библиотеку 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" здесь меняем как угодно вам. работу скрипта можно посмотреть тут
|
||||||||||||||||||||||||||
Быстрый ответ Простая галерея скриншотов для сайта |