Javascript 类似facebook的照片查看器jQuery FBPhotoBox_Javascript_Jquery_Ajax

Javascript 类似facebook的照片查看器jQuery FBPhotoBox

javascript jquery ajax

Javascript 类似facebook的照片查看器jQuery FBPhotoBox,javascript,jquery,ajax,Javascript,Jquery,Ajax,创建一个具有Facebook-jQuery FBPhotoBox等描述的图像查看器一切正常，但我无法检索图像名称、描述和专辑名称 $(document).ready(function() { $(".fbphotobox img").fbPhotoBox({ rightWidth: 360, leftBgColor: "black", rightBgColor: "white", f

创建一个具有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"));
            }
        });
});

在查看器中显示，但仅显示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();
},

但是，由于您还希望更改图像名称和描述，因此应该在设置中使用

onImageShow

方法/回调，但存在一个问题：

此

内部是焦点图像，而不是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>

所以我没有人来回答这个问题？？？你能解释一下“检索图像名称、描述、专辑名称”的含义和位置吗？为什么在没有正确括号的情况下设置if格式？您的控制台中有错误吗？除了从教程中复制代码之外，您还做了什么吗？问题是我正在搜索一个显示描述的图像查看器。请看原始的帖子我会详细说明没有错误，我做了。。。教程没有显示标题或描述的功能。它只显示src链接。。。但我想在查看器模式下显示标题和描述一切都很好，但我在下一步或上一步时如何添加效果？我建议你创建一个新问题，以防卡住，但首先想想你是否真的需要效果。你能再帮我一次吗。。。我在页面中有图片，我集成了这个插件。。。但当我点击其他图片（画廊图片除外）时，它也会像画廊查看器一样打开。。。我不知道这些jquery的问题是你在激活插件

$（“.fbphotobox img”）.fbphotobox（）时使用的CSS选择器。您的多媒体资料容器需要一个唯一的类或ID，或者您的图像需要一个特定的类。通过这种方式，您可以使用（例如）：$（.gallery\u 1 img”）.fbPhotoBox（）或$（.img.gallery\u 1”）.fbPhotoBox（）激活插件。另外，如果您的组类是.fbphotobox
，则可以使用$（'.fbphotobox'）.each（function（）{$（this）.find（'img'）.fbphotobox（）}）。如果这不起作用，请创建一个新问题。
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: function() {
    $('.fbphotobox-container-left-footer span:last').text('My Album name');
}

show: function(o) {
    /* o is a jQuery object, the original image we need */
    ....
    ....
    if ( typeof this.settings.myShow==='function' ) this.settings.myShow(o);
}

$(".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 );
    }
});

<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>