Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

2

Изменение Расположения Фото

Автор мистка, 11 авг. 2014 20:30

Вперед

Авторизуйтесь для ответа в теме

Сообщений в теме: 43

#1 мистка

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

Пользователи
2 435 сообщений

ГородМосква

Отправлено 11 Август 2014 - 20:30

Добрый вечер прочла тем 40 но не смогла в бистро изменить расположения фото и добавить авто зум
подскажите как реализовать данный функционал
1 разместить другие фото не внизу а сбоку основной фотки
2 выделить их пиксельной рамочкой
3 сделать хоть какой ни будь зум

огромное спасибо за помошь!

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

Наверх

#2 daria_dnk

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

Модератоpы
482 сообщений

Отправлено 11 Август 2014 - 20:54

тихоня (11 Август 2014 - 20:30) писал:

Добрый вечер прочла тем 40 но не смогла в бистро изменить расположения фото и добавить авто зум
подскажите как реализовать данный функционал
1 разместить другие фото не внизу а сбоку основной фотки
2 выделить их пиксельной рамочкой
3 сделать хоть какой ни будь зум

огромное спасибо за помошь!

Здравствуйте! Укажите пожалуйста номер аккаунта на котором у Вас установлен шаблон Бистро. Из всех указанных у Вас действует только один и на нем установлен шаблон Осень.

Наверх

#3 мистка

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

Пользователи
2 435 сообщений

ГородМосква

Отправлено 11 Август 2014 - 21:01

Аккаунт SL-299242 извините)

Наверх

#4 Vaccina

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

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

Отправлено 12 Август 2014 - 03:11

В main.css найдите:

.fullimg {
	background: #fff;
	border-radius: 6px;
	box-sizing: border-box;
	display: block;
	max-height: 300px;
	min-height: 300px;
	overflow: hidden;
	padding: 3% 2%;
}

замените на:

.fullimg {
	background: none repeat scroll 0 0 #fff;
	border-radius: 6px;
	box-sizing: border-box;
	display: block;
	float: left;
	max-height: 300px;
	min-height: 300px;
	overflow: hidden;
	padding: 3% 2%;
	width: 50%;
}

далее найдите:

.allphoto {
	display: block;
	margin-top: 14px;
}

замените на:

.allphoto {
	display: block;
	float: right;
	margin-top: 14px;
	width: 35%;
	clear: none;
}

далее найдите:

.allphoto .title {
	padding-bottom: 5px;
}

замените на:

.allphoto .title {
	display: none;
	padding-bottom: 5px;
}

далее найдите:

.owl-carousel .owl-item {
	float: left;
	max-height: 100%;
	text-align: center;
}

замените на:

.owl-carousel .owl-item {
	float: none;
	max-height: 100%;
	text-align: center;
}

Наверх

#5 mariteks

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

Пользователи
150 сообщений

ГородКиров

Отправлено 28 Январь 2015 - 00:05

Скажите, а как сделать это на дизайне Снег?

Наверх

#6 Vaccina

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

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

Отправлено 28 Январь 2015 - 01:07

Не советую подобного реализовывать, так как в адаптивном варианте может все поехать.
Попробуйте следующее, в main.css найдите:

.productImgBlock, .productContentBlock {
display: inline-block;
float: left;
width: 50%;
}
.bigImages {
	height: 450px;
	overflow: hidden;
}
.minImages {
display: block;
overflow: hidden;
width: 100%;
}
.productContentBlock {
	padding: 0 0 0 2%;
}

замените на:

.productImgBlock, .productContentBlock {
display: inline-block;
float: left;
position: relative;
width: 55%;
}
.bigImages {
	height: 450px;
	margin-left: 10%;
	overflow: hidden;
	width: 90%;
}
.minImages {
	display: block;
	left: -30%;
	overflow: hidden;
	position: absolute;
	top: 43%;
	transform: rotate(90deg);
	width: 440px;
}
.minImages #owl-carusel .item img {
transform: rotate(-90deg);
}
.productContentBlock {
	padding: 0 0 0 2%;
	width: 45%;
}

Наверх

#7 mariteks

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

Пользователи
150 сообщений

ГородКиров

Отправлено 28 Январь 2015 - 11:57

Vaccina (28 Январь 2015 - 01:07) писал:

Не советую подобного реализовывать, так как в адаптивном варианте может все поехать.

Спасибо.
Подскажите, как сделать:
1. Размер дополнительных фото сделать крупнее.
2. Уменьшить расстояние.

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

Наверх

#8 Alekseys

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

Пользователи
2 355 сообщений

Отправлено 28 Январь 2015 - 12:13

mariteks (28 Январь 2015 - 11:57) писал:

Спасибо.
Подскажите, как сделать:
1. Размер дополнительных фото сделать крупнее.
2. Уменьшить расстояние.

Здравствуйте. Укажите пожалуйста ссылку на товар с дополнительными фото.

Наверх

#9 mariteks

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

Пользователи
150 сообщений

ГородКиров

Отправлено 28 Январь 2015 - 12:26

Alekseys (28 Январь 2015 - 12:13) писал:

Здравствуйте. Укажите пожалуйста ссылку на товар с дополнительными фото.

http://zakaz-mn-odez.../Bluza-Shokolad

Наверх

#10 mariteks

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

Пользователи
150 сообщений

ГородКиров

Отправлено 28 Январь 2015 - 12:31

Alekseys (28 Январь 2015 - 12:13) писал:

Здравствуйте. Укажите пожалуйста ссылку на товар с дополнительными фото.

Скажите как сделать дополнительные фото крупнее?

Наверх

#11 Ирина345

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

Модераторы
5 709 сообщений

Отправлено 28 Январь 2015 - 13:00

mariteks (28 Январь 2015 - 12:31) писал:

Скажите как сделать дополнительные фото крупнее?

Здравствуйте, зайдите в раздел Настройки-основное и измените размер
Максимальный размер по высоте/ширине в пикселях для иконок

Наверх

#12 mariteks

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

Пользователи
150 сообщений

ГородКиров

Отправлено 28 Январь 2015 - 13:46

Ирина345 (28 Январь 2015 - 13:00) писал:

Здравствуйте, зайдите в раздел Настройки-основное и измените размер
Максимальный размер по высоте/ширине в пикселях для иконок

Я заходила, меняла и никакого результата!

Наверх

#13 Alekseys

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

Пользователи
2 355 сообщений

Отправлено 28 Январь 2015 - 13:51

mariteks (28 Январь 2015 - 13:46) писал:

Я заходила, меняла и никакого результата!

В main.css добавьте

#views_block .item img {
height: 100px;
}

Наверх

#14 mariteks

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

Пользователи
150 сообщений

ГородКиров

Отправлено 28 Январь 2015 - 14:07

Alekseys (28 Январь 2015 - 13:51) писал:

В main.css добавьте

#views_block .item img {
height: 100px;
}

Спасибо, получилось. Скажите, как сделать теперь меньше расстояние между ними?

Наверх

#15 Alekseys

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

Пользователи
2 355 сообщений

Отправлено 28 Январь 2015 - 14:31

mariteks (28 Январь 2015 - 14:07) писал:

Спасибо, получилось. Скажите, как сделать теперь меньше расстояние между ними?

В main.css добавьте

#views_block .owl-item {
width: 130px!important;
}

Наверх

#16 mariteks

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

Пользователи
150 сообщений

ГородКиров

Отправлено 28 Январь 2015 - 14:36

Alekseys (28 Январь 2015 - 14:31) писал:

В main.css добавьте

#views_block .owl-item {
width: 130px!important;
}

Спасибо. Еще вопросик:
Можно ли сделать сравнение товаров, так же как в корзине, выпадающим списком. Примерно как на картинке

и разместить рядом с корзиной на панели?

Наверх

#17 Ирина345

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

Модераторы
5 709 сообщений

Отправлено 28 Январь 2015 - 19:08

mariteks (28 Январь 2015 - 14:36) писал:

Спасибо. Еще вопросик:
Можно ли сделать сравнение товаров, так же как в корзине, выпадающим списком. Примерно как на картинке Прикрепленный файл

сравнение.PNG и разместить рядом с корзиной на панели?

Здравствуйте, к сожалению переменная отображающая товары в сравнение, доступна только для страницы "Сравнения"

Наверх

#18 Vaccina

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

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

Отправлено 29 Январь 2015 - 02:01

В шаблоне HTML после:

</dl>
						 </div>
						 <div class="newCountTovars" style="display:none">{CART_COUNT_TOTAL}</div>
					 </div>

вставьте:

<!-- блок сравнения на главной -->
					 <div class="cart">
						 <div class="cartBtn" title="Перейти в корзину">
							 <div class="cartNameBtn1">Сравнение</div>
							 <div class="cartImg"></div>
							 <a class="countTovars" href="{COMPARE_URL}" data-count="{COMPARE_COUNT}">
								 <span>{COMPARE_GOODS_COUNT}</span>
							 </a>
						 </div>
						 <div class="listCart" data-url="{HTTP_HOST}">
							 <dl class="products">
								 {% FOR compare_goods %}
									 <dt class="cart_block_product_{compare_goods.ID} item" >
										 <div class="cartImgBlock">
											 <a href="{compare_goods.URL}" title="Перейти на страницу &laquo;{compare_goods.NAME}&raquo; ">
												 <img src="{% IF compare_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png?design=snow{% ELSE %}{compare_goods.IMAGE_ICON}{% ENDIF %}" alt="{compare_goods.NAME}">
											 </a>
										 </div>
										 <div class="cartNameBlock">
											 <h5>
												 <a href="{compare_goods.URL}">{compare_goods.NAME}</a>
											 </h5>
											 <div class="cartPriceBlock black">
												 {compare_goods.MOD_PRICE_NOW | money_format}
											 </div>
										 </div>
									 </dt>
								 {% ENDFOR %}
									 <a href="{COMPARE_URL}" class="btn btn-success" title="Перейти к сравнению">Перейти к сравнению</a>
									 </dt>
							 </dl>
						 </div>
					 </div>

Далее в main.css найдите:

.sectionblock-container {
display: inline-block;
float: left;
width: 88%;
}

замените на:

.sectionblock-container {
display: inline-block;
float: left;
width: 70%;
}

далее в main.js найдите:

/*Блок корзины на всех страницах */
$('.cartBtn').on('click', function () {
	 if ($('.js-hideBackground').length > 0) {
		 $('.js-hideBackground').remove();
		 $listCart.removeClass('show');
	 } else {
		 $listCart.addClass('show');
		 $('body').append('<div class="js-hideBackground"></div>');
		 $('.js-hideBackground').on('click', function (event) {
			 $('.js-hideBackground').unbind().remove();
			 event.preventDefault();
			 $listCart.removeClass('show');
			 return true;
		 });
	 }
	 replaceDelUrl();
	 return false;
});

замените на:

/*Блок корзины на всех страницах */
$('.cartBtn').on('click', function () {
	 if ($('.js-hideBackground').length > 0) {
		 $('.js-hideBackground').remove();
		 $(this).closest('.cart').find('.listCart').removeClass('show');
	 } else {
		 $(this).closest('.cart').find('.listCart').addClass('show');
		 $('body').append('<div class="js-hideBackground"></div>');
		 $('.js-hideBackground').on('click', function (event) {
			 $('.js-hideBackground').unbind().remove();
			 event.preventDefault();
			 $(this).closest('.cart').find('.listCart').removeClass('show');
			 return true;
		 });
	 }
	 replaceDelUrl();
	 return false;
});

Наверх

#19 mariteks

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

Пользователи
150 сообщений

ГородКиров

Отправлено 31 Январь 2015 - 13:42

Vaccina (29 Январь 2015 - 02:01) писал:

В шаблоне HTML после...

Спасибо огромное!!!!

Наверх

#20 Oksana88

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

Пользователи
20 сообщений

Отправлено 14 Апрель 2015 - 22:57

Добрый день!
Как сделать так же как описал пользователь "мистка":
1 разместить другие фото не внизу а сбоку основной фотки
2 выделить их пиксельной рамочкой
3 сделать хоть какой ни будь зум
у меня тоже шаблон Бистро, но нет кодов которые Вы указали заменить.
Аккаунт SL-337504