lightgallery для instantcms2

 
Посетитель
small user social cms
Сообщений: 26
Привет всем, решил поделиться как я подключил lightgallery к своему сайту. lightgallery это JQ скрипт который я использую на своем сайте вместо Lightbox, до этого я пользовался Colorbox в поле ft_html типа контента , которую предложил Олег Васильевич я.
По причине конфликтов скрипта с видео контентом, пришлось искать, что то новое.
Как подключать.
Скачиваем архив. Добавляем его в корень сайта.
lightgallery для instantcms2

Открываем main.tpl.php
Добавляем между <head> </head>
Код PHP:
  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 для instantcms2

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

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

Пример слайдера
lightgallery для instantcms2
lightgallery для instantcms2

Живой пример 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 | 45,39 Кб | Скачали: 150
Редактировалось: 7 раз (Последний: 27 февраля 2017 в 20:18)
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатий
Сообщений: 2472
Ну надо вам карму поднять чтобы в блог всё перенесли.
Раньше РАЙ был везде - РАЙсовет, РАЙком, РАЙсобес...., а сейчас везде АДминистрации!
Не надо давать людям советы. Каждый должен лохануться самостоятельно!
Любишь в продакшн, люби и баги починить!
Посетитель
small user social cms
Сообщений: 46
pipkis, Спасибо, еще бы кто на первую ветку подсказал бы как прикрутить
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 2404
pipkis:
По причине конфликтов скрипта с видео контентом, пришлось искать, что то новое.
С каким "видео контентом" конфликтует? Как конфликт проявляется?
Спасибо!
Украинский для инстант
Посетитель
small user social cms
Сообщений: 26
Олег Васильевич я:
С InstantVideo2, там он тоже подключен по адресу .../templates/default/js/video/colorbox/colorbox.css и создает конфликт в основном в стилях а не в скрипте. Вот что получается lightgallery для instantcms2
Редактировалось: 1 раз (Последний: 28 октября 2016 в 18:46)
Посетитель
small user social cms
Сообщений: 26
Евгений:

pipkis, Спасибо, еще бы кто на первую ветку подсказал бы как прикрутить
Да там ничто сложного в принципе нет, хотя я уже забыл, что в первой ветке было. Там подключается всего лишь Css стиль, попробуй поменять в lg-general.js
Допустим в в двойке стиль контента
Код PHP:
  1. <div class="field ft_html f_content">
  2. <div class="value">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div>
  3. </div>
Я взял ft_html за основу в lg-general.js.
Код PHP:
  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.
Редактировалось: 2 раз (Последний: 28 октября 2016 в 18:55)
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 2404
pipkis:
С InstantVideo2
Тем более стоило подправить то что уже было.
Украинский для инстант
Посетитель
small user social cms
Сообщений: 26
Олег Васильевич я:

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

Я полностью изменил шаблон и захотелось чего то новенького, Colorbox хороший плагин спору нет.
Посетитель
small user social cms
Сообщений: 46
Олег Васильевич я, Может у Вас решения адаптивности есть каких нибудь галерей для первой ветки? было бы очень полезно
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форума
Сообщений: 1253
eoleg:
Ну надо вам карму поднять чтобы в блог всё перенесли.
Поучаствовал. Действительно такое надо в блог.
Недорогой и мощный хостинг для InstantCMS
Посетитель
small user social cms
Сообщений: 26
Ребята если, кто то установил смайлы EmojiOne, то они в комментариях открываются через слайдер. Для исправления данной ситуации скачайте файл ниже и замените его. Добавилась одна строка на примере она 14.
Код PHP:
  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 | 0,73 Кб | Скачали: 138
Редактировалось: 1 раз (Последний: 5 декабря 2016 в 01:20)
Посетитель
small user social cms
Сообщений: 26
Если, кто то интересуется как настроить слайдер в галереи изображений, при загрузке через мультизагрузчик изображений, как у меня сделано в постах.
lightgallery для instantcms2 lightgallery для instantcms2
Нужно в файл lg-general.js добавить следующее
Код PHP:
  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. });
Посетитель
small user social cms
Медаль
Сообщений: 801
Поставил, решение отличное, но сайт тормозит конкретно. Colorbox так не тормозил. Не подскажете как ускорить загрузку. css и js сжимал не помогает.
Самые дешевые и быстрые VPS | Продвижение в соцсетях
Посетитель
small user social cms
Сообщений: 26
Андрей:
А можете прислать адрес сайта можно в личку, я посмотрю в чем дело. Просто у меня существенных тормозов не замечается, только в случае если картинка очень много весит долго грузит. А других тормозов больше нет
Посетитель
small user social cms
Медаль
Сообщений: 801
Кому нужно, чтобы изображения в виде кнопок работали как кнопки, а не как изображения то в файле lg-general.js

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

Спасибо Олег Васильевич я, сделал по его образцу
Редактировалось: 1 раз (Последний: 17 декабря 2016 в 09:50)
Самые дешевые и быстрые VPS | Продвижение в соцсетях
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.