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


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

галерея фотогалерея

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

#1 Ирина345

Ирина345

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

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

Отправлено 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К   61 Количество загрузок:
  • Прикрепленный файл  owl.carousel.css      314 Количество загрузок:


#2 magiya1984

magiya1984

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

  • Пользователи
  • PipPipPipPip
  • 434 сообщений
  • ГородМосква

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

спасибо

#3 magiya1984

magiya1984

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

  • Пользователи
  • PipPipPipPip
  • 434 сообщений
  • ГородМосква

Отправлено 30 Март 2017 - 15:37

Просмотр сообщенияИрина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 за скорость прокрутки.

Не цепляются стили и скрипты если добавлять галлерею через страницу Аккаунт SL-411178

#4 Ирина345

Ирина345

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

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

Отправлено 30 Март 2017 - 16:59

Просмотр сообщенияmagiya1984 (30 Март 2017 - 15:37) писал:

Не цепляются стили и скрипты если добавлять галлерею через страницу Аккаунт SL-411178
Здравствуйте, уточните куда именно Вы добавили код карусели?
На данный момент у Вас отсутствует подключение стилей, найдите в шаблоне HTML
<script type="text/javascript" src="{ASSETS_JS_PATH}owlmin.js"></script>
после вставьте
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}owl.carousel.css" type="text/css" />


#5 galya.bu7

galya.bu7

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

  • Пользователи
  • PipPipPipPip
  • 323 сообщений
  • ГородСмоленск

Отправлено 19 Январь 2018 - 13:15

Добрый день.  Аккаунт SL-318701. Все сделали по инструкции. карусель добавляем вот сюда: http://akpotolok.ru/...yazhnye-potolki, но она не работает....

#6 Stasya

Stasya

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

  • Модераторы
  • 4 007 сообщений

Отправлено 25 Январь 2018 - 14:34

Просмотр сообщенияgalya.bu7 (19 Январь 2018 - 13:15) писал:

Добрый день.  Аккаунт SL-318701. Все сделали по инструкции. карусель добавляем вот сюда: http://akpotolok.ru/...yazhnye-potolki, но она не работает....
Здравствуйте. Проблема заключается сразу в нескольких нюансах, но первый из них это то, что на Вашем сайте используется очень много разнообразных скриптов (подключаемых и не подключаемых) между которыми возникает конфликт. Так же дополнительные файлы подключены не в том порядке и используется код, который мешает работать другим скриптам. В данном случае необходимо прежде всего разбираться для чего все подключено и написано. При отключении некоторых скриптов карусель начинает работать, но мы не можем быть уверены, для чего нужны скрипты.





Темы с аналогичным тегами галерея, фотогалерея

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

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