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


Соц. Сети

Автор Nerf, 08 февр. 2016 14:12
соц.сети

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

#61 Nerf

Nerf

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

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

Отправлено 18 Февраль 2016 - 10:31

Просмотр сообщенияVaccina (18 Февраль 2016 - 06:47) писал:

1. В main.css добавьте:
.general-img.popup-gallery {
width: 90%;
margin: 0 auto;
}
2. В main.css найдите:
.thumblist-box {
margin: 30px 0 0;
max-height: 108px;
border-top: 3px double #ffc83d;
border-bottom: 3px double #ffc83d;
padding: 10px 0;
overflow: hidden;
position: relative;
}

замените на:
.thumblist-box {
margin: 30px 0 0;
max-height: 108px;
padding: 10px 0;
overflow: hidden;
position: relative;
}
3. В шаблоне Товар найдите:
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
	 {% IFNOT goods_images_empty %}
		 <div id="thumblist" class="thumblist popup-gallery">
		 {% FOR goods_images %}

замените на:
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
	 {% IFNOT goods_images_empty %}
		 <div id="thumblist" class="thumblist">
		 {% FOR goods_images %}

Далее в main.js найдите:
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Загружаем изображение #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">Изображение #%curr%</a> не загружено.',
titleSrc: function(item) {
return item.el.attr('title') + '<small>StoreLand.ru</small>';
}
}
});

после него пропишите:
$(".thumblist-box li img").click(function() {
							 var $src = $(this).attr('src');
							 $(".general-img img").attr('src', $src.replace('mini', 'main'));
							 return false;
});
$(".thumblist-box li a").click(function() {
							 var $src = $(this).attr('src'); var $href = $(this).attr('href');
							 $(".general-img a").attr('href', $href.replace('mini', 'main'));
							 return false;
});
1. Рамки не добавились и при просмотре другого фото размер автоматом становится очень маленький.
2. Нету возможности выбрать первоначальное изображение товара.

Мне же охота чтоб основное фото товара чуть чуть уменьшилось, понял где менять размер изображения, но хотелось бы менять по высоте и ширине, если по каким-то параметрам изображение не вписывается в мои рамки, то автоматом уменьшаетсяизображение, а не меняются рамки.
Если нажимаю просмотр другого изображения товара, то рамка должна оставаться такого размера который я подобрал.
Вот пример того что сейчас на данный момент.

#62 Юля123

Юля123

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

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

Отправлено 18 Февраль 2016 - 14:49

Просмотр сообщенияNerf (18 Февраль 2016 - 10:31) писал:

1. Рамки не добавились и при просмотре другого фото размер автоматом становится очень маленький.
2. Нету возможности выбрать первоначальное изображение товара.

Мне же охота чтоб основное фото товара чуть чуть уменьшилось, понял где менять размер изображения, но хотелось бы менять по высоте и ширине, если по каким-то параметрам изображение не вписывается в мои рамки, то автоматом уменьшаетсяизображение, а не меняются рамки.
Если нажимаю просмотр другого изображения товара, то рамка должна оставаться такого размера который я подобрал.
Вот пример того что сейчас на данный момент.

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

		<!-- Другие изображения товара. Отображаются если есть изображения товара -->
		{% IFNOT goods_images_empty %}
		  <div id="thumblist" class="thumblist">
			{% FOR goods_images %}
			  {% IFNOT goods_images.first %}
				<li><a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li>
			  {% ENDIF %}
			{% ENDFOR %}
		  </div>
		{% ENDIF %}

заменить на код:

<!-- Другие изображения товара. Отображаются если есть изображения товара -->
		 {% IFNOT goods_images_empty %}
				 <div id="thumblist" class="thumblist">
				 {% FOR goods_images %}
				<li><a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li>
			{% ENDFOR %}
		  </div>
		{% ENDIF %}


в конце main.css добавьте код:
img#image {
	width: 300px !important;
}

#63 Nerf

Nerf

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

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

Отправлено 18 Февраль 2016 - 17:56

Просмотр сообщенияЮля123 (18 Февраль 2016 - 14:49) писал:

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

	 <!-- Другие изображения товара. Отображаются если есть изображения товара -->
	 {% IFNOT goods_images_empty %}
		 <div id="thumblist" class="thumblist">
		 {% FOR goods_images %}
			 {% IFNOT goods_images.first %}
			 <li><a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li>
			 {% ENDIF %}
		 {% ENDFOR %}
		 </div>
	 {% ENDIF %}

заменить на код:

<!-- Другие изображения товара. Отображаются если есть изображения товара -->
		 {% IFNOT goods_images_empty %}
				 <div id="thumblist" class="thumblist">
				 {% FOR goods_images %}
			 <li><a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li>
		 {% ENDFOR %}
		 </div>
	 {% ENDIF %}


в конце main.css добавьте код:
img#image {
width: 300px !important;
}
прикрепляю два файла:
На одном написано, что не так ( Скрин )
На втором видно что прошу. ( Скрин )

#64 Nerf

Nerf

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

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

Отправлено 19 Февраль 2016 - 14:04

Кто подскажет ?

#65 Ирина345

Ирина345

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

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

Отправлено 19 Февраль 2016 - 16:06

Просмотр сообщенияNerf (18 Февраль 2016 - 17:56) писал:

прикрепляю два файла:
На одном написано, что не так ( Скрин )
На втором видно что прошу. ( Скрин )
Здравствуйте, найдите в шаблоне Товар код
<div class="product-img-box col-md-5 col-xs-12">
	  <div class="general-img popup-gallery">
		{% IF GOODS_IMAGE_EMPTY %}
		  <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=azure" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
		{% ELSE %}
		  <a href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}">
			<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" class="goods-image-medium" />
		  </a>
		{% ENDIF %}
		{% IF GOODS_IS_NEW %}
		  <span class="ico-product new">Новинка</span>
		{% ELSEIF GOODS_IS_TOP %}
		  <span class="ico-product best">Хит</span>
		{% ENDIF %}
		{% IF GOODS_MOD_MAX_DISCOUNT %}
		  <span class="ico-product sale">Скидка</span>
		{% ENDIF %}
	  </div><!-- END основное изображение товара -->
	  <div class="thumblist-box" {% FOR goods_images %}{% IF goods_images.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
		<span class="next"></span>
		<span class="prev"></span>
		<!-- Другие изображения товара. Отображаются если есть изображения товара -->
				 {% IFNOT goods_images_empty %}
								 <div id="thumblist" class="thumblist">
								 {% FOR goods_images %}
								<li><a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li>
						{% ENDFOR %}
				  </div>
				{% ENDIF %}
	  </div><!-- END другие изображение товара -->
	</div>
замените на
	 <div class="product-img-box col-md-5 col-xs-12">
	  <div class="general-img popup-gallery">
		{% IF GOODS_IMAGE_EMPTY %}
		  <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=azure" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
		{% ELSE %}
		  <a href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}"  rel="group" >
			<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" class="goods-image-medium main" />
		  </a>
		{% ENDIF %}
		{% IF GOODS_IS_NEW %}
		  <span class="ico-product new">Новинка</span>
		{% ELSEIF GOODS_IS_TOP %}
		  <span class="ico-product best">Хит</span>
		{% ENDIF %}
		{% IF GOODS_MOD_MAX_DISCOUNT %}
		  <span class="ico-product sale">Скидка</span>
		{% ENDIF %}
	  </div><!-- END основное изображение товара -->
	  <div class="thumblist" {% FOR goods_images %}{% IF goods_images.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
		<span class="next"></span>
		<span class="prev"></span>
		<!-- Другие изображения товара. Отображаются если есть изображения товара -->
				 {% IFNOT goods_images_empty %}
								 <div id="thumblist" class="thumblist-box thumblist popup-gallery">
								 {% FOR goods_images %}
								<li><a href="{goods_images.MEDIUM}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.MEDIUM}" alt="{goods_images.NAME}" class="goods-image-icon mini" itemprop="image" /></a></li>
						{% ENDFOR %}
				  </div>
				{% ENDIF %}
	  </div><!-- END другие изображение товара -->
	</div>


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

$(".thumblist-box li img").click(function() {
																var $src = $(this).attr('src');
																$(".general-img img").attr('src', $src.replace('mini', 'main'));
																return false;
  });
  $(".thumblist-box li a").click(function() {
																var $src = $(this).attr('src'); var $href = $(this).attr('href');
																$(".general-img a").attr('href', $href.replace('mini', 'main'));
																return false;
  });
замените на



$(".thumblist-box li img").click(function() {
																var $src = $(this).attr('src');
																$(".general-img img").attr('src', $src.replace('mini', 'main'));
																return false;
  });

#66 Nerf

Nerf

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

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

Отправлено 20 Февраль 2016 - 06:34

Просмотр сообщенияИрина345 (19 Февраль 2016 - 16:06) писал:

Здравствуйте, найдите в шаблоне Товар код
<div class="product-img-box col-md-5 col-xs-12">
	 <div class="general-img popup-gallery">
	 {% IF GOODS_IMAGE_EMPTY %}
		 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=azure" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
	 {% ELSE %}
		 <a href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}">
		 <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" class="goods-image-medium" />
		 </a>
	 {% ENDIF %}
	 {% IF GOODS_IS_NEW %}
		 <span class="ico-product new">Новинка</span>
	 {% ELSEIF GOODS_IS_TOP %}
		 <span class="ico-product best">Хит</span>
	 {% ENDIF %}
	 {% IF GOODS_MOD_MAX_DISCOUNT %}
		 <span class="ico-product sale">Скидка</span>
	 {% ENDIF %}
	 </div><!-- END основное изображение товара -->
	 <div class="thumblist-box" {% FOR goods_images %}{% IF goods_images.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
	 <span class="next"></span>
	 <span class="prev"></span>
	 <!-- Другие изображения товара. Отображаются если есть изображения товара -->
				 {% IFNOT goods_images_empty %}
								 <div id="thumblist" class="thumblist">
								 {% FOR goods_images %}
							 <li><a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li>
					 {% ENDFOR %}
				 </div>
			 {% ENDIF %}
	 </div><!-- END другие изображение товара -->
</div>
замените на
<div class="product-img-box col-md-5 col-xs-12">
<div class="general-img popup-gallery">
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=azure" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
{% ELSE %}
<a href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" rel="group" >
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" class="goods-image-medium main" />
</a>
{% ENDIF %}
{% IF GOODS_IS_NEW %}
<span class="ico-product new">Новинка</span>
{% ELSEIF GOODS_IS_TOP %}
<span class="ico-product best">Хит</span>
{% ENDIF %}
{% IF GOODS_MOD_MAX_DISCOUNT %}
<span class="ico-product sale">Скидка</span>
{% ENDIF %}
</div><!-- END основное изображение товара -->
<div class="thumblist" {% FOR goods_images %}{% IF goods_images.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
<span class="next"></span>
<span class="prev"></span>
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
{% IFNOT goods_images_empty %}
<div id="thumblist" class="thumblist-box thumblist popup-gallery">
{% FOR goods_images %}
<li><a href="{goods_images.MEDIUM}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.MEDIUM}" alt="{goods_images.NAME}" class="goods-image-icon mini" itemprop="image" /></a></li>
{% ENDFOR %}
</div>
{% ENDIF %}
</div><!-- END другие изображение товара -->
</div>


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

$(".thumblist-box li img").click(function() {
var $src = $(this).attr('src');
$(".general-img img").attr('src', $src.replace('mini', 'main'));
return false;
});
$(".thumblist-box li a").click(function() {
var $src = $(this).attr('src'); var $href = $(this).attr('href');
$(".general-img a").attr('href', $href.replace('mini', 'main'));
return false;
});
замените на



$(".thumblist-box li img").click(function() {
var $src = $(this).attr('src');
$(".general-img img").attr('src', $src.replace('mini', 'main'));
return false;
});
1. Рамка основного изображения плавает (меняет размеры)
2. Рамки дополнительных изображений не появились.
На скрине видно ( Скрин )

#67 Vaccina

Vaccina

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

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

Отправлено 20 Февраль 2016 - 06:46

В main.css найдите:
.general-img img {
	max-width: 100%;
	border: 1px solid #FFC83D;
	border-radius: 12px;
}

замените на:
.general-img img {
	max-width: 100%;
	border-radius: 12px;
}

далее найдите:
.general-img.popup-gallery {
	width: 70%;
	margin: 0 auto;
}

замените на:
.general-img.popup-gallery {
	width: 70%;
	margin: 0 auto;
	border: 1px solid #FFC83D;
	border-radius: 10px;
	padding: 5px;
	min-height: 260px;
}

далее найдите:
#thumblist li {
	display: block;
	float: left;
	margin: 0 10px 10px;
}

замените на:
#thumblist li {
	display: block;
	float: left;
	margin: 0 10px 10px;
	border-radius: 10px;
	padding: 0px 2.5px;
	border: 1px solid #FFC83D;
}

далее найдите:
.thumblist-box {
	margin: 30px 0 0;
	max-height: 108px;
	padding: 10px 0;
	overflow: hidden;
	position: relative;
}

замените на:
.thumblist-box {
	margin: 30px 0 0;
	max-height: 108px;
	padding: 10px 0;
	overflow: hidden;
	position: relative;
	height: 108px !important;
}
.thumblist .caroufredsel_wrapper {
	height: 108px !important;
}

#68 Nerf

Nerf

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

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

Отправлено 20 Февраль 2016 - 07:41

Просмотр сообщенияVaccina (20 Февраль 2016 - 06:46) писал:

В main.css найдите:
.general-img img {
max-width: 100%;
border: 1px solid #FFC83D;
border-radius: 12px;
}

замените на:
.general-img img {
max-width: 100%;
border-radius: 12px;
}

далее найдите:
.general-img.popup-gallery {
width: 70%;
margin: 0 auto;
}

замените на:
.general-img.popup-gallery {
width: 70%;
margin: 0 auto;
border: 1px solid #FFC83D;
border-radius: 10px;
padding: 5px;
min-height: 260px;
}

далее найдите:
#thumblist li {
display: block;
float: left;
margin: 0 10px 10px;
}

замените на:
#thumblist li {
display: block;
float: left;
margin: 0 10px 10px;
border-radius: 10px;
padding: 0px 2.5px;
border: 1px solid #FFC83D;
}

далее найдите:
.thumblist-box {
margin: 30px 0 0;
max-height: 108px;
padding: 10px 0;
overflow: hidden;
position: relative;
}

замените на:
.thumblist-box {
margin: 30px 0 0;
max-height: 108px;
padding: 10px 0;
overflow: hidden;
position: relative;
height: 108px !important;
}
.thumblist .caroufredsel_wrapper {
height: 108px !important;
}
Спасибо. Рамки появились. Остались небольшие пробелы. Есть возможность подсвета активной рамки?
Скрин

#69 Alekseys

Alekseys

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

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

Отправлено 20 Февраль 2016 - 09:55

Просмотр сообщенияNerf (20 Февраль 2016 - 07:41) писал:

Спасибо. Рамки появились. Остались небольшие пробелы. Есть возможность подсвета активной рамки?
Скрин
Здравствуйте. В main.css замените
#thumblist li {
		display: block;
		float: left;
		margin: 0 10px 10px;
		border-radius: 10px;
		padding: 0px 2.5px;
		border: 1px solid #FFC83D;
}
на
#thumblist li {
		display: block;
		float: left;
		margin: 0 10px 10px;
		border-radius: 10px;
		padding: 1.5px 4px;
		border: 1px solid #FFC83D;
}
Чтобы размер рамки не плавал, загрузите изображения одного формата, на данный момент, в указанном Вами товаре одно фото 500х500 пикселей, и два фото 628х612 пикселей. Приведите их к одному размеру.
Обратно в Главная



Темы с аналогичным тегами соц.сети

Количество пользователей, читающих эту тему: 1

0 пользователей, 1 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Лазурь
  5. → Главная
  6. Privacy Policy