Подскажите как вставить в некоторые разделы вот такие слайдеры:
* указываю 2 варианта, а там как скажете
1)http://thecodeplayer...ized-thumbnails
2)http://pcvector.net/...-slaydshou.html (в приоритете)
Но во втором варианте используется JQ, как сильно будет подгружать страницу?
0
Вставить Слайдер
Автор Сергей Иванов, 28 окт. 2015 18:06
Сообщений в теме: 3
#1
Отправлено 28 Октябрь 2015 - 18:06
#2
Отправлено 29 Октябрь 2015 - 02:00
Любые дополнительные плагины нагружают сайт, но не настолько, чтобы было не комфортно работать, тем более это 1 слайдер, а не 10 друг под другом =)
Если брать второй как приоритетный, уточните пожалуйста, как вы хотите его использовать, в каких разделах он будет использоваться?
Из всей инструкции нет необходимости подключать:
так как в стандартном шаблоне уже имеется данное подключение
Если брать второй как приоритетный, уточните пожалуйста, как вы хотите его использовать, в каких разделах он будет использоваться?
Из всей инструкции нет необходимости подключать:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
так как в стандартном шаблоне уже имеется данное подключение
#3
Отправлено 29 Октябрь 2015 - 06:35
Розы, хризантемы, гвоздики
#4
Отправлено 29 Октябрь 2015 - 07:14
Загрузите все файлы из папки images и js в раздел Сайт - Редактор шаблонов
В шаблоне HTML найдите:
после него пропишите:
Далее найдите:
замените на:
В main.css перед:
вставьте:
В шаблоне Товары найдите:
после него пропишите:
В шаблоне HTML найдите:
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js?design=summer"></script>
после него пропишите:
<script language="javascript" type="text/javascript" src="{ASSETS_JS_PATH}jquery.easing.js"></script> <script language="javascript" type="text/javascript" src="{ASSETS_JS_PATH}script.js"></script>
Далее найдите:
<!-- Скрипты для страницы товара --> {% IF MOD_LNAME = goods %} <script> // Запуск скриптов для страницы товара $(function(){ goodspage() }); // Инициализируем табы на странице $(function() { initTabs() }); </script> {% ENDIF %} <!-- Скрипты для главной --> {% IF index_page %} <!-- Слайдер --> <script type="text/javascript" src="{ASSETS_JS_PATH}jssor_slider.js?design=summer"></script> <script> // Запуск скриптов для главной $(function(){indexPage()}); // Запуск слайдера $(function(){slideShow()}); // Запуск слайдера Новостей $(function(){slideNews()}); // Анимация перед загружаемым объектом $(window).on('load', function () { var $preloader = $('.preloader'), $spinner = $preloader.find('.content-loading'); $spinner.fadeOut(); $preloader.delay(350).fadeOut('slow'); }); </script> {% ENDIF %}
замените на:
{% IF MOD_LNAME = goods %} <script> // Запуск скриптов для страницы товара $(function(){ goodspage() }); // Инициализируем табы на странице $(function() { initTabs() }); </script> {% ELSEIF index_page %} <!-- Слайдер --> <script type="text/javascript" src="{ASSETS_JS_PATH}jssor_slider.js?design=summer"></script> <script> // Запуск скриптов для главной $(function(){indexPage()}); // Запуск слайдера $(function(){slideShow()}); // Запуск слайдера Новостей $(function(){slideNews()}); // Анимация перед загружаемым объектом $(window).on('load', function () { var $preloader = $('.preloader'), $spinner = $preloader.find('.content-loading'); $spinner.fadeOut(); $preloader.delay(350).fadeOut('slow'); }); </script> {% ELSEIF CATEGORY_NAME = Розы || CATEGORY_NAME = Хризантемы || CATEGORY_NAME = Гвоздики %} <script type="text/javascript"> $(document).ready( function(){ // кнопки вперед и назад для слайдов var buttons = { previous:$('#jslidernews1 .button-previous') , next:$('#jslidernews1 .button-next') }; $('#jslidernews1').lofJSidernews( { interval : 4000, direction : 'opacitys', easing : 'easeInOutExpo', duration : 1200, auto : true, maxItemDisplay : 4, navPosition : 'horizontal', // horizontal navigatorHeight : 32, navigatorWidth : 80, mainWidth : 980, buttons : buttons } ); }); </script> {% ENDIF %}
В main.css перед:
/****************************************************************************** Адаптивная часть *******************************************************************************/ .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-sms-1, .col-sms-2, .col-sms-3, .col-sms-4, .col-sms-5, .col-sms-6, .col-sms-7, .col-sms-8, .col-sms-9, .col-sms-10, .col-sms-11, .col-sms-12 {float:left;position:relative;min-height:1px;padding-left:15px;padding-right:15px} .col-xs-12{width:100%} .col-xs-11{width:91.66666667%} .col-xs-10{width:83.33333333%}
вставьте:
/* slider layout */ .lof-slidecontent { position:relative; overflow:hidden; border:#F4F4F4 solid 1px;} .lof-slidecontent .preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF} .lof-slidecontent .preload div{ height:100%; width:100%; background:transparent url('{ASSETS_IMAGES_PATH}load-indicator.gif') no-repeat scroll 50% 50%;} .lof-slidecontent .sliders-wrapper{ position:relative; height:100%; width:900px; z-index:3px; overflow:hidden; } .lof-slidecontent ul.sliders-wrap-inner{overflow:hidden; background:transparent url('{ASSETS_IMAGES_PATH}load-indicator.gif') no-repeat scroll 50% 50%; padding:0px; margin:0; position:absolute; overflow:hidden;} .lof-slidecontent ul.sliders-wrap-inner li{overflow:hidden; padding:0px;margin:0px; float:left; position:relative;} .lof-slidecontent .lof-opacity li{position:absolute; top:0; left:0; float:inherit; } .lof-slidecontent .navigator-content {position:absolute; bottom:10px; right:10px; background:url('{ASSETS_IMAGES_PATH}transparent_bg.png') repeat; padding:5px 0px; } .lof-slidecontent .navigator-wrapper{ position:relative; z-index:10; height:180px; width:310px; overflow:hidden; color:#FFF; float:left } .lof-slidecontent ul.navigator-wrap-inner{ top:0; padding:0; margin:0; position:absolute; width:100%; } .lof-slidecontent ul.navigator-wrap-inner li{ cursor:hand; cursor:pointer; list-style:none; padding:0; margin-left:0px; overflow:hidden; float:left; display:block; text-align:center;} /*******************************************************/ ul.sliders-wrap-inner li img{ padding:0px; } .lof-slidecontent .slider-description a.readmore{color:#58B1EA; font-size:95%; } .lof-slidecontent .slider-description a{ color:#FFF; } .lof-slidecontent .slider-description{ z-index:100px; position:absolute; bottom:50px; left:0px; width:350px; background:url('{ASSETS_IMAGES_PATH}bg_trans.png'); height:100px; padding:10px; color:#FFF; } .lof-slidecontent .slider-description h4 { font-size: 14px; margin: 10px 0; padding: 0; } .lof-slidecontent .slider-description .slider-meta a{ margin:0; background:#C01F25; font-size:75%; padding:2px 3px; font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif; text-transform:uppercase; text-decoration:none } .lof-slidecontent .item-meta a:hover{ text-decoration:underline;} .lof-slidecontent .item-meta i { font-size:70%; } /* item navigator */ .lof-slidecontent ul.navigator-wrap-inner li img{ border:#666 solid 3px; } .lof-slidecontent ul.navigator-wrap-inner li.active img, .lof-slidecontent ul.navigator-wrap-inner li:hover img { border:#A8A8A8 solid 3px; -moz-transition:border-color ease-in-out 0.4s } .lof-slidecontent .navigator-content .button-next, .lof-slidecontent .navigator-content .button-previous{ display:block; width:22px; height:30px; color:#FFF; cursor:pointer; } .lof-slidecontent .navigator-content .button-next { float:left; text-indent:-999px; margin-right:5px; background:url('{ASSETS_IMAGES_PATH}arrow-l.png') no-repeat right center; } .lof-slidecontent .navigator-content .button-previous { float:left; text-indent:-999px; margin-left:5px; background:url('{ASSETS_IMAGES_PATH}arrow-r.png') no-repeat left center; } .lof-slidecontent .button-control { position:absolute; top:10px; right:10px; height: 20px; width: 20px; cursor:hand; cursor:pointer; background:url('{ASSETS_IMAGES_PATH}transparent_bg.png') repeat; } .lof-slidecontent .button-control span { display:block; width:100%; height:100%;} .lof-slidecontent .action-start span { background:url('{ASSETS_IMAGES_PATH}play.png') no-repeat center center; } .lof-slidecontent .action-stop span { background:url('{ASSETS_IMAGES_PATH}pause.png') no-repeat center center; }
В шаблоне Товары найдите:
<div class="{% IFNOT index_page %}col-md-9 col-xs-12 col-right{% ELSE %}col-xs-12{% ENDIF %}">
после него пропишите:
{% IF CATEGORY_NAME = Розы || CATEGORY_NAME = Хризантемы || CATEGORY_NAME = Гвоздики %} <div id="jslidernews1" class="lof-slidecontent" style="width:980px; height:340px;"> <div class="preload"><div></div></div> <!-- MAIN CONTENT --> <div class="main-slider-content" style="width:980px; height:340px;"> <ul class="sliders-wrap-inner"> <li> <img src="images/thumbl_980x340.png" title="Новость 1" > <div class="slider-description"> <div class="slider-meta"><a target="_parent" title="Новость 1" href="#Category-1">/ Новость 1 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div> <h4>Новость 1</h4> <p>Один из лучших телефонов современности, хотите узнать больше... <a class="readmore" href="#">Подробнее</a> </p> </div> </li> <li> <img src="images/thumbl_980x340_002.png" title="Новость 2" > <div class="slider-description"> <div class="slider-meta"><a target="_parent" title="Новость 2" href="#Category-2">/ Новость 2 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div> <h4>Новость 2</h4> <p>Отличнейший телефон с кучей нужных и не нужных функций... <a class="readmore" href="#">Подробнее</a> </p> </div> </li> <li> <img src="images/thumbl_980x340_003.png" title="Новость 3" > <div class="slider-description"> <div class="slider-meta"><a target="_parent" title="Новость 3" href="#Category-3">/ Новость 3 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div> <h4>Новость 3</h4> <p>Просто возьмите мобильный в руки и вы не захотите его отдавать... <a class="readmore" href="#">Подробнее</a> </p> </div> </li> <li> <img src="images/thumbl_980x340_004.png" title="Новость 4" > <div class="slider-description"> <div class="slider-meta"><a target="_parent" title="Новость 4" href="#Category-4">/ Новость 4 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div> <h4>Новость 4</h4> <p>Отличный девайс для интересного времяпрепровождения вне дома... <a class="readmore" href="#">Подробнее</a> </p> </div> </li> <li> <img src="images/thumbl_980x340_005.png" title="Новость 5" > <div class="slider-description"> <div class="slider-meta"><a target="_parent" title="Новость 5" href="#">/ Новость 5 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div> <h4>Новость 5</h4> <p>Видели рекламу этого ноутбука по ТВ? Тогда обязательно посмотрите... <a class="readmore" href="#">Подробнее</a> </p> </div> </li> <li> <img src="images/thumbl_980x340_006.png" title="Новость 6" > <div class="slider-description"> <div class="slider-meta"><a target="_parent" title="Новость 6" href="#">/ Новость 6 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div> <h4>Новость 6</h4> <p>"Моя прелесть!" Иначе и не скажешь. Копите деньги друзья... <a class="readmore" href="#">Подробнее</a> </p> </div> </li> <li> <img src="images/thumbl_980x340_007.png" title="Новость 7" > <div class="slider-description"> <div class="slider-meta"><a target="_parent" title="Новость 7" href="#">/ Новость 7 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div> <h4>Новость 7</h4> <p>Отличный ноутбук, но можно найти такой же и без перламутровых пуговиц... <a class="readmore" href="#">Подробнее</a> </p> </div> </li> <li> <img src="images/thumbl_980x340_008.png" title="Новость 8" > <div class="slider-description"> <div class="slider-meta"><a target="_parent" title="Новость 8" href="#">/ Новость 8 /</a> <i> — Четверг, Май 3, 2012 19:00</i></div> <h4>Новость 8</h4> <p>Ах планшет, планшет. А нужен ли ты вообще ?... <a class="readmore" href="#">Подробнее</a> </p> </div> </li> </ul> </div> <!-- END MAIN CONTENT --> <!-- NAVIGATOR --> <div class="navigator-content"> <div class="button-next">Вперед</div> <div class="navigator-wrapper"> <ul class="navigator-wrap-inner"> <li><img src="images/thumbs/thumbl_980x340.png" /></li> <li><img src="images/thumbs/thumbl_980x340_002.png" /></li> <li><img src="images/thumbs/thumbl_980x340_003.png" /></li> <li><img src="images/thumbs/thumbl_980x340_004.png" /></li> <li><img src="images/thumbs/thumbl_980x340_005.png" /></li> <li><img src="images/thumbs/thumbl_980x340_006.png" /></li> <li><img src="images/thumbs/thumbl_980x340_007.png" /></li> <li><img src="images/thumbs/thumbl_980x340_008.png" /></li> </ul> </div> <div class="button-previous">Назад</div> </div> <!----------------- END OF NAVIGATOR ---------------------> <!-- BUTTON PLAY-STOP --> <div class="button-control"><span></span></div> <!-- END OF BUTTON PLAY-STOP --> </div> {% ENDIF %}
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных