Light图库-显示本地评论框html而不是fb注释框。
Light图库-显示本地评论框html而不是fb注释框。
提问于 2016-01-29 03:08:28
我想在我的CakePHP站点的光廊实现中显示我的自定义评论框html，而不是facebook的评论框。我怎么能这么做？它需要插件定制吗？
而且，facebook的评论框实现没有响应性，而我也需要它的响应性。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-05-14 11:13:55
最后，我们决定只在桌面上使用光线库，并在屏幕较小的情况下具有正常的响应页面链接。就像这样：
<a href="/projectitems/view/[ID]" class="light-thumb" data-image="/upload/projectitems/[ID]/image.jpeg">
<img src="/upload/projectitems/[ID]/image.jpeg" alt="">
</a>
...JS
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");
});
}Stack Overflow用户
发布于 2016-03-18 01:03:18
我也有过类似的情况，我需要显示图片标题和我自己的数据。我创建了自己的侧边栏，并将其覆盖在画廊的顶部，但我遇到了很多高度问题。因此，我利用画廊的布局插入我的侧边栏到画廊。
这就是我所做的，我创建了我的侧边栏，并将它添加到身体中，并将它隐藏起来，然后当画廊打开时，我将它克隆并插入到画廊中。当画廊关闭时，我破坏它，当画廊再次打开时再次调用它。默认情况下，我还隐藏标题，并在每次幻灯片转换后将它们写入侧栏。
看看lightGallery API事件，没有它们，这是不可能的。
// 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: 24pxJS
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();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35076206
复制相关文章
相似问题
腾讯云开发者
