Изображения из альбомов, как слайдшоу в боковую панель (JQuery)
New Latest Album Pictures - Sidebar (by Hafner)
Установка:
New Latest Album Pictures - Sidebar (by Hafner)
Установка:
- распаковываем архив и заливаем папку на форум;
- импортируем продукт согласно Вашей кодировки;
- добавляем в таблицу стилей:
HTML:.slideshow { height: 232px; width: 232px; margin: 11px auto; } .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } #albumnav { text-align: center; } #albumnav a { color: #608A31; font-size: 9px; border: 1px solid #92C45B; background: #F3F7EE; text-decoration: none; margin: 0 3px; padding: 3px; } #albumnav a.activeSlide { border: 1px solid #466524; color: #FFFFFF; background: #608A31 } #albumnav a:focus { outline: none; }
- открываем шаблон headinclude и добавляем:
HTML:<script type="text/javascript" src="{vb:raw vboptions.bburl}/clientscript/jquery.js"></script> <script type="text/javascript" src="{vb:raw vboptions.bburl}/clientscript/jquery.cycle/jquery.cycle.min.js"></script>
- создаем новый шаблон block_slideshow следующего содержания:
HTML:<li> <div class="block smaller"> <div class="blocksubhead"> <a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a> <span class="blocktitle">{vb:raw blockinfo.title}</span> </div> <div id="block_html_{vb:raw blockinfo.blockid}" class="blockbody floatcontainer"> <div class="blockrow">{vb:raw content}{vb:raw template_hook.newpicture_album}</div> </div> </div> <div class="underblock"></div> </li>
- Создаем новый блок "Разделы и модераторы"->"Управление блоками форума":
- Тип содержимого: PHP
- Содержимое:
PHP:$content = ' <script type="text/javascript"> $(document).ready(function() { $(\'.slideshow\') .before(\'<div id="albumnav">\') .cycle({ fx: \'fade\', speed: 150, next: \'#s3\', pause: 1, pager: \'#albumnav\' }); }); </script> '; return $content;
- Использовать шаблон: block_slideshow
- При необходимости правим css под себя и задаем дополнительные параметры для отображения картинок. Подробный мануал с примерами тут:
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.