Chief

CMS Slideshow Widget

Оценить эту запись

Chief

31.10.2011 в 06:56 (57048 Просмотров)

Просмотр слайдов на вашем форуме. Установка, подробная инструкция.
Живое Демо

1. Скачать и распаковать архив "slideshow.zip"
Важно! Отредактировать файл "style.css" (в папке CSS) и изменить все "http://www.yourvBulletinsiteurl.com" на URL вашего форума.

2. Загрузить папку"Slideshow" в корневую директорию вашего форума через FTP.

3. В панели администратора - > Стили и шаблоны - > Управление стилями- > Ваш стиль - > вкладка "Добавить новый шаблон"
Заголовок:
Код:
vbcms_slideshow
Шаблон:
Код:
<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!

Метки: cms, slideshow, widget

Категории: Без категории

« Пред. Главная страница След. »

Дополнение
Для динамического виджета. Способ выдергивать слайды из определенных категорий CMS

1. В панели администратора - > Продукты и модули - > Добавить новый модуль
Продукт: vBulletin
Местоположение модуля: vbcms_section_populate_start (vBulletin CMS)
Заголовок: Slideshow
Порядок выполнения: 5
Код PHP модуля:
Код:
$nivo_slider = vB::$db->query_read(" 
        SELECT
             ca.contentid,
             cn.url,
             cn.publishdate,
             cn.nodeid,
             ca.previewimage,
             cni.description,
             cni.title
         FROM
             " . TABLE_PREFIX . "cms_nodecategory cnc
         JOIN
             " . TABLE_PREFIX . "cms_node cn
         ON
             cnc.nodeid = cn.nodeid
         JOIN
             " . TABLE_PREFIX . "cms_article ca
         ON
             cn.contentid = ca.contentid
         JOIN
             " . TABLE_PREFIX . "cms_nodeinfo cni
         ON
             cn.nodeid = cni.nodeid
         WHERE
             cnc.categoryid = 53
         AND
             cn.setpublish = 1
         AND
             UNIX_TIMESTAMP() > cn.publishdate
         ORDER BY
             cn.publishdate desc LIMIT 5
                    "); 
       $list = mysql_num_rows($nivo_slider);
     if ($list == 0) {
         echo "$list Results";
     } else {
               while($rows = mysql_fetch_array($nivo_slider)) {
 
$nivooutput .='<a href="content.php?r='.$rows[nodeid].'"><img src="'.$rows[previewimage].'" title="'.$rows[title].'" /></a>';

              } 
        } 

/* register variables */
 vB_Template::preRegister('vbcms_slideshow',array('nivooutput' => $nivooutput));
Модуль включен: Да

Важно! Изменить в строке cnc.categoryid = 53, на ваш ID нужной категории. У нас, например, номер категории новостей 7, определено методом научного тыка.

2. В панели администратора - > Стили и шаблоны - > Управление стилями- > Ваш стиль - > Редактировать шаблоны - > vbcms_slideshow
Вспоминаем где у нас был сохранен шаблон (шаблон будет сохранен в группе "шаблоны vBulletin CMS")
Заменяем все содержимое на
Код:
<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">
 $nivooutput
            </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 thumbscaption
       Opacity: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 вашего форума.

Congrats!

and20120201 - 19.02.2012 14:51
javascript слайдер шоу (javascript slideshow slider show)
Увидеть пример и код можно тут:
http://www.tool-bar.ru/slidershow/

http://www.tool-bar.ru/slidershow/

-слайдшоу изображений из заданой папки (изображения одного размера)
-контролирующие кнопки "вперед" "назад" "стоп/старт"
-эффект затухания
-картинки должны быть кликабельными (линк на любую указаную ссылку)
-быстрый переход на любое изображение
-работаспособность в браузерах (опера, мозила, IE, хром)

Постарался анимационным гифом изобразить результат
http://www.tool-bar.ru/slidershow/js_slider_show.gif
Chief - 19.02.2012 14:57
Спасибо, очень даже не плохо.
and20120201 - 19.02.2012 15:04
буду рад, если кому-то пригодится мой скритп