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


Ирина345

Регистрация: 07 апр. 2014
Offline Активность: 21 июля 2019 08:41
*****

#259256 Галерея Изображений На Сайт Или Фото Галерея

Отправлено Ирина345 на 30 Март 2017 - 15:08

Здравствуйте, что бы на отдельной страницы/ в описание товара/ в описание каталога добавить галерею изображений или фото галерею, необходимо установить карусель.
В данной инструкции мы будем использовать карусель owlCarousel.
В шаблонах Лазурь, Спорт, Рассвет, Лето, Инфинити, Бистро, Новогодний, Город, Цитрус, Ночь, Комфорт, Карамель, Хамелеон, Шоколад уже установлена библиотека owlCarousel и скачивать/загружать файл не требуется.
На части шаблонов она присутствует и поэтому загружать её не нужно, но на части шаблонов её нет, поэтому по указанной ниже ссылке скачайте файлы и добавьте их в раздел Сайт-Редактор шаблонов. Далее найдите в шаблоне hTML
</head>
и перед ним вставьте код
	<script type="text/javascript" src="{ASSETS_JS_PATH}owlmin.js"></script>
	<link rel="stylesheet" href="{ASSETS_STYLES_PATH}owl.carousel.css" type="text/css" />

Если на Вашем шаблоне уже установлена галерея, то инструкцию выше не выполняйте.
Далее зайдите в редактор товара/страницы/каталога и на панели инструментов, через кнопку "Источник", откройте код описание.
Далее необходимо вставить код галереи
Если при нажатие на изображение требуется дальнейший переход на новую страницу, то вставляйте код ниже
<div class="brend">
<div class="box-up-sell">
<div class="navigation">
<span class="next"><i class="fa fa-angle-left"></i></span>
<span class="prev"><i class="fa fa-angle-right"></i></span>
</div>
<div>
<div class="brend-grid">
<div class="item"><a href="ссылка на страницу"><img src="ссылка на изображение" /></a></div>
<div class="item"><a href="ссылка на страницу"><img src="ссылка на изображение" /></a></div>
<div class="item"><a href="ссылка на страницу"><img src="ссылка на изображение" /></a></div>
<div class="item"><a href="ссылка на страницу"><img src="ссылка на изображение" /></a></div>
<div class="item"><a href="ссылка на страницу"><img src="ссылка на изображение" /></a></div>
<div class="item"><a href="ссылка на страницу"><img src="ссылка на изображение" /></a></div>

</div>
</div>
</div>
</div>
где измените ссылку на страницу и укажите ссылку на изображение карусели.

Если необходимо вставить просто галерею без дальнейших переходов, то вставляйте код ниже
<div class="brend">
<div class="box-up-sell">
<div class="navigation">
<span class="next"><i class="fa fa-angle-left"></i></span>
<span class="prev"><i class="fa fa-angle-right"></i></span>
</div>
<div>
<div class="brend-grid">
<div class="item"><img src="ссылка на изображение" /></div>
<div class="item"><img src="ссылка на изображение" /></div>
<div class="item"><img src="ссылка на изображение" /></div>
<div class="item"><img src="ссылка на изображение" /></div>
<div class="item"><img src="ссылка на изображение" /></div>
<div class="item"><img src="ссылка на изображение" /></div>

</div>
</div>
</div>
</div>
где пропишите ссылки на изображения

далее в конец файла main.js вставьте

jQuery(function($) {
  var carouselU = $(".brend .brend-grid");
	carouselU.owlCarousel({
	  items: 5,
	  itemsDesktop: [1199,4],
	  itemsDesktopSmall: [991,3],
	  itemsTablet: [767,2],
	  itemsTabletSmall: [641,3],
	  itemsMobile: [481,1],
	  responsive: true,
	  responsiveRefreshRate : 200,
	  responsiveBaseWidth: window,
	  lazyLoad: true,
	  pagination: false,
	  itemsScaleUp: true,
	  slideSpeed: 800,
	  stopOnHover: true,
	  touchDrag: true,
	  autoPlay: false,
	  addClassActive: true,
	  autoHeight: true,
	  afterAction: function (e) {
		if(this.$owlItems.length > this.options.items){
		  $(".brend .navigation a").show();
		}else{
		  $(".brend .navigation a").hide();
		}
	  }
	});
  jQuery(".brend .navigation .prev").on("click", function(e){
	e.preventDefault();
	carouselU.trigger("owl.prev");
  });
  jQuery(".brend .navigation .next").on("click", function(e){
	e.preventDefault();
	carouselU.trigger("owl.next");
  });
});


где за количество изображений в строке отвечает показатель 5, а показатель 800 за скорость прокрутки.

Прикрепленные файлы

  • Прикрепленный файл  owlmin.zip   6,31К   78 Количество загрузок:
  • Прикрепленный файл  owl.carousel.css      415 Количество загрузок:



#234632 Мелкие Изменения Стиля

Отправлено Юля123 на 20 Апрель 2016 - 11:12

Просмотр сообщенияGudBay (19 Апрель 2016 - 18:27) писал:

1. Заменил, сейчас при масштабе 100% появились полосы справа от изображений в блоке.

Поменял на:

.products-grid .item .item-inner .item-img > a.product-image img {
width: auto;
padding: 0;
height: 100%;}

При смене масштаба со 100% на 110% изменяются размеры блоков. Они становятся Уже и изображение "уезжает" вправо (режется правая часть) получаются изображения не по центру. Весь день менял значения разных параметров, так и не добился нужного.

Напомню задачу: чтобы изображения четко вписывались в размеры блока товара. Без отступов. А высота блоков оставалась у всех одинаковой. Решение пока вижу одно, Все картинки кропить 50х50.

2. И еще, в режиме отображения товаров - таблица, я убрал затемнение (изменение цвета фона за текстом) текстовой части товара, при наведении на блок. Но при масштабе 175% затемнение текстовой части осталось, там надо прописывать отдельно размеры блоков и изображений? При этом изображения товаров смещаются влево и остается белая полоса справа, если же убрать из шаблона

display: table-cell;

то изображения выравниваются по центу блока, (что лучше чем выравнивание по левой части), но лучше бы вообще без белых полос. Чтобы изображение было на весь размер блока.

3. Вот тут можно посмотреть как влияет на изображение различные варианты значений размеров:

http://rotorweb.ru/w.../scale_img.html

Мне подходит второй вариант и предпоследний.

P.S. В CSS и HTML не силен, впервые столкнулся только сейчас.

P.S.S А шаблон хороший! И вообще вы молодцы.

Здравствуйте, наилучшим решением Вашей проблемы будет заливка одинаковых по размеру изображений изначально. Иначе всё равно будут возникать проблемы с отображением.

2) Прикрепите, пожалуйста скриншот с описанной проблемой.