Question

Is there a way of adding a div over a gallery image when using Fancybox.
I need to have a toolbar to show when I hover over the image.
Right now only navs left and right appears and I cannot get a div to be placed over them.

I need it to look like the Facebook image viewer.

Answer 1

Fanybox 1.3

Yeah sure. The ID of the div that pops up is "fancybox-content" just append things to it.

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

Have a look at this mini demo:
http://jsbin.com/ihehik/4/edit hope it helps you in the right direction.

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);
  }})
})