类似facebook的照片查看器jQuery FBPhotoBox
facebook like photo viewer jQuery FBPhotoBox
创建一个具有类似Facebook描述的图像查看器-jQuery FBPhotoBox
一切都很好，但我无法检索图像名称、描述和相册名称
$(document).ready(function() {
$(".fbphotobox img").fbPhotoBox({
rightWidth: 360,
leftBgColor: "black",
rightBgColor: "white",
footerBgColor: "black",
overlayBgColor: "#1D1D1D",
onImageShow: function() {
$('.imgtitle').html($(this).attr("data-title"));
$('.imgdesc').html($(this).attr("data-desc"));
}
});
});
show: function(image) {
if (image.attr("fbphotobox-src")) this.tempImage.src = image.attr("fbphotobox-src");
else this.tempImage.src = image.attr("src");
$(".fbphotobox-tag").remove();
var index = this.targetObj.index(image);
this.leftArrow.attr("data-prev-index", index-1);
this.rightArrow.attr("data-next-index", index+1);
if (index-1 < 0) this.leftArrow.hide();
else this.leftArrow.show();
if (index+1 >= this.targetObj.length) this.rightArrow.hide();
else this.rightArrow.show();
},
html代码
<div class="fbphotobox">
<img src="museumgallery/<?php echo $setdetail['image'] ?>" class="img-polaroid" width="190" id="<?php echo $setdetail['id'] ?>" data-title="<?php echo $setdetail['itemname'] ?>" data-desc="<?php echo $setdetail['description'] ?>"/>
</div>
并且查看器被附加为
['<div class="fbphotobox-main-container">',
'<div class="fbphotobox-container-left">',
'<table class="fbphotobox-main-image-table"><tr><td>',
'<div class="tag-container"><img class="fbphotobox-main-image" src=""/></div>',
'</td></tr></table>',
'<div class="fbphotobox-image-stage-overlay">',
'<div class="fbphotobox-container-left-header">',
'<a title="Full Screen" class="fbphotobox-fc-btn fbphotobox-a"></a>',
'</div>',
'<div data-prev-index="" class="left-arrow">',
'<table style="height:100%"><tr><td style="vertical-align:middle;">',
'<a class="fbphotobox-a" title="Previous"></a>',
'</td></tr></table>',
'</div>',
'<div data-next-index="" class="right-arrow">',
'<table style="height:100%;"><tr><td style="vertical-align:middle;">',
'<a class="fbphotobox-a" title="Next"></a>',
'</td></tr></table>',
'</div>',
'</div>',
'</div>',
'<div class="fbphotobox-container-right">',
'<div class="fbphotobox-close-btn">',
'<a title="Close" href="" style="float:right;margin:8px">',
'<img src="./assets/images/close.png" style="height:10px;width:10px"/>',
'</a>',
'<div style="clear:both"></div>',
'</div>',
'<div class="fbphotobox-image-content">',
'<h3 class="imgtitle"></h3>',
'<div class="imgdesc"></div>',
'</div>',
'</div>',
'<div style="clear:both"></div>',
'</div>',
'<div class="fbphotobox-fc-main-container">',
'<div class="fbphotobox-fc-header">',
'<div style="float:left"></div>',
'<a class="fbphotobox-fc-close-btn" href="">Exit</a>',
'<div style="clear:both"></div>',
'</div>',
'<div style="position:fixed;top:0px;right:0px;left:0px;bottom:0px;margin:auto;">',
'<table style="width:100%;height:100%;text-align:center;">',
'<tr>',
'<td class="fc-left-arrow" style="width:50px;text-align:center;">',
'<a class="fbphotobox-a" title="Previous"></a>',
'</td>',
'<td>',
'<img class="fbphotobox-fc-main-image" src=""/>',
'</td>',
'<td class="fc-right-arrow" style="width:50px;text-align:center;">',
'<a class="fbphotobox-a" title="Next"></a>',
'</td>',
'</tr>',
'</table>',
'</div>',
'<div class="fbphotobox-fc-footer"><div style="clear:both"></div></div>',
'</div>',
'<div class="fbphotobox-overlay"></div>',
'<div style="clear:both"></div>'];
但它看起来像这张照片https://i.stack.imgur.com/5wFoS.jpg
http://www.jqueryscript.net/lightbox/Creating-A-Image-Viewer-with-Descriptions-Like-Facebook-jQuery-FBPhotoBox.html这是我从获得文件的链接
我一直在尝试
$('.imgtitle').html($(this).attr("data-title"));
$('.imgdesc').html($(this).attr("data-desc"));
显示在查看器中，但它只显示src，而不是数据描述或数据标题。。。而且我也想显示相册名称
文档很糟糕，但如果你检查代码，你会看到这部分：
initDOM: function() {
var html = ['<div class="fbphotobox-main-container">',
'<div class="fbphotobox-container-left">',
'<table class="fbphotobox-main-image-table"><tr><td>',
'<div class="tag-container"><img class="fbphotobox-main-image" src=""/></div>',
'</td></tr></table>',
'<div class="fbphotobox-image-stage-overlay">',
'<div class="fbphotobox-container-left-header">',
'<a title="Full Screen" class="fbphotobox-fc-btn fbphotobox-a"></a>',
'</div>',
'<div data-prev-index="" class="left-arrow">',
'<table style="height:100%"><tr><td style="vertical-align:middle;">',
'<a class="fbphotobox-a" title="Previous"></a>',
'</td></tr></table>',
'</div>',
'<div data-next-index="" class="right-arrow">',
'<table style="height:100%;"><tr><td style="vertical-align:middle;">',
'<a class="fbphotobox-a" title="Next"></a>',
'</td></tr></table>',
'</div>',
'<div class="fbphotobox-container-left-footer">',
'<div style="margin:20px;">',
'<span style="font-weight:bold;">Dummy Photo Caption</span>',
'<span style="color:#B3B3B3;"> in </span>',
'<span style="font-weight:bold;">Dummy Album Name</span>',
'</div>',
'</div>',
'<div class="fbphotobox-container-left-footer-bg"></div>',
'</div>',
'</div>',
'<div class="fbphotobox-container-right">',
'<div class="fbphotobox-close-btn">',
'<a title="Close" href="" style="float:right;margin:8px">',
'<img src="./images/close.png" style="height:10px;width:10px"/>',
'</a>',
'<div style="clear:both"></div>',
'</div>',
'<div class="fbphotobox-image-content"></div>',
'</div>',
'<div style="clear:both"></div>',
'</div>',
'<div class="fbphotobox-fc-main-container">',
'<div class="fbphotobox-fc-header">',
'<div style="float:left">Dummy Header</div>',
'<a class="fbphotobox-fc-close-btn" href="">Exit</a>',
'<div style="clear:both"></div>',
'</div>',
'<div style="position:fixed;top:0px;right:0px;left:0px;bottom:0px;margin:auto;">',
'<table style="width:100%;height:100%;text-align:center;">',
'<tr>',
'<td class="fc-left-arrow" style="width:50px;text-align:center;">',
'<a class="fbphotobox-a" title="Previous"></a>',
'</td>',
'<td>',
'<img class="fbphotobox-fc-main-image" src=""/>',
'</td>',
'<td class="fc-right-arrow" style="width:50px;text-align:center;">',
'<a class="fbphotobox-a" title="Next"></a>',
'</td>',
'</tr>',
'</table>',
'</div>',
'<div class="fbphotobox-fc-footer">Dummy Footer<div style="clear:both"></div></div>',
'</div>',
'<div class="fbphotobox-overlay"></div>',
'<div style="clear:both"></div>'];
$("body").append(html.join(""));
this.settings.afterInitDOM();
},
在远端我们可以看到，您可以在设置中定义afterIntitDOM()回调函数。在那里，你可以更改你的弹出模板，或者专辑名称的方式：
afterIntitDOM: function() {
$('.fbphotobox-container-left-footer span:last').text('My Album name');
}
但由于您也想更改图像的名称和描述，因此您应该在设置中使用onImageShow方法/回调，但存在一个问题：this内部是焦点图像，而不是DOM树中的原始图像。因此，我建议您更改核心show方法，并在函数末尾添加一行：
show: function(o) {
/* o is a jQuery object, the original image we need */
....
....
if ( typeof this.settings.myShow==='function' ) this.settings.myShow(o);
}
然后在设置中定义myShow回调：
$(".fbphotobox img").fbPhotoBox({
rightWidth: 360,
leftBgColor: "black",
rightBgColor: "white",
footerBgColor: "black",
overlayBgColor: "#1D1D1D",
myShow: function(image) {
var myTitle = image.data('title');
var myDescription = image.data('description');
var myAlbum = image.data('album');
$('.fbphotobox-container-left-footer span:first').html( myTitle );
$('.fbphotobox-container-left-footer span:last').html( myAlbum );
$(".fbphotobox-image-content").html( myDescription );
}
});
这假设您使用以下HTML:
<div class="fbphotobox">
<img data-title="Title 1" data-description="Desc 1" data-album="Album 1" fbphotobox-src="http://lorempixel.com/400/200/fashion/3" src="http://lorempixel.com/400/200/fashion/3" />
<img data-title="Title 2" data-description="Desc 2" data-album="Album 2" fbphotobox-src="http://lorempixel.com/500/300/food/2" src="http://lorempixel.com/500/300/food/2" />
<img data-title="Title 3" data-description="Desc 3" data-album="Album 3" fbphotobox-src="http://lorempixel.com/600/400/transport/1" src="http://lorempixel.com/600/400/transport/1" />
</div>
此处的工作Fiddle/示例
相关文章：
- 无法从 jQuery RSS Feed 中的 localStorage 动态替换类
- 如何使用jQuery自动打开页面上的所有链接
- 如何使用jquery在填充自动完成的值后使文本框只读
- jQuery:循环一个具有不同超时值的循环
- 用程序搜索JQuery数据表中的文本
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- jQuery匹配JSON对象的部分文本
- Jquery POST未填充数组
- JQuery使计数器每次更改时都会增加
- 如何在Angular2中使用jQuery插件
- 提高JQuery的性能
- 无法在通过jQuery的ajax加载的页面中执行javascript
- JQuery合并了keyup和focusout两个函数
- 如何使用jQuery选择下拉列表的值
- 将PHP变量传递给jQuery时遇到问题
- jQuery UI自动完成突然停止工作
- 剑道网格jQuery动画(）问题
- 如何使jQuery插件函数可调用以供独立使用，而不在集合上操作
- jquery点击函数select&取消选择
- 类似facebook的照片查看器jQuery FBPhotoBox
