Регистрация

Новости Бизнеса. Добро пожаловать на Бизнес Шабаш.

Вход через социальные сети

RSS лента

Chief

CMS Slideshow Widget

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

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" в Google + Отправить "CMS Slideshow Widget" в Facebook Отправить "CMS Slideshow Widget" в Мой Мир Отправить "CMS Slideshow Widget" в Вконтакте Отправить "CMS Slideshow Widget" в Twitter Отправить "CMS Slideshow Widget" в ЖЖ

Метки: cms, slideshow, widget Добавить / редактировать метки
Категории
Без категории

Комментарии

  1. Аватар для Chief
    Дополнение
    Для динамического виджета. Способ выдергивать слайды из определенных категорий 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!
  2. Аватар для and20120201
    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

  3. Аватар для Chief
    Спасибо, очень даже не плохо.
  4. Аватар для and20120201
    буду рад, если кому-то пригодится мой скритп
Back to Top