Перейти к содержимому


Уменьшить Слайдер И Добавить Сбоку 4 Картинки


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 24

#1 valkiria789879

valkiria789879

    Пользователь

  • Пользователи
  • PipPip
  • 16 сообщений

Отправлено 13 Июль 2015 - 15:29

Здравствуйте ! Делаем сайт на вашей платформе.
Требуется уменьшить банер и сбоку от него разместить 4 картинки ссылки с тестом (в точь в точь как на этом сайте)
Пожалуйста помогите.

#2 valkiria789879

valkiria789879

    Пользователь

  • Пользователи
  • PipPip
  • 16 сообщений

Отправлено 15 Июль 2015 - 12:58

Пожалуйста помогите. Очень надо изменить слайдер и сделать боковые картинки с текстом

#3 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 068 сообщений

Отправлено 16 Июль 2015 - 04:23

Имейте ввиду, что сайт-пример не адаптивный и не резиновый, то есть при уменьшении вашего сайта могут страдать пропорции между слайдером и баннерами. Может лучше расположить их горизонтально под слайдером?

#4 valkiria789879

valkiria789879

    Пользователь

  • Пользователи
  • PipPip
  • 16 сообщений

Отправлено 16 Июль 2015 - 18:49

Просмотр сообщенияVaccina (16 Июль 2015 - 04:23) писал:

Имейте ввиду, что сайт-пример не адаптивный и не резиновый, то есть при уменьшении вашего сайта могут страдать пропорции между слайдером и баннерами. Может лучше расположить их горизонтально под слайдером?
Спасибо за ответ . Помогите тогда разместить под слайдером. Но слайдер надо уменьшить в ширину, Что бы бы по середине, а не на всю страницу.И сделать такие же иконки размером 99x110 px. C текстом .
И спасибо за помощь (вообщем хочется стилизовать эффект при наведении на дополнительные 4 блока как на сайте , что указывал сверху)

#5 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 16 Июль 2015 - 20:19

Просмотр сообщенияvalkiria789879 (16 Июль 2015 - 18:49) писал:

Спасибо за ответ . Помогите тогда разместить под слайдером. Но слайдер надо уменьшить в ширину, Что бы бы по середине, а не на всю страницу.И сделать такие же иконки размером 99x110 px. C текстом .
И спасибо за помощь (вообщем хочется стилизовать эффект при наведении на дополнительные 4 блока как на сайте , что указывал сверху)
Для изменений ширины слайдера в main.js найдите код
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 Santos

Santos

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 323 сообщений

Отправлено 10 Сентябрь 2015 - 02:41

Здравствуйте!
Я поставил 3 банера под слайдер, подскажите как сделать, чтобы при наведении курсором на банер, он затемнялся или его картинка и в середине была надпись "подробнее".
Акк - SL 355835

#7 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 068 сообщений

Отправлено 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 Santos

Santos

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 323 сообщений

Отправлено 10 Сентябрь 2015 - 13:45

Vaccina спасибо большое!, Вы как всегда на высоте)))

#9 Santos

Santos

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 323 сообщений

Отправлено 23 Сентябрь 2015 - 18:46

Vaccina, доброго дня! Подскажите по баннеру...баннеры стоят нормально (которые вы мне прописали выше), вот только при уменьшении разрешения, они сильно уходят вниз от слайдера...как их откорректировать? чтобы они стояли по порядку сверху-вниз, с небольшим расстоянием от слайдера.
акк - 355835

#10 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 23 Сентябрь 2015 - 18:53

Просмотр сообщенияSantos (23 Сентябрь 2015 - 18:46) писал:

Vaccina, доброго дня! Подскажите по баннеру...баннеры стоят нормально (которые вы мне прописали выше), вот только при уменьшении разрешения, они сильно уходят вниз от слайдера...как их откорректировать? чтобы они стояли по порядку сверху-вниз, с небольшим расстоянием от слайдера.
акк - 355835
Здравствуйте.
В конец main.css добавьте
@media only screen and (max-width: 786px) {
.banner2 .banner {
margin-left:0px;
}
}


#11 Santos

Santos

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 323 сообщений

Отправлено 23 Сентябрь 2015 - 23:08

Просмотр сообщенияDanil (23 Сентябрь 2015 - 18:53) писал:

Здравствуйте.
В конец main.css добавьте
@media only screen and (max-width: 786px) {
.banner2 .banner {
margin-left:0px;
}
}
Спасибо за подсказку, к этому коду добавил "margin-top:10px;" расстояние между слайдером и банером сократилось...

#12 Santos

Santos

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 323 сообщений

Отправлено 23 Октябрь 2015 - 00:58

Добрый день!
Подскажите , как сделать баннеры затемненными, а при наведении на них мышью..они осветлялись (см. скриншот), 5 часов пытался выплатить на свои баннеры - бесполезно, совсем запутался...
Данные баннеры (3 штуки) увидел на этом сервисе:  --- ://sitesao.com/theme/?theme=loja , надо такие же!
Жду помощи...

#13 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 068 сообщений

Отправлено 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 siriuskony

siriuskony

    Пользователь

  • Пользователи
  • PipPip
  • 40 сообщений

Отправлено 24 Апрель 2016 - 23:46

Добрый вечер. Тоже хочу уменьшить размер слайдера. Код, который Вы рекомендовали изменить ранее, не могу найти в main.js
А именно:
jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 1920));

Возможно, что-то изменилось за прошедшее время?
Аккаунт к189501


#15 RayLi

RayLi

    Активный участник

  • Модераторы
  • 2 864 сообщений

Отправлено 25 Апрель 2016 - 09:46

Просмотр сообщенияsiriuskony (24 Апрель 2016 - 23:46) писал:

Добрый вечер. Тоже хочу уменьшить размер слайдера. Код, который Вы рекомендовали изменить ранее, не могу найти в main.js
А именно:
jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 1920));

Возможно, что-то изменилось за прошедшее время?
Аккаунт к189501

Здравствуйте.
Требуемый вам код находится в шаблоне jssor_slider.js на 64-й строке.
Проверьте, пожалуйста.

#16 Маргарита Пандар

Маргарита Пандар

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 57 сообщений

Отправлено 08 Август 2016 - 14:03

Здравствуйте. Как с главной страницы полностью убрать блок - выделила красным на скриншоте?

Прикрепленные изображения

  • Главная страница.jpg


#17 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 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 Маргарита Пандар

Маргарита Пандар

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 57 сообщений

Отправлено 08 Август 2016 - 15:44

Спасибо

#19 gesha81

gesha81

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 129 сообщений
  • ГородЧита

Отправлено 26 Сентябрь 2016 - 03:41

Здравствуйте. Подскажите пожалуйста как сделать так, что бы при уменьшении размера окна пропорционально уменьшались банеры расположенные ниже слайдера. А при уменьшении окна до какого то минимума ( допустим до мобильной версии сайта) они исчезали совсем. Аккаунт SL-300642
сжимание.JPG

#20 Mr.Nito

Mr.Nito

    Активный участник

  • Модераторы
  • 1 364 сообщений

Отправлено 26 Сентябрь 2016 - 10:05

Просмотр сообщенияgesha81 (26 Сентябрь 2016 - 03:41) писал:

Здравствуйте. Подскажите пожалуйста как сделать так, что бы при уменьшении размера окна пропорционально уменьшались банеры расположенные ниже слайдера. А при уменьшении окна до какого то минимума ( допустим до мобильной версии сайта) они исчезали совсем. Аккаунт SL-300642
Прикрепленный файл сжимание.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 анонимных