Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Шаблоны (TPL) » Как каруселить стандартную галерею на owl.carousel?

Как каруселить стандартную галерею на owl.carousel?

     15.12.2016    Шаблоны (TPL), jQuery, Ламерские вопросы    3073

вопрос
Вопрос собственно в сабже.

Как каруселить стандартную галерею (загружаемую в доп поле загружаемая галерея изображений) на owl.carousel?
Именно галерею. Как каруселить отдельные доп поля разобрался.
Так крутится отдельно загружаемые в доп поля изображения 
<!-- карусель -->
			<div id="owl-demo">
			[xfgiven_img-1]<div class="item"> [xfvalue_img-1] </div>[/xfgiven_img-1]
			[xfgiven_img-2]<div class="item"> [xfvalue_img-2] </div> [/xfgiven_img-2]
			[xfgiven_img-3]<div class="item"> [xfvalue_img-3] </div>[/xfgiven_img-3]
			[xfgiven_img-4]<div class="item"> [xfvalue_img-4] </div>[/xfgiven_img-4]
			[xfgiven_img-5]<div class="item"> [xfvalue_img-5] </div>[/xfgiven_img-5]
			[xfgiven_img-6]<div class="item"> [xfvalue_img-6] </div>[/xfgiven_img-6]
			[xfgiven_img-7]<div class="item"> [xfvalue_img-7] </div>[/xfgiven_img-7]
			</div>
<!-- карусель -->

Подключение и инициализация
<script src="{THEME}/js/owl.carousel.min.js"></script>
	<script>
		$(document).ready(function() {
 		  $("#owl-demo").owlCarousel({
		 	  autoPlay: 3000, //Set AutoPlay to 3 seconds
		 	  items : 5,
			  itemsDesktop : [1199,3],
			  itemsDesktopSmall : [979,3]
		  });
		});
	</script>

Ответа пока нет

 

5 комментариев

Stasiq
Юзер

Stasiq - 15 декабря 2016 13:46 -

Увы, но никак
Сам пытался, искал, спрашивал. но всё в пустую...
salam
Юзер

salam - 9 февраля 2021 05:57 -

Сделал так:
Добавил в fullstory
<script>
$(document).ready(function() {

$('.xfieldimagegallery').addClass('owl-carousel owl-theme').owlCarousel({

autoPlay: 9000, //Set AutoPlay to 3 seconds

items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]

});

});
</script>
TEDII
Юзер

TEDII - 8 марта 2021 15:34 -

Можешь полностью скинуть как у тебя прописано?

<div id="owl-carousel "class="owl-carousel owl-theme">



[xfgiven_imagegallery] <div class="item">[xfvalue_imagegallery] </div> [/xfgiven_imagegallery]
</div>

я так прописал не работает...
salam
Юзер

salam - 9 марта 2021 04:55 -

Закидывай в папки шаблона
/css/owl.carousel.css
/css/owl.theme.css
/js/owl.carousel.min.js

в main:
перед </head>
<link href="{THEME}/css/owl.carousel.css" type="text/css" rel="stylesheet">
<link href="{THEME}/css/owl.theme.css" type="text/css" rel="stylesheet">
перед </body> подключаем скрипт
<script src="{THEME}/js/owl.carousel.min.js"></script>

В fullstory
В самый низ
<script>
$(document).ready(function() {

$('.xfieldimagegallery').addClass('owl-carousel owl-theme').owlCarousel({

autoPlay: 9000, //Set AutoPlay to 3 seconds

items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]

});

});
</script>

Где нравится выводим галерею
у меня сразу после {full-story}

<div class="clr"></div>
[xfgiven_gallery_fs]<hr><div class="item"> [xfvalue_gallery_fs] </div>[/xfgiven_gallery_fs]
<div class="clr"></div><hr>

gallery_fs доп поле для галереи изображений

ps Паша не могу вставить код <> не работает у меня
salam
Юзер

salam - 9 марта 2021 07:37 - 


Закидывай в папки шаблона 
/css/owl.carousel.css
/css/owl.theme.css
/js/owl.carousel.min.js

в main:
перед </head>

<link href="{THEME}/css/owl.carousel.css" type="text/css" rel="stylesheet">
<link href="{THEME}/css/owl.theme.css" type="text/css" rel="stylesheet">

перед </body> подключаем скрипт 
<script src="{THEME}/js/owl.carousel.min.js"></script>

В fullstory 
В самый низ
<script>
		$(document).ready(function() {
 
		  $('.xfieldimagegallery').addClass('owl-carousel owl-theme').owlCarousel({
		 
			  autoPlay: 9000, //Set AutoPlay to 3 seconds
		 
			  items : 4,
			  itemsDesktop : [1199,3],
			  itemsDesktopSmall : [979,3]
		 
		  });
		 
		});
	</script>
	
Где нравится выводим галерею 
у меня сразу после {full-story}

		<div class="clr"></div>
		[xfgiven_gallery_fs]<hr><div class="item"> [xfvalue_gallery_fs] </div>[/xfgiven_gallery_fs]
		<div class="clr"></div>
		<hr>
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 19.02.2012 SlimYalta  Шаблоны (TPL), Общие вопросы по PHP
 16.07.2012 5centr5  Шаблоны (TPL), Стили (CSS)
 30.07.2014 Bodyak  Шаблоны (TPL), Хаки
 03.08.2014 Galactic  Шаблоны (TPL)
 08.09.2014 Arsen  Шаблоны (TPL)
 12.07.2015 follor  Шаблоны (TPL)
 27.12.2015 Djinn  Шаблоны (TPL), jQuery
 23.01.2016 magical  Шаблоны (TPL), Стили (CSS), jQuery
 27.04.2016 online hero  Общие вопросы, Шаблоны (TPL), Общие вопросы по PHP, Ламерские вопросы
  • Shandi | Почему не отображается картинка в галере ... 2
    Фото Shandi
    Shandi
    Почему не отображается картинка в галерее?
    Сегодня, 08:53
    Мне как ламеру ничего не понятно:( Кто-то это исправляет за денужку?
  • TeraMoune | Как сделать водяной знак с заменой? 1
    Фото TeraMoune
    TeraMoune
    Как сделать водяной знак с заменой?
    Вчера, 23:29
    Картинки загружаются в разные директории в зависимости от длительного периода загрузок этих папок может быть десятки. Более того оригинальные изображения не всегда имеют безопасные имена и при загрузке часто переименовываются. Так что не факт, что оригиналы соответствуют загруженным копиям.
  • TeraMoune | Почему не отображается картинка в галере ... 2
    Фото TeraMoune
    TeraMoune
    Почему не отображается картинка в галерее?
    Вчера, 23:19
    Потому что какой-то стиль может скрывает изображение. Проинспектируйте элемент, отыщите в древо html изображение и указав на него указатель в инспекторе кода посмотрите не наследуются ли какие-то посторонние стили.
  • Beton1205 | Как реализовать шифрование трафика? 4
    Фото Beton1205
    Beton1205
    Как реализовать шифрование трафика?
    Вчера, 17:55
    Делается очень просто. Грузим файлы на cdn, либо друглй сервак.
    На сайте пишем простой скрипт, который будет получать реальные адреса, например адрес файла site.ru/video.mp4, скрипт долюен проверять, что с вашего адреса идет звпрос. И тупо скриптом выводим ссылку аля vashsite.site/video.mp4 и прокидукм ее mod rewrite
  • mondolfo | Как вывесит в comments.tpl картинку с но ... 7
    Фото mondolfo
    mondolfo
    Как вывесит в comments.tpl картинку с новости?
    23-11-2024, 23:42
    кто-нибудь решил эту?
  • Darkzone | Выбор категории для доп. поля? 4
    Фото Darkzone
    Darkzone
    Выбор категории для доп. поля?
    22-11-2024, 17:08
    Разъясните как вытащить id?
  • lutskboy | Вытащить все данные из определенного доп ... 1
    Фото lutskboy
    lutskboy
    Вытащить все данные из определенного доп поля?
    22-11-2024, 16:17
    в adminer можно.
  • lutskboy | Выбор категории для доп. поля? 4
    Фото lutskboy
    lutskboy
    Выбор категории для доп. поля?
    22-11-2024, 16:14
    выбрать все кроме такого нет. можно с бд достать все ид через запятую и вставить в xfields.txt
    js скрипт можно написать
    
<script>
    window.addEventListener('load', ()=> {
        $('#category').on('change', function() {
            var value = $(this).val();
            if ($.isArray(value)) {
            	ShowOrHideEx("xfield_holder_year", jQuery.inArray('1', value) != -1 || jQuery.inArray('2', value) != -1 );
            } else {
            	ShowOrHideEx("xfield_holder_year", value == 1 || value==2);
            }
        })
    });
</script>
year доп поле . 1 и 2 катег
  • Darkzone | Выбор категории для доп. поля? 4
    Фото Darkzone
    Darkzone
    Выбор категории для доп. поля?
    22-11-2024, 14:39
    Смотрите, Нужно чтоб обязательное к заполнению доп. поле при добавлении новости, выводилось во всех категориях, кроме двух. Так как количество категорий довольно большое, есть ли способ, не тыкать каждую категорию в которой будет отображаться доп.поле. Надеюсь я смог разъяснить.
  • lutskboy | Выбор категории для доп. поля? 4
    Фото lutskboy
    lutskboy
    Выбор категории для доп. поля?
    22-11-2024, 13:52
    где выводить? админка или сайт
наверх