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


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

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

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

#1 Ирина345

Ирина345

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

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

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


#2 magiya1984

magiya1984

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

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

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

спасибо

#3 magiya1984

magiya1984

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

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

Отправлено 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 709 сообщений

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

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

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

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

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

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

#7 Dimarik55

Dimarik55

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

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

Отправлено 22 Июль 2022 - 18:56

Добрый день.

Подскажите, как реализовать функционал галереи таким образом, что бы не было карусели а фото работ (более 100 шт) отображалось миниатюрами определенного размера, при клике на которую открывалось большое фото и была возможность управлять листать вправо, влево (по возможности запустить слайдер в автоматическом режиме.

Как пример: https://vipceiling.ru/omsk/photo

или как у меня в портфолио на cincopa: https://abriz55.ru/page/portfolio#

хочу отказаться от cincopa...

#8 Vaccina

Vaccina

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

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

Отправлено 06 Август 2022 - 07:22

Здравствуйте.

Вставляйте изображения в описание страницы через "Источник" по примеру ниже:
<a href="Ссылка на изображение">
		<img src="Ссылка на изображение" style="height:100px;" alt="" />
</a>

В шаблоне main.js в самом конце вставьте:
$(function() {
$('.htmlDataBlock a img').each(function(index) {
				 var link = $(this).parent('a');
				 if(!$(link).attr('rel')) {
						 $(link).attr('rel', 'gallery' + index);
				 }
				 $(link).click(function() {
						 $(this).fancybox({
								 fitToView : false,
								 width : '70%',
								 height : '70%',
								 autoSize : true,
								 closeClick : false
						 });
						 return(false);
				 });
});
});


#9 Dimarik55

Dimarik55

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

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

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

Просмотр сообщенияVaccina (06 Август 2022 - 07:22) писал:

Здравствуйте.

Вставляйте изображения в описание страницы через "Источник" по примеру ниже:
<a href="Ссылка на изображение">
	 <img src="Ссылка на изображение" style="height:100px;" alt="" />
</a>

В шаблоне main.js в самом конце вставьте:
$(function() {
$('.htmlDataBlock a img').each(function(index) {
				 var link = $(this).parent('a');
				 if(!$(link).attr('rel')) {
						 $(link).attr('rel', 'gallery' + index);
				 }
				 $(link).click(function() {
						 $(this).fancybox({
								 fitToView : false,
								 width : '70%',
								 height : '70%',
								 autoSize : true,
								 closeClick : false
						 });
						 return(false);
				 });
});
});

Получается немного не то... Изображения в сетке не квадратные, а если ставить указать ширину картинки, то она ее сжимает или растягивает.

И нет кнопок листинга фотографий

#10 Vaccina

Vaccina

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

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

Отправлено 18 Август 2022 - 02:47

Здравствуйте.

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

#11 Dimarik55

Dimarik55

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

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

Отправлено 18 Август 2022 - 06:23

Просмотр сообщенияVaccina (18 Август 2022 - 02:47) писал:

Здравствуйте.

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

Здравствуйте.
такую /page/portfolio?

#12 Vaccina

Vaccina

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

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

Отправлено 19 Август 2022 - 03:33

Здравствуйте.

Благодарю, зайдите в раздел Сайт - Редактор шаблонов - main.js - найдите:
$(function() {
$('.htmlDataBlock a img').each(function(index) {
								 var link = $(this).parent('a');
								 if(!$(link).attr('rel')) {
												 $(link).attr('rel', 'gallery' + index);
								 }
								 $(link).click(function() {
												 $(this).fancybox({
																 fitToView : false,
																 width : '70%',
																 height : '70%',
																 autoSize : true,
																 closeClick : false
												 });
												 return(false);
								 });
});
});

замените на:
$(function() {
$('.htmlDataBlock a[rel="gallery"]').fancybox();
});

В описании страницы через "Источник" ссылкам "a" задайте дополнительно rel="gallery", пример, было:
<a href="Ссылка на изображение">
		 <img src="Ссылка на изображение" style="height:100px;" alt="" />
</a>

стало:
<a href="Ссылка на изображение" rel="gallery">
		 <img src="Ссылка на изображение" style="height:100px;" alt="" />
</a>

Screenshot(5).png

По поводу квадратных изображений, у вас они сами по себе разных пропорций. Уточните пожалуйста, вы хотите их увеличить и обрезать до одинаковых размеров?





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

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

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