Facebook喜欢照片查看器jQuery FBPhotoBox

Question

使用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>'];

但似乎就像在这张图片中一样 http://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而不是data-desc或data-title ...而且我也想显示相册名称

Answer 1

文档很糟糕，但是如果你检查代码，你会看到这部分：

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>

<强> Working Fiddle/Example here