如何将浮动div与Fancybox结合使用？

Question

使用Fancybox时，有没有办法在图库图像上添加div。 当我将鼠标悬停在图像上时，我需要一个工具栏来显示。 现在只出现左右导航，我无法将div放在他们身上。

我需要它看起来像Facebook图像浏览器。

Answer 1

Fanybox 1.3

是的，确定。弹出的div的ID是“fancybox-content”只是附加内容。

$(document).ready(function (){
  $("a").fancybox({onComplete: function (){
    var toolbar = $("<div/>").css({"position": "absolute", 
                                   "z-index": "99999",
                                   "bottom":"0px",
                                   "height": "20px",
                                   "border": "1px solid #ccc"});

    toolbar.html("Hello World");
    $("#fancybox-content").append(toolbar);
  }})
})

看看这个迷你演示： http://jsbin.com/ihehik/4/edit希望它能帮助你朝着正确的方向前进。

Fancybox 2

http://jsbin.com/ihehik/8/edit

$(document).ready(function (){
  $("a").fancybox({afterShow: function (){
    var toolbar = $("<div/>").css({"position": "absolute", 
                                   "z-index": "99999",
                                   "bottom":"0px",
                                   "height": "20px",
                                   "border": "1px solid #ccc",
                                   "background" : "#ccc",
                                   "width" : "100%"});
    toolbar.hover(function(){
                    $(this).fadeTo(500,1);
                  },function(){
                    $(this).fadeTo(500,0.5);
                  });

    var button1 = $("<button/>").attr("value","B").html("Hello");


    button1.appendTo(toolbar);

    $(".fancybox-inner").append(toolbar);
  }})
})