lightgallery для instantcms2

lightgallery в полях ft_html, text, ft_image типа контента

#1 28 октября 2016 в 16:24
Привет всем, решил поделиться как я подключил lightgallery к своему сайту. lightgallery это JQ скрипт который я использую на своем сайте вместо Lightbox, до этого я пользовался Colorbox в поле ft_html типа контента , которую предложил Олег Васильевич я.
По причине конфликтов скрипта с видео контентом, пришлось искать, что то новое.
Как подключать.
Скачиваем архив. Добавляем его в корень сайта.

Открываем main.tpl.php
Добавляем между <head> </head>
  1.  
  2. <?php $this->addMainCSS("templates/{$this->name}/lightgallery/lightgallery.css"); ?>
  3. <?php $this->addMainJS("templates/{$this->name}/lightgallery/lightgallery-all.min.js"); ?>
  4. <?php $this->addMainJS("templates/{$this->name}/lightgallery/lg-general.js"); ?>
  5.  


Все опции и настройки для работы скрипта есть на официальном сайте lightgallery.

Опции на вашем сайте настраиваются в папке /lightgallery/lg-general.js. Они настроены под мой сайт pipkis.ru/

Пример слайдера



Живой пример ft_html и ft_image (эти стили заложены в статьях, блоге, новостях итд.) Чирлидерши
ft_html- картинки в самом посте
ft_image — 1 картинка поста

Живой пример text. Этот стиль используется в комментариях, на стене пользователя и групп. Вот пример комментариев Комментарии

Если найдете ошибку и сможете исправить ее попрошу написать в комментариях. А если кто и сможет создать компонент буду благодарен.

И еще в файле lightgallery.css замените название сайта на свое для папки fonts

30.10.16г. Архив обновлен. Исправлены мелкие ошибки
31.10.16г. Архив обновлен. Упрощен код вывода изображений
05.12.16г. Архив обновлен. Упрощен css вывода кнопок в слайдере, теперь не нужно указывать путь сайта с шаблоном, добавлен код для комментариев, если у вас вдруг установлены смайлы EmojiOne, они не будут открываться в слайдере, добавлен слайдер в галерею изображений.
27.02.17г. Архив обновлен. Изменен css код- вместо белого окна появляется темное полупрозрачное. lightgallery обновлена до последней версии. Исправлена ошибка с конфликтом в live редакторе.
Прикрепленный файл
lightgallery_b1a03.zip 46 Кб
#2 28 октября 2016 в 16:46
Ну надо вам карму поднять чтобы в блог всё перенесли.
#3 28 октября 2016 в 17:57
pipkis, Спасибо, еще бы кто на первую ветку подсказал бы как прикрутить
#4 28 октября 2016 в 18:05

По причине конфликтов скрипта с видео контентом, пришлось искать, что то новое.

pipkis
С каким "видео контентом" конфликтует? Как конфликт проявляется?
Спасибо!
#5 28 октября 2016 в 18:45
Олег Васильевич я
С InstantVideo2, там он тоже подключен по адресу .../templates/default/js/video/colorbox/colorbox.css и создает конфликт в основном в стилях а не в скрипте. Вот что получается
#6 28 октября 2016 в 18:54


pipkis, Спасибо, еще бы кто на первую ветку подсказал бы как прикрутить

Евгений
Да там ничто сложного в принципе нет, хотя я уже забыл, что в первой ветке было. Там подключается всего лишь Css стиль, попробуй поменять в lg-general.js
Допустим в в двойке стиль контента
  1. <div class="field ft_html f_content">
  2. <div class="value">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div>
  3. </div>
Я взял ft_html за основу в lg-general.js.
  1. // Слайдер для блога,статьи,новости)
  2. $(".ft_html img").wrap("<div id='post'></div>");
  3. $(".ft_html img").wrap( function(){
  4. var ahref = $( '<a href="' + $( this ).attr( 'src' ) + '" />').addClass ("parent-post");
  5. return ahref;
  6. });
  7. $(".ft_html img").addClass('parent-img');
  8. $('.ft_html #post').lightGallery({
  9. width: '700px',
  10. height: '470px',
  11. mode: 'lg-fade',
  12. addClass: 'fixed-size',
  13. counter: false,
  14. download: true,
  15. startClass: '',
  16. enableSwipe: false,
  17. enableDrag: false,
  18. actualSize:false,
  19. fullScreen:false,
  20. speed: 500
  21. });
Тебе нужно посмотреть какой у тебя выводит css стиль и подставить его вместо ft_html.
#7 28 октября 2016 в 19:28

С InstantVideo2

pipkis
Тем более стоило подправить то что уже было.
#8 28 октября 2016 в 20:34


С InstantVideo2

pipkis
Тем более стоило подправить то что уже было.

Олег Васильевич я

Я полностью изменил шаблон и захотелось чего то новенького, Colorbox хороший плагин спору нет.
#9 28 октября 2016 в 20:36
Олег Васильевич я, Может у Вас решения адаптивности есть каких нибудь галерей для первой ветки? было бы очень полезно
#10 28 октября 2016 в 20:56

Ну надо вам карму поднять чтобы в блог всё перенесли.

eoleg
Поучаствовал. Действительно такое надо в блог.
#11 5 декабря 2016 в 01:19
Ребята если, кто то установил смайлы EmojiOne, то они в комментариях открываются через слайдер. Для исправления данной ситуации скачайте файл ниже и замените его. Добавилась одна строка на примере она 14.
  1.  
  2. // Слайдер для комментариев,стены,и стены группы)
  3. $(".text img").wrap( function(){
  4. var ahref = $( '<a href="' + $( this ).attr( 'src' ) + '" />').addClass ("parent-container");
  5. return ahref;
  6. });
  7. $(".text img").addClass('parent-img');
  8.  
  9. $('.text').lightGallery({
  10. selector:'a.parent-container',
  11. hash: false
  12. });
  13. // Стиль для смайлов
  14. $(".emojione").unwrap("a.parent-container");
  15.  
Прикрепленный файл
lggeneral_gr0oo.zip 1 Кб
#12 5 декабря 2016 в 01:29
Если, кто то интересуется как настроить слайдер в галереи изображений, при загрузке через мультизагрузчик изображений, как у меня сделано в постах.

Нужно в файл lg-general.js добавить следующее
  1. // Слайдер для галереи в блоге
  2.  
  3. $("#f_photos").removeClass("ft_images");
  4. $(".ft_images a").addClass('imgallery').removeClass("img-photos");
  5. $('.ft_images').lightGallery({
  6. selector:'a.imgallery',
  7. hash: false
  8. });
  9. });
#13 5 декабря 2016 в 08:24
Поставил, решение отличное, но сайт тормозит конкретно. Colorbox так не тормозил. Не подскажете как ускорить загрузку. css и js сжимал не помогает.
#14 5 декабря 2016 в 13:19
Андрей
А можете прислать адрес сайта можно в личку, я посмотрю в чем дело. Просто у меня существенных тормозов не замечается, только в случае если картинка очень много весит долго грузит. А других тормозов больше нет
#15 17 декабря 2016 в 09:50
Кому нужно, чтобы изображения в виде кнопок работали как кнопки, а не как изображения то в файле lg-general.js

строку
  1. $(".ft_html img").wrap( function(){
заменить на
  1. $(".ft_html img").not('img.no_lightgallery').wrap( function(){
А в код картинки в контенте, добавить class="no_lightgallery" вот так

Спасибо Олег Васильевич я, сделал по егообразцу
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.