#1
Отправлено 14 Май 2016 - 14:59
Слайды оставить. и стрелки выбора слайдов сделать в пределах видимой зоны страницы, т.е. в пределах картинки. Спасибо!
Аккаунт SL-385543
#2
Отправлено 14 Май 2016 - 15:59
leonamx (14 Май 2016 - 14:59) писал:
Слайды оставить. и стрелки выбора слайдов сделать в пределах видимой зоны страницы, т.е. в пределах картинки. Спасибо!
Аккаунт SL-385543
Здравствуйте.
К сожалению, фильтры работают только для каталога товаров, поэтому, как вариант, Вы можете установить главной страницей "Каталог товаров" в разделе Сайт -> Главная страница.
Для того, чтобы передвинуть стрелки на слайдере по размеру картинки зайдите в раздел Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
<!-- Arrow Left --> <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;" title="Предыдущий слайд"></span> <!-- Arrow Right --> <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px" title="Следующий слайд"></span>
Замените на:
<!-- Arrow Left --> <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 20%;" title="Предыдущий слайд"></span> <!-- Arrow Right --> <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 20%;" title="Следующий слайд"></span>
#3
Отправлено 27 Май 2016 - 01:41
#4
Отправлено 27 Май 2016 - 02:02
<!-- Jssor Slider Слайдер --> {% IF index_page %} <div class="container" id="slideshow">
замените на:
<!-- Jssor Slider Слайдер --> {% IF index_page %} <div id="slideshow">
#5
Отправлено 27 Май 2016 - 02:31
#6
Отправлено 27 Май 2016 - 02:40
#7
Отправлено 27 Май 2016 - 03:41
jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 1280));
замените на:
jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 1170));
#8
Отправлено 27 Май 2016 - 10:04
#9
Отправлено 02 Июнь 2016 - 22:42
#11
Отправлено 03 Июнь 2016 - 00:15
2) Информация на картинке
Спасибо!!
#12
Отправлено 03 Июнь 2016 - 04:17
leonamx (02 Июнь 2016 - 22:42) писал:
.wishlist { display: none !important; }
leonamx (02 Июнь 2016 - 23:09) писал:
Возможно ли поле слайдера на главной превратить в несколько картинок соответствующих размеров, а именно:
И придав каждой картинке эффект при наведении как здесь
К сожалению, такой эффект сделать нельзя, тут необходимо использовать карусель изображение или уменьшить слайдер и справа расположить отдельно 4 изображения\баннера. Какой вариант вас больше устроит?
leonamx (03 Июнь 2016 - 00:15) писал:
2) Информация на картинке
Спасибо!!
В шаблоне HTML после:
<div class="col-xs-12"> <!-- Телефон в шапке --> <div class="block-phone"> {% IF SETTINGS_STORE_PHONE_NUMBER1 %} <div class="block-phone-contact"> <span class="phone"><a href="skype:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}?call">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a></span> </div> {% ENDIF %}
вставьте:
<div class="block-phone-contact"> Ваш текст </div>
далее:
<a class="callback fancybox.ajax" href="http://{NET_DOMAIN}/callback?only_body=1">Обратный звонок</a> <script> $(document).ready(function() { $(".callback").fancybox({ maxWidth : 300, maxHeight : 330, fitToView : false, width : '70%', height : '70%', autoSize : false, closeClick : false, openEffect : 'none', closeEffect : 'none' }); }); </script>
перенесите и поставьте после:
<!-- Поиск --> <div class="form-search"> <div class="search-title rhombus"> <i class="fa fa-search" title="Поиск"> </i> </div> <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" title="Поиск" onsubmit="if($(this).find('.form-search').val()) return false;"> <input type="text" name="q" value="{SEARCH_QUERY}" class="input-text search-string" placeholder="Поиск"> <input type="hidden" name="goods_search_field_id" value="0"> <button type="submit" title="Искать" class="button search-submit"><i class="fa fa-search"></i></button> </form> </div>
также эту строку:
<a class="callback fancybox.ajax" href="http://{NET_DOMAIN}/callback?only_body=1">Обратный звонок</a>
замените на:
<a class="callback fancybox.ajax" href="http://{NET_DOMAIN}/callback?only_body=1"> <img src="#" alt="" /> </a>
и вместо знака # вставьте ссылку на иконку
#13
Отправлено 03 Июнь 2016 - 08:51
Со слайдерами давайте попробуем карусель. Думаю будет тоже очень не плохим вариантом. Спасибо!
#14
Отправлено 03 Июнь 2016 - 14:54
leonamx (03 Июнь 2016 - 08:51) писал:
Со слайдерами давайте попробуем карусель. Думаю будет тоже очень не плохим вариантом. Спасибо!
.block-phone-contact { position: relative; display: inline-block; float: left; line-height: 58px; margin: 0 8px; } .callback { float: right; position: relative; padding: 0 7px; line-height: 58px; } .callback img { width: 34px; }
#15
Отправлено 03 Июнь 2016 - 17:10
#16
Отправлено 04 Июнь 2016 - 06:47
http://www.jssor.com...vigator-02.html
Скажите, такой вариант подойдет вам? Или перейдя по данной ссылке выберите желаемый результат.
#17
Отправлено 04 Июнь 2016 - 10:03
#18
Отправлено 06 Июнь 2016 - 15:59
#19
Отправлено 08 Июнь 2016 - 06:27
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance $ChanceToShow: 1, //[Required] 0 Never, 1 Mouse Over, 2 Always $AutoCenter: 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 $Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1 }
замените на:
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance $ChanceToShow: 1, //[Required] 0 Never, 1 Mouse Over, 2 Always $AutoCenter: 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 $Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1 }, $ThumbnailNavigatorOptions: { $Class: $JssorThumbnailNavigator$, $ChanceToShow: 2, $AutoCenter: 1 }
В шаблоне HTML найдите:
<div u="slides" class="slides_container"> <div> <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" /></a> </div> <div> <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" /></a> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" /> </div> </div> <!-- Arrow Left --> <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;" title="Предыдущий слайд"></span> <!-- Arrow Right --> <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px" title="Следующий слайд"></span> </div>
замените на:
<div u="slides" class="slides_container"> <div> <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" /></a> </div> <div> <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" /></a> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" /> </div> </div> <!-- Arrow Left --> <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;" title="Предыдущий слайд"></span> <!-- Arrow Right --> <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px" title="Следующий слайд"></span> <!-- thumbnail navigator container --> <div u="thumbnavigator" class="jssort16 " style="width: 800px; height: 100px; left:0px; bottom: 0px;"> <!-- Thumbnail Item Skin Begin --> <div u="slides" style="cursor: move;"> <div u="prototype" class="p"> <div class=w><div u="thumbnailtemplate" class="t"></div></div> <div class=c></div> </div> </div> <!-- Thumbnail Item Skin End --> </div> <!-- Thumbnail Navigator Skin End --> </div>
В конец main.css вставьте:
/* jssor slider thumbnail navigator skin 12 css */ .jssort16 { position: absolute; /* size of thumbnail navigator container */ width: 600px; height: 100px; } .jssort16 .p { position: absolute; top: 0; left: 0; width: 200px; height: 100px; } .jssort16 .t { position: absolute; top: 0; left: 0; width: 200px; height: 100px; border: none; } .jssort16 .p img { filter: alpha(opacity=55); opacity: .55; transition: opacity .6s; -moz-transition: opacity .6s; -webkit-transition: opacity .6s; -o-transition: opacity .6s; } .jssort16 .pav img, .jssort16 .pav:hover img, .jssort16 .p:hover img { filter: alpha(opacity=100); opacity: 1; transition: none; -moz-transition: none; -webkit-transition: none; -o-transition: none; } .jssort16 .pav:hover img, .jssort16 .p:hover img { filter: alpha(opacity=70); opacity: .7; } .jssort16 .title, .jssort16 .title_back { position: absolute; top: 70px; left: 0px; width: 200px; height: 30px; line-height: 30px; text-align: center; color: #000; font-size: 20px; } .jssort16 .title_back { background-color: #fff; filter: alpha(opacity=50); opacity: .5; } .jssort16 .pav .title_back { background-color: #000; filter: alpha(opacity=50); opacity: .5; } .jssort16 .pav .title { color: #fff; } .jssort16 .p.pav:hover .title_back, .jssort16 .p:hover .title_back { filter: alpha(opacity=40); opacity: .4; } .jssort16 .p.pdn img { filter: alpha(opacity=100); opacity: 1; }
#20
Отправлено 09 Июнь 2016 - 12:14
Темы с аналогичным тегами фильтр, главная, карточка, товар
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных