Lightgallery - Показать локальный блок комментариев html вместо fb comment box

Я хочу показать свой пользовательский блок комментариев html вместо поля комментариев facebook в моей реализации CakePHP Lightgallery. Как я могу это сделать? Нужна ли настройка плагина?Lightgallery - Показать локальный блок комментариев html вместо fb comment box

А реализация фреймворка комментариев в facebook не реагирует, в то время как мне потребуется, чтобы она была отзывчивой.

источник

2016-01-29 Gaurav

Я сейчас делаю то же самое, приятель. Пока не повезло. Дайте мне знать, если вы ее взломали. –

В конце концов, мы решили использовать только я свет галереи n на рабочем столе и иметь нормальную чувствительную ссылку на страницу в случае меньших экранов. Это пошло что-то вроде этого:

HTML

<a href="/projectitems/view/[ID]" class="light-thumb" data-image="/upload/projectitems/[ID]/image.jpeg"> 
    <img src="/upload/projectitems/[ID]/image.jpeg" alt=""> 
</a> 
...

if ($(window).width() > 991) { 

    // Code to load lightgallery files by $.getScript() and append to <head> 

    $("a.light-thumb").each(function(index) { 
    var currentHref = $(this).attr('href').replace('/view/', '/viewNew/'); // Link change to load only comment box 
    $(this).attr('data-sub-html', '<div class="fb-comments" id="comments-' + index + '" data-href="' + currentHref + '"></div>'); 
    $(this).attr('href', $(this).attr('data-image')); 
    }); 

    $(".row-fluid.slider").lightGallery({ 
    selector: '.light-thumb', 
    appendSubHtmlTo: '.lg-item', 
    addClass: 'fb-comments', 
    mode: 'lg-fade', 
    download: false 
    }); 
    $(".row-fluid.slider").on('onAfterSlide.lg', function(event, prevIndex, index) { 
    var commentBox = $('#comments-' + index); 
    var dataUrl = commentBox.attr('data-href'); 
    $.ajax({ 
     url : '<?= $this->base ?>' + dataUrl, 
     type : 'GET', 
     success : function(response){ 
     commentBox.html(response); 
     commentBox.css('background-image', 'none'); 
     $("body").css("overflow", "hidden"); 
     } 
    }); 
    }); 
    $(".row-fluid.slider").on('onCloseAfter.lg', function(event) { 
    $("body").css("overflow", "auto"); 
    }); 
}

источник

2016-05-14 11:13:55 Gaurav

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

Вот что я сделал, я создал свою боковую панель и добавил ее в тело, и спрятал ее, затем, когда откроется галерея, я ее клонировал и вставлял в галерею. Когда галерея закрывается, я уничтожаю ее и вызываю ее снова, когда галерея открывается снова. Я также скрываю заголовки по умолчанию и записываю их на боковой панели после каждого перехода слайдов.

Посмотрите на lightGallery API Events, без них это будет невозможно.

HTML

// My own sidebar element, I added this just before the closing Body tag, it is hidden via CSS 
<div class="gallery-info-box"> 
    <div class="slide-caption-wrap"> 
    // Photo captions will be populated here 
    </div> 

    // include advert 

    // include comments 

</div>

CSS

// Push Gallery objects 420px to the right so the controls wont be covered by the sidebar 
.lg-admin-wrap, 
.lg-outer .lg-video-cont, 
.lg-outer .lg-thumb-outer, 
.lg-thumb-open .lg-toogle-thumb, 
.lg-outer .lg-toogle-thumb, 
.lg-toolbar.group 
    @media (min-width: 768px) 
padding-right: 420px 
.lg-actions .lg-next 
    @media (min-width: 768px) 
    margin-right: 420px 

// Position and style gallery sidebar 
.gallery-info-box 
    display: none 
.lg 
    .gallery-info-box 
    display: block 
    position: absolute 
    z-index: 1080 
    top: 0 
    right: 0 
    width: 400px 
    height: 100% 
    padding: 20px 
    background-color: white 
    @media (max-width: 767px) 
     display: none 
     .slide-caption-wrap 
     h4 
      margin-top: 0 
      font-size: 24px

var $lg = $('#light-gallery'); 

// Perform any action just before opening the gallery 
$lg.on('onAfterOpen.lg',function(event){ 
    // Hide the original comments 
    $('.lg-sub-html').hide(); 
    // Insert sidebar into the gallery 
    $('.gallery-info-box').clone().appendTo('.lg').show(); 
}); 

// Perform any action after the slide has been loaded 
$lg.on('onAfterAppendSubHtml.lg',function(event){ 
    var lgSubContent = $('.lg-sub-html').html(); 
    // Populate the sidebar with the captions 
    $('.lg .slide-caption-wrap').html(lgSubContent); 
}); 

// Perform any action just after closing the gallery 
$lg.on('onCloseAfter.lg',function(event){ 
    // Remove the gallery sidebar 
    $('.lg .gallery-info-box').remove(); 
});

источник

2016-03-18 01:03:18

Вам удалось получить отзывчивую боковую панель? – Gaurav

Привет, боковая панель реагирует на точку. На мобильном телефоне я скрываю его, но он хорошо работает в планшете. Теперь вы можете сделать боковую панель отзывчивой, так как она находится в доме, поэтому ее можно стилизовать, как вы хотите. Я просто не видел, чтобы использовать его на маленьких экранах. –

Я согласен с вами в этом вопросе @Clinton Green. Спасибо. – Gaurav

Lightgallery - Показать локальный блок комментариев html вместо fb comment box

ответ

Смежные вопросы