Регистрация

Новости Бизнеса. Добро пожаловать на Бизнес Шабаш.
Вход через социальные сети
RSS лента

Chief

CMS Slideshow Widget

Оценить эту запись
4 Комментарии
Chief
31.10.2011 в 07:56 (86375 Просмотров)
Просмотр слайдов на вашем форуме. Установка, подробная инструкция.
Живое Демо

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
Текущее время: 13:58. Часовой пояс GMT.
Авторское право © 2025 vBulletin Solutions, Inc.
Все права защищены. Перевод: zCarot