[Ищу] Слайд шоу для DLE

Тема в разделе "DataLife Engine", создана пользователем dwm, 9 фев 2014.

  1. dwm

    dwm

    Регистрация:
    31 окт 2012
    Сообщения:
    134
    Симпатии:
    14
    Уважаемые форумчане. Срочно нужен слайд шоу для DLE. Желательно для 10.1
    Желательно, чтобы еще из админки редактировался... желательно, но не обязательно.
     
  2. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.349
    Симпатии:
    1.380
    Могу тебе предложить, только то, что ты сам найдёшь в гугле :Smile:
     
    Dima738 нравится это.
  3. dwm

    dwm

    Регистрация:
    31 окт 2012
    Сообщения:
    134
    Симпатии:
    14
    Спасибо. Воистину неоценимая помощь :smile:
    Подожду еще вариантов.
     
  4. aleksin74

    aleksin74

    Регистрация:
    4 ноя 2012
    Сообщения:
    143
    Симпатии:
    266
    [​IMG]
    делаете шаблон slider.tpl с кодом
    Код:
    <div class="slides">
        <ul> <!-- Слайды -->
            <li><img src="{THEME}/images/slider/1.jpg" alt="image01" />
                <div>Описание #1</div>
            </li>
            <li><img src="{THEME}/images/slider/2.jpg" alt="image02" />
                <div>Описание #2</div>
            </li>
            <li><img src="{THEME}/images/slider/3.jpg" alt="image03" />
                <div>Описание #3</div>
            </li>
            <li><img src="{THEME}/images/slider/2.jpg" alt="image03" />
                <div>Описание #4</div>
            </li>
           
        </ul>
    </div>
    в стили шаблона добавляете
    Код:
    /* Slider */
    .slides {
        height:300px;
        margin-bottom: 10px;
        overflow:hidden;
        position:relative;
        width: 1000px;
    }
    .slides ul {
        list-style:none;
        position:relative;
    }
    
    /* Кадры анимации #anim_slides */
    @-webkit-keyframes anim_slides {
        0% {
            opacity:0;
        }
        6% {
            opacity:1;
        }
        24% {
            opacity:1;
        }
        30% {
            opacity:0;
        }
        100% {
            opacity:0;
        }
    }
    @-moz-keyframes anim_slides {
        0% {
            opacity:0;
        }
        6% {
            opacity:1;
        }
        24% {
            opacity:1;
        }
        30% {
            opacity:0;
        }
        100% {
            opacity:0;
        }
    }
    
    .slides ul li {
        opacity:0;
        position:absolute;
        top:0;
    
        /* анимация css3 */
        -webkit-animation-name: anim_slides;
        -webkit-animation-duration: 24.0s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: normal;
        -webkit-animation-delay: 0;
        -webkit-animation-play-state: running;
        -webkit-animation-fill-mode: forwards;
    
        -moz-animation-name: anim_slides;
        -moz-animation-duration: 24.0s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
        -moz-animation-direction: normal;
        -moz-animation-delay: 0;
        -moz-animation-play-state: running;
        -moz-animation-fill-mode: forwards;
    }
    
    /* Задержки css3 */
    .slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
        -webkit-animation-delay: 6.0s;
        -moz-animation-delay: 6.0s;
    }
    .slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
        -webkit-animation-delay: 12.0s;
        -moz-animation-delay: 12.0s;
    }
    .slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
        -webkit-animation-delay: 18.0s;
        -moz-animation-delay: 18.0s;
    }
    .slides ul li img {
        display:block;
    }
    
    /* Кадры анимации #anim_titles */
    @-webkit-keyframes anim_titles {
        0% {
            left:100%;
            opacity:0;
        }
        5% {
            left:10%;
            opacity:1;
        }
        20% {
            left:10%;
            opacity:1;
        }
        25% {
            left:100%;
            opacity:0;
        }
        100% {
            left:100%;
            opacity:0;
        }
    }
    @-moz-keyframes anim_titles {
        0% {
            left:100%;
            opacity:0;
        }
        5% {
            left:10%;
            opacity:1;
        }
        20% {
            left:10%;
            opacity:1;
        }
        25% {
            left:100%;
            opacity:0;
        }
        100% {
            left:100%;
            opacity:0;
        }
    }
    
    .slides ul li div {
        background-color: rgba(252, 8, 8, 0.48);
        color:#FFFFFF;
        font-size:26px;
        margin:0 auto;
        padding:20px;
        position:absolute;
        top: 200px;
        width: 350px;
    
        /* Анимация css3 */
        -webkit-animation-name: anim_titles;
        -webkit-animation-duration: 24.0s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: normal;
        -webkit-animation-delay: 0;
        -webkit-animation-play-state: running;
        -webkit-animation-fill-mode: forwards;
    
        -moz-animation-name: anim_titles;
        -moz-animation-duration: 24.0s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
        -moz-animation-direction: normal;
        -moz-animation-delay: 0;
        -moz-animation-play-state: running;
        -moz-animation-fill-mode: forwards;
    }
    в шаблоне в нужном месте вставляете {include file="slider.tpl"}
    всё, и никаких джава и прочей х***ни
     
  5. blazer-05

    blazer-05

    Регистрация:
    9 фев 2013
    Сообщения:
    14
    Симпатии:
    1
    Ну это выводит картинки из определенного каталога, а если нужно рандомно из категорий или только к примеру 10 последних добавленных новостей?
     
    dwm нравится это.
  6. aleksin74

    aleksin74

    Регистрация:
    4 ноя 2012
    Сообщения:
    143
    Симпатии:
    266
    тогда так.. в файл main.tpl в нужное место добавить {custom category="1" template="slider" aviable="main" from="0" limit="10" cache="no"}
    и создать шаблон slider.tpl с кодом
    Код:
    <div class="slider-item">
        <img src="{image-1}" alt="{title}" />
        <div class="slider-item-content">
            <h2>{title}</h2>
            <div class="slider-item-text">
                {short-story limit="250"}
            </div>
            <a href="{full-link}" class="slider-more">подробнее</a> <div class="slider-price">[xfvalue_sale]</div>
        </div>
    </div>
    (для примера показал, как вывести описание и дополнительное поле)
    [​IMG]
    ну и собственно запилить стили под слайдер...
    У себя в шаблоне слайдера сделал так <img src="{image-2}" alt="{title}" /> , что бы выводил вторую картинку, так как первая идет в короткую новость превьюшкой и сжимается, до определенных размеров, а вторую картинку запихиваю в самый конец краткой новости не сжатой, что бы потом на слайдере не растягивало....ну или делаю ей размер по ширине слайдера
     
    Последнее редактирование: 13 фев 2014
    CluBDeveloper нравится это.
  7. blazer-05

    blazer-05

    Регистрация:
    9 фев 2013
    Сообщения:
    14
    Симпатии:
    1
    тоже если я правильно понял, то это берется из 1 категории а если категорий 20 штук, то как тогда через , указывать?
    Код:
    {custom category="1,2,3" template="slider" aviable="main" from="0" limit="10" cache="no"}
     
  8. aleksin74

    aleksin74

    Регистрация:
    4 ноя 2012
    Сообщения:
    143
    Симпатии:
    266
    да, через запятую.. или можно попробывать допустим 1-20.. хотя врядли
     
  9. bigzom

    bigzom

    Регистрация:
    4 фев 2015
    Сообщения:
    5
    Симпатии:
    0
    aleksin74, у меня аналогичная проблема с dle 10.1 сделал так как вы написали создал slider.tpl так же добавил стили, в нужном месте вставил
    {custom category="1,2,3" template="slider" aviable="main" from="0" limit="10" cache="no"}
    вот как отображается на моем учебном сайте , подскажите пожалуйста что не так сделал? Заранее спасибо!
     
  10. aleksin74

    aleksin74

    Регистрация:
    4 ноя 2012
    Сообщения:
    143
    Симпатии:
    266
    попробуйте вывести так {include file="slider.tpl"} что покажет
     
  11. bigzom

    bigzom

    Регистрация:
    4 фев 2015
    Сообщения:
    5
    Симпатии:
    0
    aleksin74,
    вывел
     
  12. aleksin74

    aleksin74

    Регистрация:
    4 ноя 2012
    Сообщения:
    143
    Симпатии:
    266
    я понял вас... во первых у вас не подключен джава для самого слайдера, во вторых уберите из шаблона слайдера <div class="slider-price">[xfvalue_sale]</div>
     
  13. bigzom

    bigzom

    Регистрация:
    4 фев 2015
    Сообщения:
    5
    Симпатии:
    0
    а как его подключить ?
    в main.tpl - есть такие строчки
    <script type="text/javascript" src="{THEME}/js/shareTT.js"></script>
    <script type="text/javascript" src="{THEME}/js/active.js"></script>
    - это не то?
     
  14. aleksin74

    aleksin74

    Регистрация:
    4 ноя 2012
    Сообщения:
    143
    Симпатии:
    266
  15. bigzom

    bigzom

    Регистрация:
    4 фев 2015
    Сообщения:
    5
    Симпатии:
    0
  16. aleksin74

    aleksin74

    Регистрация:
    4 ноя 2012
    Сообщения:
    143
    Симпатии:
    266
    bigzom нравится это.
  17. bigzom

    bigzom

    Регистрация:
    4 фев 2015
    Сообщения:
    5
    Симпатии:
    0
    я извиняюсь за может и тупые вопросы)) но что то я не могу понять , к примеру я выбрал этот слайд , но как из него сделать что бы новость выбиралась методом - {custom category="1,2,3" template="slider" aviable="main" from="0" limit="10" cache="no"} совместно с заголовком-ссылкой на полную новость
     
  18. aleksin74

    aleksin74

    Регистрация:
    4 ноя 2012
    Сообщения:
    143
    Симпатии:
    266
    код слайдера такой...
    <div id="slideshow">

    <ul class="slides">
    <li><img src="img/photos/1.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li>
    <li><img src="img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li>
    <li><img src="img/photos/3.jpg" width="620" height="320" alt="Power Station" /></li>
    <li><img src="img/photos/4.jpg" width="620" height="320" alt="Colors of Nature" /></li>
    </ul>

    <span class="arrow previous"></span>
    <span class="arrow next"></span>
    </div>

    вместо него сделать что типа этого...
    <div class="slider-item">
    <img src="{image-1}" alt="{title}" />
    <div class="slider-item-content">
    <h2>{title}</h2>
    <div class="slider-item-text">
    {short-story limit="250"}
    </div>
    <a href="{full-link}" class="slider-more">подробнее</a>
    </div>
    </div>

    могу реализовать... но сам понимаешь, не безвозмездно...
     
  19. ValeriusSoft

    ValeriusSoft

    Регистрация:
    4 фев 2015
    Сообщения:
    72
    Симпатии:
    29

    Добрый вечер

    ДЕМО http://tympanus.net/Development/Slicebox/index4.html

    Скачать http://tympanus.net/codrops/2012/10/22/slicebox-revised/