Добавляем слайдер в XenForo 1.0

Hope · 4 Авг 2013

Пользователь Hope разместил новый ресурс:

Добавляем слайдер в XenForo - Слайдер для XenForo.

HTML:
Выполняя просьбу ЦукерОо , приведу пример, добавления слайдера в XenForo.(писатель из меня никакой, опишу как смогу)

Добавление будет происходить на примере,
У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация
.
1) Открываем файл index.html, в текстовом редакторе(например Notepad++), и видим такое содержимое:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <meta http-equiv="Content-Type"...

Узнать больше об этом ресурсе...

Rfs Finance · 28 Сен 2013

Суть в целом ясна!
Возможно знаете как :
изменить вариант смены изображений на fade, и задать скорость в милисекндахкак изменить положение точек навигации под стлайдером
где задать общий размер слайдера ширь/высь

Mirovinger · 28 Сен 2013

Непосредственно для этого слайдера.

Rfs Finance написал(а):
изменить вариант смены изображений на fade, и задать скорость в милисекндахкак

В jquery.nivo.slider.js в самом низу есть настройки:

Код:

    //Default settings
    $.fn.nivoSlider.defaults = {
        effect: 'random',
        slices: 15,
        boxCols: 8,
        boxRows: 4,
        animSpeed: 500,
        pauseTime: 3000,
        startSlide: 0,
        directionNav: true,
        directionNavHide: true,
        controlNav: true,
        controlNavThumbs: false,
        pauseOnHover: true,
        manualAdvance: false,
        prevText: 'Prev',
        nextText: 'Next',
        randomStart: false,
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){},
        lastSlide: function(){},
        afterLoad: function(){}
    };

Rfs Finance написал(а):
изменить положение точек навигации под стлайдером

В nivo-slider.css (ну или прямо в EXTRA.css, если содержимое nivo-slider.css уже добавлено туда ).

Rfs Finance написал(а):
где задать общий размер слайдера ширь/высь

Код:

/* The Nivo Slider styles */

.slider-wrapper {
    width: 80%;
    margin: 20px auto;
}

.theme-default #slider {
    margin:100px auto 0 auto;
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
    margin-top:150px;
}

Rfs Finance · 28 Сен 2013

Mirovinger написал(а):
Доходчиво! Спасибо

На прикрепленном файле зоны где можно разместить слайдер!
Вопрос:
Существует ли возможность встроить слайдер вместо Logo и в зону футера?

slava1973 · 18 Янв 2014

а в какой папке должен находится index.html. у меня они все пустые. я в этом деле турист , не сильно тапочками забрасываете.

Hope · 18 Янв 2014

В папке слайдера, где и лежат все его файлы...

Harvek · 29 Янв 2014

width: 80%; это ширина! А высота где? высоты нет(

Ltybcrf · 8 Янв 2015

Всем привет!
Пожалуйста помогите!
Вот скрин:

Вопрос:

1. Как убрать пустое пространство между СЛАЙДЕРОМ и Панелью навигации (очень большой отступ - некрасиво)!
2. Как добавить больше картинок???

спасибо за ответ.

Mirovinger · 8 Янв 2015

Что-то Вы сами не то сделали, на тестовом такого не наблюдал и не наблюдаю.

Ltybcrf · 8 Янв 2015

Встал хорошо без всяких проблем сразу с отступом!
Очень хочется убрать этот отступ ... но как не знаю вроде и руки прямые .. не знаю можно или нет вот ссылка посмотрите как некрасиво смотрится на сайте ixak.ru (если ссылки нельзя извините больше не буду)

помогите братцы заплачу пару соток рублей ..

Mirovinger · 8 Янв 2015

Можно доступ в админку, если да то отпишите в ЛС.
Хотя уже не нужно, говорите что не изменяли, но вот изменённое значение.

Код:

.theme-default #slider {
    margin: 100px auto 0;
}

найдите и приведите к такому виду.

Код:

.theme-default #slider {
    margin: 10px auto 0;
}

Ltybcrf · 18 Янв 2015

пробую поменять отпишусь по результату

Вы умничка!!! Спасибо Вам большое!!!
Ребята проблема решена !!!!
прошу закрыть топик.

Спасибо Вам!!! :thumbsup:

Добрый день!Как сделать чтоб слаидер отображался,только на главной странице?

Hope · 18 Янв 2015

Код:

<xen:if is="{$contentTemplate} == 'forum_list'">
<div id="wrapper">

        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="img/toystory.jpg" data-thumb="img/toystory.jpg" alt="" />
                <a href="http://bayguzin.ru/main/shriftyi/russkij-shriftyi/70-potryasayushhix-kirillicheskix-russkix-shriftov.html"><img src="img/up.jpg" data-thumb="img/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="img/walle.jpg" data-thumb="img/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="img/nemo.jpg" data-thumb="img/nemo.jpg" alt="" title="#htmlcaption" />
            </div>

        </div>

    </div>
</xen:if>

Ltybcrf · 18 Янв 2015

Спасибо огромное!Сеичас переделаю!

Dmitry · 18 Янв 2015

А если я добавил этот код в шаблон PAGE_CONTAINER в этот промежуток это считается или лучше советом выше?

Код:

<xen:if is="{$sidebar}">
                <div class="mainContainer">
                    <div class="mainContent">
                    <div id="wrapper">

        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="img/img1.jpg" data-thumb="img/img1.jpg" alt="" title="11111" />
                <a href="http://bayguzin.ru/main/shriftyi/russkij-shriftyi/70-potryasayushhix-kirillicheskix-russkix-shriftov.html"><img src="img/bdo.jpg" data-thumb="img/bdo.jpg" alt="" title="Проверка This is an example of a caption" /></a>
                <img src="img/img2.jpg" data-thumb="img/img2.jpg" alt="" data-transition="slideInLeft" title="222" />
                <img src="img/img3.jpg" data-thumb="img/img3.jpg" alt="" title="#htmlcaption" />
            </div>

        </div>

    </div>
                    </xen:if>

Mirovinger · 18 Янв 2015

Совет выше лучше, так что воспользуйтесь им.

demon-shi · 30 Июл 2015

А если в качестве главной страницы используется "articles/" Xenporta, то каким образом выводить слайдер только на главной?
Учитывая, что слайдер поставил в Page_Container.

Mirovinger · 31 Июл 2015

Пробуйте так, для XenPorta.

Код:

<xen:if is="{$contentTemplate} == 'EWRporta_Portal'">
<div id="wrapper">

        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="img/toystory.jpg" data-thumb="img/toystory.jpg" alt="" />
                <a href="http://bayguzin.ru/main/shriftyi/russkij-shriftyi/70-potryasayushhix-kirillicheskix-russkix-shriftov.html"><img src="img/up.jpg" data-thumb="img/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="img/walle.jpg" data-thumb="img/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="img/nemo.jpg" data-thumb="img/nemo.jpg" alt="" title="#htmlcaption" />
            </div>

        </div>

    </div>
</xen:if>

Пробуйте так, для XenPorta 2.

Код:

<xen:if is="{$contentTemplate} == 'EWRporta2_ArticleList'">
<div id="wrapper">

        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="img/toystory.jpg" data-thumb="img/toystory.jpg" alt="" />
                <a href="http://bayguzin.ru/main/shriftyi/russkij-shriftyi/70-potryasayushhix-kirillicheskix-russkix-shriftov.html"><img src="img/up.jpg" data-thumb="img/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="img/walle.jpg" data-thumb="img/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="img/nemo.jpg" data-thumb="img/nemo.jpg" alt="" title="#htmlcaption" />
            </div>

        </div>

    </div>
</xen:if>

demon-shi · 2 Авг 2015

Mirovinger, спасибо, все работает. Вот только на остальных страницах показывает, как на скриншоте...

upd: Был невнимателен, проблема решилась.
Нужно было в шаблоне page_container_js_body, поставить аналогичные условия вывода слайдера:

Код:

<xen:if is="{$contentTemplate} == 'EWRporta2_ArticleList'">
<!-- slider_add -->
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
<!--end_slider_add -->
</xen:if>

Brut · 10 Янв 2016

Извините,а можно для особо одаренных и не внимательных, какой код и куда нужно вписать,чтобы слайдер отображался только на главной странице форума. Спасибо.

Добавляем слайдер в XenForo 1.0

Hope

Rfs Finance

Mirovinger

Rfs Finance

Вложения

slava1973

Hope

Harvek

Ltybcrf

Mirovinger

Ltybcrf

Mirovinger

Ltybcrf

Hope

Ltybcrf

Dmitry

Mirovinger

demon-shi

Mirovinger

demon-shi

Вложения

Brut

Похожие темы

Мы ценим вашу конфиденциальность