Уменьшить Слайдер И Добавить Сбоку 4 Картинки
#1
Отправлено 13 Июль 2015 - 15:29
Требуется уменьшить банер и сбоку от него разместить 4 картинки ссылки с тестом (в точь в точь как на этом сайте)
Пожалуйста помогите.
#2
Отправлено 15 Июль 2015 - 12:58
#3
Отправлено 16 Июль 2015 - 04:23
#4
Отправлено 16 Июль 2015 - 18:49
Vaccina (16 Июль 2015 - 04:23) писал:
И спасибо за помощь (вообщем хочется стилизовать эффект при наведении на дополнительные 4 блока как на сайте , что указывал сверху)
#5
Отправлено 16 Июль 2015 - 20:19
valkiria789879 (16 Июль 2015 - 18:49) писал:
И спасибо за помощь (вообщем хочется стилизовать эффект при наведении на дополнительные 4 блока как на сайте , что указывал сверху)
jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 1920));изменяйте значение 1920 - ширина, а высота подстроится автоматически.
Далее в шаблоне html найдите строку
<!-- Jssor Slider Слайдер Конец -->после нее вставьте
<!-- Баннеры 2--> {% IF index_page %} <div id="topsl banner2" class="wrap"> <div class="container"> <div class="row-fluid"> <div class="block col-xs-2 col-md-6" style="width: 33%;"><a href="Ссылка на страницу"> <div class="block-img"><img alt="" src="Ссылка на изображение"></div> <div class="block-title"><span>Текст</span></div> </a></div> <div class="block col-xs-2 col-md-6" style="width: 33%;"><a href="Ссылка на страницу"> <div class="block-img"><img alt="" src="Ссылка на изображение"></div> <div class="block-title"><span>Текст</span></div> </a></div> <div class="block col-xs-2 col-md-6" style="width: 33%;"><a href="Ссылка на страницу"> <div class="block-img"><img alt="" src="Ссылка на изображение"></div> <div class="block-title"><span>Текст</span></div> </a></div> </div> </div> </div> </div> {% ENDIF %} <!-- Баннеры 2-->Так же в конец main.css добавьте
.banner2 .block-img { max-width: 115px; float: left; }
#6
Отправлено 10 Сентябрь 2015 - 02:41
Я поставил 3 банера под слайдер, подскажите как сделать, чтобы при наведении курсором на банер, он затемнялся или его картинка и в середине была надпись "подробнее".
Акк - SL 355835
#7
Отправлено 10 Сентябрь 2015 - 04:55
<!-- Баннеры 2--> {% IF index_page %} <div id="topsl banner2" class="wrap"> <div class="container"> <div class="row-fluid"> <div class="block col-xs-2 col-md-6" style="width: 33%;box-shadow: 0 5px 6px #bbb;"><a href="Ссылка на страницу"> <div class="block-img"><img alt="" src="http://st.storeland.net/9/1725/742/BXDL.jpg"></div> <div class="block-title" style= "color:#000;font-size: 16px;line-height: 40px;font-weight: bold;"><span>Текст</span></div> </a></div> <div class="block col-xs-2 col-md-6" style="width: 33%;box-shadow: 0 5px 6px #bbb;margin-left: 6px;"><a href="Ссылка на страницу"> <div class="block-img"><img alt="" src="http://st.storeland.net/8/1725/738/BXMSH.jpg"></div> <div class="block-title" style= "color:#000;font-size: 16px;line-height: 40px;font-weight: bold;"><span>Текст</span></div> </a></div> <div class="block col-xs-2 col-md-6" style="width: 33%;box-shadow: 0 5px 6px #bbb;margin-left: 6px;"><a href="Ссылка на страницу"> <div class="block-img"><img alt="" src="http://st.storeland.net/8/1728/634/BXDL44.jpg"></div> <div class="block-title" style= "color:#000;font-size: 16px;line-height: 40px;font-weight: bold;"><span>Текст</span></div> </a></div> </div> </div> </div> </div> {% ENDIF %} <!-- Баннеры 2-->
замените на:
<!-- Баннеры 2--> {% IF index_page %} <div class="wrap banner2"> <div class="container"> <div class="row-fluid"> <div class="block banner col-xs-2 col-md-6"> <a href="Ссылка на страницу"> <div class="block-img"><img alt="" src="http://st.storeland.net/9/1725/742/BXDL.jpg"></div> <div class="block-title"><span>Текст</span></div> </a> </div> <div class="block banner col-xs-2 col-md-6"> <a href="Ссылка на страницу"> <div class="block-img"><img alt="" src="http://st.storeland.net/8/1725/738/BXMSH.jpg"></div> <div class="block-title"><span>Текст</span></div> </a> </div> <div class="block banner col-xs-2 col-md-6"> <a href="Ссылка на страницу"> <div class="block-img"><img alt="" src="http://st.storeland.net/8/1728/634/BXDL44.jpg"></div> <div class="block-title"><span>Текст</span></div> </a> </div> </div> </div> </div> </div> {% ENDIF %} <!-- Баннеры 2-->
далее в main.css после:
/* Slider Слайдер */ #slideshow {margin: 0 0;position: relative;} #slider {position: relative; margin: 0 auto;top: 0px; left: 0px; width: 1920px; height: 570px; overflow: hidden;z-index:1;} .slides_container {cursor: move; position: absolute; left: 0px; top: 0px; width: 1920px;height: 570px; overflow: hidden;} .slides_container img {left:0 !important;} .jssora21l, .jssora21r, .jssora21ldn, .jssora21rdn {position: absolute;cursor: pointer;display: block;background: url('{ASSETS_IMAGES_PATH}a21.png?design=azure') center center no-repeat;overflow: hidden;} .jssora21l { background-position: -3px -33px; } .jssora21r { background-position: -63px -33px; } .jssora21l:hover { background-position: -123px -33px; } .jssora21r:hover { background-position: -183px -33px; } .jssora21ldn { background-position: -243px -33px; } .jssora21rdn { background-position: -303px -33px; }
прпопишите:
.banner2 .banner { width: 33%; box-shadow: 0px 5px 6px #BBB; position: relative; } .banner2 .block-img { float: left; width: 100%; text-align: center; display: block; } .banner2 .banner .block-title { color: #000; font-size: 16px; line-height: 40px; font-weight: bold; text-align: center; clear: both; } .banner2 .banner a:hover:after { background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%; content: "Подробнее"; color: #FFF; text-align: center; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; font: bold 24px Arial; line-height: 300px; text-transform: uppercase; }
#8
Отправлено 10 Сентябрь 2015 - 13:45
#9
Отправлено 23 Сентябрь 2015 - 18:46
акк - 355835
#10
Отправлено 23 Сентябрь 2015 - 18:53
Santos (23 Сентябрь 2015 - 18:46) писал:
акк - 355835
В конец main.css добавьте
@media only screen and (max-width: 786px) { .banner2 .banner { margin-left:0px; } }
#11
Отправлено 23 Сентябрь 2015 - 23:08
Danil (23 Сентябрь 2015 - 18:53) писал:
В конец main.css добавьте
@media only screen and (max-width: 786px) { .banner2 .banner { margin-left:0px; } }
#12
Отправлено 23 Октябрь 2015 - 00:58
Подскажите , как сделать баннеры затемненными, а при наведении на них мышью..они осветлялись (см. скриншот), 5 часов пытался выплатить на свои баннеры - бесполезно, совсем запутался...
Данные баннеры (3 штуки) увидел на этом сервисе: --- ://sitesao.com/theme/?theme=loja , надо такие же!
Жду помощи...
#13
Отправлено 23 Октябрь 2015 - 03:05
В этом случае в main.css найдите:
.banner2 .banner{width:50%;margin-left:0px;margin-top:34%;position:relative;} .banner2 .block-img{float:left;width:100%;text-align:center;display:block;} .banner2 .banner .block-title{color:#000;font-weight:600;font-size:16px;line-height:40px;text-align:center;clear:both;} .banner2 .banner a:hover:after{background:url("http://design.sait.ru/plus.png") no-repeat center, rgba(0, 0, 0, 0.4) none repeat scroll 0% 0%;content:"";color:#FFF;text-align:center;position:absolute;left:15px;right:15px;top:0px;bottom:40px;font:bold 24px Arial;line-height:300px;text-transform:uppercase;}
замените на:
.banner2 .banner{width:50%;margin-left:0px;margin-top:34%;position:relative;} .banner2 .block-img{float:left;width:100%;text-align:center;display:block;} .banner2 .banner .block-title{color:#000;font-weight:600;font-size:16px;line-height:40px;text-align:center;clear:both;} .banner2 .banner a:after{background:rgba(0, 0, 0, 0.4);content:"";position:absolute;left:15px;right:15px;top:0px;bottom:40px;} .banner2 .banner a:hover:after{background:url("http://design.sait.ru/plus.png") no-repeat center;content:"";color:#FFF;text-align:center;position:absolute;left:15px;right:15px;top:0px;bottom:40px;font:bold 24px Arial;line-height:300px;text-transform:uppercase;}
sait.ru замените на свое доменное имя
#14
Отправлено 24 Апрель 2016 - 23:46
А именно:
jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 1920));
Возможно, что-то изменилось за прошедшее время?
Аккаунт к189501
#15
Отправлено 25 Апрель 2016 - 09:46
siriuskony (24 Апрель 2016 - 23:46) писал:
А именно:
jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 1920));
Возможно, что-то изменилось за прошедшее время?
Аккаунт к189501
Здравствуйте.
Требуемый вам код находится в шаблоне jssor_slider.js на 64-й строке.
Проверьте, пожалуйста.
#17
Отправлено 08 Август 2016 - 14:05
Маргарита Пандар (08 Август 2016 - 14:03) писал:
В шаблоне html найдите и удалите код
<!-- Баннеры --> {% IF index_page %} <div id="topsl" class="wrap"> <div class="container"> <div class="row"> <div class="block free-shipping col-sm-3 col-sms-6 col-smb-12"> <div class="block-title"><span>Бесплатная доставка</span></div> <div class="block-content">Доставка по городу и области Бесплатна!</div> </div> <div class="block money-back col-sm-3 col-sms-6 col-smb-12"> <div class="block-title"><span>30 дней гарантии</span></div> <div class="block-content">Вы можете вернуть товар в течении 30 дней после получения заказа</div> </div> <div class="block orders-247 col-sm-3 col-sms-6 col-smb-12"> <div class="block-title"><span>Прием заказов 24/7</span></div> <div class="block-content">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</div> </div> <div class="block secured-payment col-sm-3 col-sms-6 col-smb-12"> <div class="block-title"><span>Безопасная оплата</span></div> <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div> </div> </div> </div> </div> {% ENDIF %} <!-- /END Баннеры -->
#18
Отправлено 08 Август 2016 - 15:44
#19
Отправлено 26 Сентябрь 2016 - 03:41
#20
Отправлено 26 Сентябрь 2016 - 10:05
gesha81 (26 Сентябрь 2016 - 03:41) писал:
сжимание.JPG
Здравствуйте.
Нужно немного поправить вёрстку.
Для этого в Редакторе шаблонов - HTML
найдите:
в самом конце файла main.css добавьте
.landing-table .top-left { width: 35%; float: left; height: 270px; float: left; overflow: hidden; } .landing-table .top-right { width: 64%; height: 270px; float: right text-align: right; margin-left: 5px; float: left; overflow: hidden; } .landing-table .long-top { width: 100%; overflow: hidden; } .landing-table .long-top img { width: 100%; } .landing-table .bot-left { float: left; width: 58%; } .landing-table .bot-right { float: left; width: 30%; } .landing-table .long-bot img { width: 100%; }
для скрытия на мобильных устройствах в конце main.css добавьте
@media all and (max-width: 381px) { .landing-table {display:none;} }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных