Просмотр слайдов на вашем форуме. Установка, подробная инструкция.
Живое Демо
1. Скачать и распаковать архив "slideshow.zip"
Важно! Отредактировать файл "style.css" (в папке CSS) и изменить все "http://www.yourvBulletinsiteurl.com" на URL вашего форума.
2. Загрузить папку"Slideshow" в корневую директорию вашего форума через FTP.
3. В панели администратора - > Стили и шаблоны - > Управление стилями- > Ваш стиль - > вкладка "Добавить новый шаблон"
Заголовок:
Шаблон:
Код:
<html>
<head>
<title>vB Slideshow</title>
<link rel="stylesheet" href="http://www.yourvBulletinsiteurl.com/slideshow/css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.yourvBulletinsiteurl.com/slideshow/css/style.css" type="text/css" media="screen" />
</head>
<body style="margin:0px; padding:0px;">
<center>
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<a href="http://www.domain.com"><img src="http://www.image.com" title="Put a caption here."/></a>
<a href="http://www.domain.com"><img src="http://www.image.com" title="Put a caption here."/></a>
<a href="http://www.domain.com"><img src="http://www.image.com" title="Put a caption here."/></a>
<a href="http://www.domain.com"><img src="http://www.image.com" title="Put a caption here."/></a>
<a href="http://www.domain.com"><img src="http://www.image.com" title="Put a caption here."/></a>
</div>
</div>
<script type="text/javascript" src="http://www.yourvBulletinsiteurl.com/slideshow/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.yourvBulletinsiteurl.com/slideshow/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'slideInLeft', // Specify sets like: 'fold,fade,sliceDown'
animSpeed:250, // Slide transition speed
pauseTime:8000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:false, // Next & Prev navigation
directionNavHide:false, // Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
captionOpacity:1, // Universal caption opacity
keyboardNav:true, // Use left & right arrows
pauseOnHover:true, // Stop animation while hovering
});
});
</script>
</center>
</body>
</html>
- Важно! Изменить все "http://www.yourvBulletinsiteurl.com" на URL вашего форума.
- Важно! Изменить все "http://www.domain.com" на URL переадресации по клику на фото.
- Важно! Изменить все "http://www.image.com" на URL расположения фото.
Сохранить (шаблон будет сохранен в группе "шаблоны vBulletin CMS")
4. В панели администратора - > vBulletin CMS -> Виджеты -> Создать новый виджет
Тип виджета: Статичный HTML код
Заголовок: Slideshow
Сохранить
5. В панели администратора - > vBulletin CMS -> Виджеты -> Slideshow "Настройка"
Введите статичный HTML: slideshow
Название шаблона: vbcms_slideshow
Сохранить
6. В панели администратора - > vBulletin CMS -> Управление размещениями
На ваше усмотрение. Выбрать уже установленное Размещение и сетку, на Главной или в другом разделе. Или Добавить новое размещение.
В нашем случае создан новый раздел: vBulletin CMS -> Управление разделами -> Добавить новый раздел - Слайды - Сохранить.
В Управлении размещениями: новое размещение "Слайды" и выбрана для него сетка
Congrats!