Fancyboxとの組み合わせでdivをフローティングする方法は？

Question

Fancyboxを使用しているときにギャラリー画像にdivを追加する方法はありますか？ 画像の上にカーソルを置いたときに表示するツールバーが必要です。 今、左右のnavだけが表示され、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); 
    }}) 
})