fbAlbum2.js, bootstrap-tooltip and Magnific-Popup

fbAlbum2.js, bootstrap-tooltip and Magnific-Popup

本文关键字:and Magnific-Popup bootstrap-tooltip js fbAlbum2      更新时间:2023-09-26

缩略图下的工具提示不起作用。知道为什么吗?

提示设置

$(document).ready(function(){
  $("[rel=tooltip]").tooltip({
    delay:{show: 300, hide: 150},
    placement: 'bottom'
  });
});

fbAlbum2设置

$(document).ready(function(){
  $('#fbAlbumI').fbAlbum({
    'albumID':'10150302289698306',
    'rel':'tooltip',
    'callback': function(){ //code that loads after the album must go here
      $(".album a").magnificPopup({type: 'image' }); 
    }
  });
});
http://jsfiddle.net/79RVw/1/

为凌乱的css代码感到抱歉!

编辑:当调用fbAlbum初始化的工具提示函数时,facebook图像的标题不会在弹出窗口中检索到。http://jsfiddle.net/79RVw/4/

如果没有工具提示,它可以!http://jsfiddle.net/79RVw/5/

使用jsfiddle更新data-original-title:http://jsfiddle.net/79RVw/7/

'callback': function(){ //code that loads after the album must go here
            doTooltip();
            $(".album a").magnificPopup({type: 'image', image: {titleSrc: "data-original-title"} }); 
}

工具提示函数需要在fbAlbum加载所有图像后执行,因此在回调函数中

我在jsfiddle: http://jsfiddle.net/79RVw/3/上所做的是创建一个函数doTooltip,然后在回调中调用doTooltip()。

function doTooltip() {
    $("[rel=tooltip]").tooltip({
                delay:{show: 300, hide: 150},
                placement: 'bottom'
    });
}
            $('#fbAlbumI').fbAlbum({
                'albumID':'10150302289698306',
                'rel':'tooltip',
                'callback': function(){ //code that loads after the album must go here
                    doTooltip();
                    $(".album a").magnificPopup({type: 'image' }); 
                }
            });