Автор Тема: ParallaxContentSlider для Shop-Script LegoSP 6  (Прочитано 8974 раз)

Оффлайн lugobor

  • Пользователь
  • **
  • Сообщений: 83
    • Просмотр профиля
    • Студия web дизайна Lugobor
ParallaxContentSlider для Shop-Script LegoSP 6
« : Марта 12, 2013, 03:46:49 pm »
Пример скрипта тут http://tympanus.net/Development/ParallaxContentSlider/

Архив тут http://lugobor.org.ua/users/files/download26.html


Скопируйте содержимое папок в аналогичные папки вашей темы оформления


ВНИМАНИЕ!!! Если при копировании предложат заменить, значит стоит отказаться и посмотреть на наличие одноименных файлов!


В ваш_сайт/css/ваша_тема/theme/head.tpl.html
прерд тегом </head> добавить

<!--Слайдер-->
<link rel="stylesheet" type="text/css" href="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/stylesheet/demo.css" />
<link rel="stylesheet" type="text/css" href="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/stylesheet/style.css" />
<script type="text/javascript" src="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/javascript/modernizr.custom.28468.js"></script>
        <noscript>
            <link rel="stylesheet" type="text/css" href="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/stylesheet/nojs.css" />
        </noscript>

В ваш_сайт/css/ваша_тема/theme/index.tpl.html
перед тегом </body> добавить

<!--Слайдер-->
        <script type="text/javascript" src="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/javascript/jquery.cslider.js"></script>
        <script type="text/javascript">
            $(function() {
           
                $('#da-slider').cslider();
           
            });
        </script>

В нужное вам место вывести слайдер кодом

<div id="da-slider" class="da-slider">
                <div class="da-slide">
                    <h2>Заголовок 1</h2>
                    <p>описание 1</p>
                    <a href="#" class="da-link">Подробнее...</a>
                    <div class="da-img"><img src="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/images/1.jpg" alt="Альт)))" /></div>
                </div>
                <div class="da-slide">
                    <h2>Заголовок 2</h2>
                    <p>описание 2</p>
                    <a href="#" class="da-link">Подробнее...</a>
                    <div class="da-img"><img src="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/images/2.jpg" alt="Альт)))" /></div>
                </div>
                <div class="da-slide">
                    <h2>Заголовок 2</h2>
                    <p>описание 3</p>
                    <a href="#" class="da-link">Подробнее...</a>
                    <div class="da-img"><img src="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/images/3.jpg" alt="Альт)))" /></div>
                </div>               
                <nav class="da-arrows">
                    <span class="da-arrows-prev"></span>
                    <span class="da-arrows-next"></span>
                </nav>
            </div>

вот пожалуй и все...

Стиль подогнал под картинки 390х390, это, цвет шрифта, фон, кнопочки меняются в style.css
« Последнее редактирование: Марта 12, 2013, 11:41:37 pm от lugobor »
Студия web дизайна http://lugobor.ru