Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы » Как адаптировать "загружаемая галерея изображений" под карусель owl?

Как адаптировать "загружаемая галерея изображений" под карусель owl?


     23.03.2017    Общие вопросы, jQuery, Общие вопросы по PHP, Хаки    390

вопрос
Помогите. Как адаптировать "загружаемая галерея изображений" под карусель owl?

Либо на крайний случай, подскажите, как сделать в новой версии dle, чтобы загружаемые картинки в описание были ссылками, а то они картинками и не понятно как их в доп поле вставлять. Буду благодарен!)

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


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

Gott
Юзер

Gott - 24 марта 2017 12:38 -

Да да, я тоже 4 раза публиковал такой вопрос, если кто знает подскажите пожалуйста!

stopani
Юзер

stopani - 24 марта 2017 17:08 -

Пример для полной новости
Открыть show.full.php строка 1700-1710
Найти

						if($thumb_url) {
							$gallery_image[] = "<li><a href=\"$img_url\" onclick=\"return hs.expand(this, { slideshowGroup: 'xf_{$row['id']}_{$value[0]}' })\" target=\"_blank\"><img src=\"{$thumb_url}\" alt=\"\" /></a></li>";
						} else $gallery_image[] = "<li><img src=\"{$img_url}\" alt=\"\" /></li>";
					
					}
					
					$xfieldsdata[$value[0]] = "<ul class=\"xfieldimagegallery {$value[0]}\">".implode($gallery_image)."</ul>";
					$uniq_id = "xf_{$row['id']}_{$value[0]}";
					$onload_scripts[$uniq_id] = "hs.addSlideshow({slideshowGroup: '{$uniq_id}', interval: 4000, repeat: false, useControls: true, fixedControls: 'fit', overlayOptions: { opacity: .75, position: 'bottom center', hideOnMouseOut: true } });";
					
				}


Заменить на

						if($thumb_url) {
							$gallery_image[] = "<li class=\"item\"><a href=\"$img_url\" onclick=\"return hs.expand(this, { slideshowGroup: 'xf_{$row['id']}_{$value[0]}' })\" target=\"_blank\"><img src=\"{$thumb_url}\" alt=\"\" /></a></li>";
						} else $gallery_image[] = "<li class=\"item\"><img src=\"{$img_url}\" alt=\"\" /></li>";
					
					}
					
					$xfieldsdata[$value[0]] = "<ul class=\"owl-carousel owl-theme xfieldimagegallery {$value[0]}\">".implode($gallery_image)."</ul>";
					$uniq_id = "xf_{$row['id']}_{$value[0]}";
					$onload_scripts[$uniq_id] = "hs.addSlideshow({slideshowGroup: '{$uniq_id}', interval: 4000, repeat: false, useControls: true, fixedControls: 'fit', overlayOptions: { opacity: .75, position: 'bottom center', hideOnMouseOut: true } });";
					
				}


И подключить скрипт

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">    
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script>
$('.owl-carousel').owlCarousel({
    items:4,
    margin:10
});
    </script> 

Sokolov
Юзер

Sokolov - 24 марта 2017 17:36 -

Спасибо!) Подскажи ещё как в шаблоне это вывести?

stopani
Юзер

stopani - 24 марта 2017 17:38 -

[xfvalue_poster] 


poster - название поля

Sokolov
Юзер

Sokolov - 24 марта 2017 17:39 -

Работает, спасибо большое!
А как сделать чтобы они при клике увеличивались?

stopani
Юзер

stopani - 24 марта 2017 17:41 -

Они и так должны увеличиваться, смотри настройки двига

Sokolov
Юзер

Sokolov - 24 марта 2017 17:43 -

А где такое смотреть?
В настройках изображения такого нет

Sokolov
Юзер

Sokolov - 24 марта 2017 18:29 -

Я так понимаю они не через тег [medium] сделаны, поэтому и не увеличиваются. А как сделать чтобы через этот тег были?

Sokolov
Юзер

Sokolov - 24 марта 2017 19:03 -

Разобрался. Нужно в настройках доп поля поставить галочку - "Создать уменьшенную копию", а также задать ей размер.

redissx
Юзер

redissx - 24 марта 2017 21:01 -

Вы серьезно? Править движок для подключения карусели? А чем не нравится обычно
$('.xfieldimagegallery').owlCarousel({});

?
Там будет в ul div, но какая разница, если это все равно генерируется js-ом и все работает? Классы предварительно опять же через
$('.xfieldimagegallery').addClass('owl-carousel owl-theme').owlCarousel({});

Что-то вы тут намудрили, в общем.

Sokolov
Юзер

Sokolov - 24 марта 2017 23:04 -

Спасибо. Твой способ больше подошёл). В первом способе авто-прокрутка не работала почему-то.

stopani
Юзер

stopani - 24 марта 2017 22:18 -

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

Sokolov
Юзер

Sokolov - 25 марта 2017 00:25 -


А кто подскажет. В карусели есть кнопки "prev/next", как мне им имя поменять на "Назад/Вперёд"?

redissx
Юзер

redissx - 25 марта 2017 21:51 -

в настройках

	 $("#owl-slide").owlCarousel({
		navText:['назад','вперед']
	 });

Sokolov
Юзер

Sokolov - 25 марта 2017 22:07 -

Не работает так((

Но зато вот так работает)
navigationText:["назад","вперед"],

Спасибо!)

Можешь ещё подсказать?
Теперь если мышкой прокручивать то начинает увеличивать картинку.
А надо чтобы увеличивало только если нажимаешь а не прокручиваешь. Крайне не удобно((

redissx
Юзер

redissx - 26 марта 2017 12:25 -

Версия значит не последняя. На счет проблемы с мышью не знаю.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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

наверх