Слайдер Для Темы Пластик
#1
Отправлено 25 Апрель 2014 - 17:29
Нашел слайдер http://originalip.ru/index.php?L=41
Перепробовал руководство из FAQ с storeland- запустить не получилось.
Как его запустить и расположить тут(как на картинке)? Подскажите пожалуйста чайнику
#2
Отправлено 25 Апрель 2014 - 20:45
kotaff (25 Апрель 2014 - 17:29) писал:
Нашел слайдер http://originalip.ru/index.php?L=41
Перепробовал руководство из FAQ с storeland- запустить не получилось.
Как его запустить и расположить тут(как на картинке)? Подскажите пожалуйста чайнику
На указанном сайте скачайте архив со слайдером.
Разархивируйте его, после этого в бек-офисе магазина в разделе "Сайт" - "Редактор шаблонов" загрузите такие файлы:
1). Из папки "js" файлы "jquery.windy.js" и "modernizr.custom.79639.js"
2). Из папки "css" файлы "noJS.css", "style1.css" и "windy.css"
3). Из папки Images файл "nav.png" и несколько картинок для примера из внутренней папки "demo1". Пусть это будут первые 5 изображений.
Далее в шаблоне HTML замените код
<!-- Скрипты которые не нужно менять, грузятся из папки общих файлов --> <!-- Это собранные в один файл скрипты из файлов: {FORALL_JS_PATH}jquery-1.4.2.min.js {FORALL_JS_PATH}jquery.nyroModal-1.6.2.min.js {FORALL_JS_PATH}jquery-ui-1.8.4.custom.min.js {FORALL_JS_PATH}jquery.validate.min.js {FORALL_JS_PATH}jquery.capslock.min.js {FORALL_JS_PATH}jquery.fancybox-1.3.4.pack.js --> <script type="text/javascript" src="{FORALL_JS_PATH}jquery-1.4.2_nyroModal-1.6.2_validate_capslock_jquery-ui-1.8.4.custom_fancybox-1.3.4.version2.min.js"></script>на такой
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- Скрипты которые не нужно менять, грузятся из папки общих файлов --> <!-- Это собранные в один файл скрипты из файлов: {FORALL_JS_PATH}jquery-1.4.2.min.js --> <script type="text/javascript" src="{FORALL_JS_PATH}jquery.nyroModal-1.6.2.min.js"></script> <script type="text/javascript" src="{FORALL_JS_PATH}jquery-ui-1.8.4.custom.min.js"></script> <script type="text/javascript" src="{FORALL_JS_PATH}jquery.validate.min.js"></script> <script type="text/javascript" src="{FORALL_JS_PATH}jquery.capslock.min.js"></script> <script type="text/javascript" src="{FORALL_JS_PATH}jquery.fancybox-1.3.4.pack.js"></script>
далее ПЕРЕД строкой
</head>вставьте такой код
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}windy.css" /> <link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}style1.css" /> <noscript><link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}noJS.css" /></noscript> <script type="text/javascript" src="{ASSETS_JS_PATH}modernizr.custom.79639.js"></script> <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.windy.js"></script>
и после строки
<div id="right">добавьте непосредственный код слайдера
<div class="windy-demo"> <ul id="wi-el" class="wi-container"> <li><img src="{ASSETS_IMAGES_PATH}1.jpg" alt="image1"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li> <li><img src="{ASSETS_IMAGES_PATH}2.jpg" alt="image2"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li> <li><img src="{ASSETS_IMAGES_PATH}3.jpg" alt="image3"/><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li> <li><img src="{ASSETS_IMAGES_PATH}4.jpg" alt="image4"/><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li> <li><img src="{ASSETS_IMAGES_PATH}5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li> </ul> <nav> <span id="nav-prev">Назад</span> <span id="nav-next">Вперед</span> </nav> </div> <script type="text/javascript"> $(function() { var $el = $( '#wi-el' ), windy = $el.windy(), allownavnext = false, allownavprev = false; $( '#nav-prev' ).on( 'mousedown', function( event ) { allownavprev = true; navprev(); } ).on( 'mouseup mouseleave', function( event ) { allownavprev = false; } ); $( '#nav-next' ).on( 'mousedown', function( event ) { allownavnext = true; navnext(); } ).on( 'mouseup mouseleave', function( event ) { allownavnext = false; } ); function navnext() { if( allownavnext ) { windy.next(); setTimeout( function() { navnext(); }, 150 ); } } function navprev() { if( allownavprev ) { windy.prev(); setTimeout( function() { navprev(); }, 150 ); } } }); </script>
здесь за каждое изображение отвечает строка вида
<li><img src="{ASSETS_IMAGES_PATH}5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li>можете добавлять подобные строки и удалять их. При добавлении вместо "5.jpg" нужно писать имя собстевнной загруженной картинки для слайдера в этом же разделе.
После установки слайдера будет видно, что он не совсем помещается в отведенное ему место. Чтобы исправить, откройте шаблон windy.css и замените в нем
ul.wi-container li { width: 100%; height: 100%; display: none; margin: 0; position: absolute; top: 0; left: 0; background: #fff; padding: 20px; pointer-events: auto; }на такой код
ul.wi-container li { width: 84%; height: 92%; display: none; margin: 0; position: absolute; top: 0; left: 0; background: #fff; padding: 15px; pointer-events: auto; }
#3
Отправлено 25 Апрель 2014 - 21:17
sengun (25 Апрель 2014 - 20:45) писал:
На указанном сайте скачайте архив со слайдером.
Разархивируйте его, после этого в бек-офисе магазина в разделе "Сайт" - "Редактор шаблонов" загрузите такие файлы:
1). Из папки "js" файлы "jquery.windy.js" и "modernizr.custom.79639.js"
2). Из папки "css" файлы "noJS.css", "style1.css" и "windy.css"
3). Из папки Images файл "nav.png" и несколько картинок для примера из внутренней папки "demo1". Пусть это будут первые 5 изображений.
Далее в шаблоне HTML замените код
<!-- Скрипты которые не нужно менять, грузятся из папки общих файлов --> <!-- Это собранные в один файл скрипты из файлов: {FORALL_JS_PATH}jquery-1.4.2.min.js {FORALL_JS_PATH}jquery.nyroModal-1.6.2.min.js {FORALL_JS_PATH}jquery-ui-1.8.4.custom.min.js {FORALL_JS_PATH}jquery.validate.min.js {FORALL_JS_PATH}jquery.capslock.min.js {FORALL_JS_PATH}jquery.fancybox-1.3.4.pack.js --> <script type="text/javascript" src="{FORALL_JS_PATH}jquery-1.4.2_nyroModal-1.6.2_validate_capslock_jquery-ui-1.8.4.custom_fancybox-1.3.4.version2.min.js"></script>на такой
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- Скрипты которые не нужно менять, грузятся из папки общих файлов --> <!-- Это собранные в один файл скрипты из файлов: {FORALL_JS_PATH}jquery-1.4.2.min.js --> <script type="text/javascript" src="{FORALL_JS_PATH}jquery.nyroModal-1.6.2.min.js"></script> <script type="text/javascript" src="{FORALL_JS_PATH}jquery-ui-1.8.4.custom.min.js"></script> <script type="text/javascript" src="{FORALL_JS_PATH}jquery.validate.min.js"></script> <script type="text/javascript" src="{FORALL_JS_PATH}jquery.capslock.min.js"></script> <script type="text/javascript" src="{FORALL_JS_PATH}jquery.fancybox-1.3.4.pack.js"></script>
далее ПЕРЕД строкой
</head>вставьте такой код
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}windy.css" /> <link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}style1.css" /> <noscript><link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}noJS.css" /></noscript> <script type="text/javascript" src="{ASSETS_JS_PATH}modernizr.custom.79639.js"></script> <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.windy.js"></script>
и после строки
<div id="right">добавьте непосредственный код слайдера
<div class="windy-demo"> <ul id="wi-el" class="wi-container"> <li><img src="{ASSETS_IMAGES_PATH}1.jpg" alt="image1"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li> <li><img src="{ASSETS_IMAGES_PATH}2.jpg" alt="image2"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li> <li><img src="{ASSETS_IMAGES_PATH}3.jpg" alt="image3"/><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li> <li><img src="{ASSETS_IMAGES_PATH}4.jpg" alt="image4"/><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li> <li><img src="{ASSETS_IMAGES_PATH}5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li> </ul> <nav> <span id="nav-prev">Назад</span> <span id="nav-next">Вперед</span> </nav> </div> <script type="text/javascript"> $(function() { var $el = $( '#wi-el' ), windy = $el.windy(), allownavnext = false, allownavprev = false; $( '#nav-prev' ).on( 'mousedown', function( event ) { allownavprev = true; navprev(); } ).on( 'mouseup mouseleave', function( event ) { allownavprev = false; } ); $( '#nav-next' ).on( 'mousedown', function( event ) { allownavnext = true; navnext(); } ).on( 'mouseup mouseleave', function( event ) { allownavnext = false; } ); function navnext() { if( allownavnext ) { windy.next(); setTimeout( function() { navnext(); }, 150 ); } } function navprev() { if( allownavprev ) { windy.prev(); setTimeout( function() { navprev(); }, 150 ); } } }); </script>
здесь за каждое изображение отвечает строка вида
<li><img src="{ASSETS_IMAGES_PATH}5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li>можете добавлять подобные строки и удалять их. При добавлении вместо "5.jpg" нужно писать имя собстевнной загруженной картинки для слайдера в этом же разделе.
После установки слайдера будет видно, что он не совсем помещается в отведенное ему место. Чтобы исправить, откройте шаблон windy.css и замените в нем
ul.wi-container li { width: 100%; height: 100%; display: none; margin: 0; position: absolute; top: 0; left: 0; background: #fff; padding: 20px; pointer-events: auto; }на такой код
ul.wi-container li { width: 84%; height: 92%; display: none; margin: 0; position: absolute; top: 0; left: 0; background: #fff; padding: 15px; pointer-events: auto; }
#4
Отправлено 25 Апрель 2014 - 23:23
#5
Отправлено 26 Апрель 2014 - 02:44
#6
Отправлено 26 Апрель 2014 - 10:21
Сake (26 Апрель 2014 - 02:44) писал:
Спасибо
#8
Отправлено 27 Апрель 2014 - 12:49
#9
Отправлено 27 Апрель 2014 - 20:23
kotaff (27 Апрель 2014 - 12:49) писал:
Извините за ожидание.
Скрипты установленного слайдера были несовместимы со скриптами магазина, поэтому на вашем сайте проапала возможность отправить товар в корзину.
Пришлось редактировать и стандартные скрипты и скрипт слайдера, чтобы они не конфликтовали. Сейчас ваш магазин функционирует нормально.
#10
Отправлено 27 Апрель 2014 - 20:31
sengun (27 Апрель 2014 - 20:23) писал:
Извините за ожидание.
Скрипты установленного слайдера были несовместимы со скриптами магазина, поэтому на вашем сайте проапала возможность отправить товар в корзину.
Пришлось редактировать и стандартные скрипты и скрипт слайдера, чтобы они не конфликтовали. Сейчас ваш магазин функционирует нормально.
#11
Отправлено 11 Май 2014 - 19:32
#12
Отправлено 13 Май 2014 - 05:42
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- Скрипты которые не нужно менять, грузятся из папки общих файлов --> <!-- Это собранные в один файл скрипты из файлов: {FORALL_JS_PATH}jquery-1.4.2.min.js --> <script type="text/javascript" src="{FORALL_JS_PATH}jquery.nyroModal-1.6.2.min.js"></script> <script type="text/javascript" src="{FORALL_JS_PATH}jquery-ui-1.8.4.custom.min.js"></script> <script type="text/javascript" src="{FORALL_JS_PATH}jquery.validate.min.js"></script> <script type="text/javascript" src="{FORALL_JS_PATH}jquery.capslock.min.js"></script> <script type="text/javascript" src="{FORALL_JS_PATH}jquery.fancybox-1.3.4.pack.js"></script>
и замените его на
<!-- Скрипты которые не нужно менять, грузятся из папки общих файлов --> <!-- Это собранные в один файл скрипты из файлов: {FORALL_JS_PATH}jquery-1.4.2.min.js {FORALL_JS_PATH}jquery.nyroModal-1.6.2.min.js {FORALL_JS_PATH}jquery-ui-1.8.4.custom.min.js {FORALL_JS_PATH}jquery.validate.min.js {FORALL_JS_PATH}jquery.capslock.min.js {FORALL_JS_PATH}jquery.fancybox-1.3.4.pack.js --> <script type="text/javascript" src="{FORALL_JS_PATH}jquery-1.4.2_nyroModal-1.6.2_validate_capslock_jquery-ui-1.8.4.custom_fancybox-1.3.4.version2.min.js"></script>
для возвращения на предыдущие версии библиотек. После этого откройте файл jquery.windy.js для редактирования и замените все найденные строки
.on(
на
.bind(
#13
Отправлено 05 Октябрь 2014 - 17:39
#14
Отправлено 05 Октябрь 2014 - 17:49
dele7 (05 Октябрь 2014 - 17:39) писал:
<div class="windy-demo"> <ul id="wi-el" class="wi-container"> <li><img src="{ASSETS_IMAGES_PATH}1.jpg" alt="image1"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li> <li><img src="{ASSETS_IMAGES_PATH}2.jpg" alt="image2"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li> <li><img src="{ASSETS_IMAGES_PATH}3.jpg" alt="image3"/><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li> <li><img src="{ASSETS_IMAGES_PATH}4.jpg" alt="image4"/><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li> <li><img src="{ASSETS_IMAGES_PATH}5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li> </ul> <nav> <span id="nav-prev">Назад</span> <span id="nav-next">Вперед</span> </nav> </div> <script type="text/javascript"> $(function() { var $el = $( '#wi-el' ), windy = $el.windy(), allownavnext = false, allownavprev = false; $( '#nav-prev' ).on( 'mousedown', function( event ) { allownavprev = true; navprev(); } ).on( 'mouseup mouseleave', function( event ) { allownavprev = false; } ); $( '#nav-next' ).on( 'mousedown', function( event ) { allownavnext = true; navnext(); } ).on( 'mouseup mouseleave', function( event ) { allownavnext = false; } ); function navnext() { if( allownavnext ) { windy.next(); setTimeout( function() { navnext(); }, 150 ); } } function navprev() { if( allownavprev ) { windy.prev(); setTimeout( function() { navprev(); }, 150 ); } } }); </script>и переместите его после строчек
{% ENDIF %} <!-- end-Список хитов главной --> <!-- Вывод каталога таблицей --> <!-- Вывод каталога списком-Конец --> </div>далее найдите в файле style1.css
.windy-demo { width: 200px; margin: 40px auto; color: #aaa; }замените на
.windy-demo { width: 200px; color: #aaa; margin: 8px 21px 0px 0px; float: right; }
#15
Отправлено 15 Декабрь 2014 - 16:13
#18
Отправлено 16 Декабрь 2014 - 00:37
#19
Отправлено 16 Декабрь 2014 - 00:50
{% IF index_page %}<a href="ссылка куда ведет"><img src="ссылка на сам баннер" alt="" /></a>{% ENDIF %}
далее после
<div id="right">
в правой колонке расположите два баннера:
<a href="ссылка куда ведет"><img src="ссылка на сам баннер" alt="" /></a> <a href="ссылка куда ведет"><img src="ссылка на сам баннер" alt="" /></a>
#20
Отправлено 16 Декабрь 2014 - 01:08
Vaccina (16 Декабрь 2014 - 00:50) писал:
{% IF index_page %}<a href="ссылка куда ведет"><img src="ссылка на сам баннер" alt="" /></a>{% ENDIF %}
далее после
<div id="right">
в правой колонке расположите два баннера:
<a href="ссылка куда ведет"><img src="ссылка на сам баннер" alt="" /></a> <a href="ссылка куда ведет"><img src="ссылка на сам баннер" alt="" /></a>
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных