Как сделать плавающий div в сочетании с Fancybox?

Question

Есть ли способ добавить div поверх изображения галереи при использовании Fancybox.Мне нужно иметь панель инструментов, чтобы показать, когда я наведу курсор на изображение.В данный момент отображаются только навигационные элементы влево и вправо, и я не могу разместить над ними div.

Мне нужно, чтобы он выглядел как средство просмотра изображений Facebook.

Answer 1

Fanybox 1.3

Да, конечно. Идентификатор выскакивающего div - это «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);
  }})
})