Question

我正在使用Fancybox 2.0，我希望标题框显示在图像上方或图像顶部，而不是下方。

就在所有内容之上。

我尝试制作fancybox-inner样式position:absolute，但fancybox-wrap的高度不会设置为绝对像素。

有人可以帮我实现吗？

Answer 1

最好也是最简单 - 使用助手：

helpers : {
            title : {
                type: 'inside',
                position : 'top'
            }
        }

Answer 2

为这些元素添加以下fancybox CSS ...

.fancybox-title{position: absolute;top: 0;} 

.fancybox-skin{position: relative;}

这应该把标题放在最上面。

Answer 3

此代码在jsfiddle上：http://jsfiddle.net/JYzqR/。

$(".fancybox").fancybox({
  helpers : {
    title: {
      type: 'inside',          
      position: 'top'
    }
  },
  nextEffect: 'fade',
  prevEffect: 'fade'
});

.fancybox-title {
  padding: 0 0 10px 0;
}

<a rel="gallery" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin imperdiet augue et magna interdum hendrerit" class="fancybox" href="http://i.stack.imgur.com/oZFno.jpg"><img src="http://i.stack.imgur.com/eZSbk.jpg" alt=""/></a>
<a rel="gallery" title="Proin imperdiet augue et magna interdum hendrerit" class="fancybox" href="http://i.stack.imgur.com/tv3kk.jpg"><img src="http://i.stack.imgur.com/IWWbG.jpg" alt=""/></a>

<!-- External Resources -->
<!-- jQuery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- fancybox --><script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

阅读“在顶部设置标题”http://fancyapps.com/fancybox/#examples

Answer 4

从默认的Fancybox 2.0.6 CSS中，替换以下内容：

.fancybox-title {
    position: absolute;
    top: -36px;
    left: 0;
    visibility: hidden;
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050;
    }

.fancybox-title-float-wrap {
    position: absolute;
    z-index: 8030;
    }

这将头部左上方定位，在我看来它看起来最好。这是一个屏幕抓图：

enter image description here

Answer 5

要通过使用Jquery将标题置于顶部，您可以使用Fancybox回调操作相关的CSS，当加载内容时，使用beforeLoad或afterLoad，以及Fancybox会更新，onUpdate。

因此，您可以使用一些最符合您需求的回调：Link to FancyBox Docs

让我们假设您正在使用下面的代码加载您的fancybox，并且为了操纵标题位置，您可以调用“ onUpdate ”和“ afterLoad ”来触发改变了：

JQUERY EXAMPLE

$(document).ready(function() {
  $("#my_popup_id").fancybox({
    "onUpdate"  : function() {
      $(".fancybox-title").css({'top':'0px', 'bottom':'auto'});
    },
    "afterLoad" : function() {
      $(".fancybox-title").css({'top':'0px', 'bottom':'auto'});
    }
  });
});

现在，上面的示例将Fancybox标题置于顶部，但如果您需要将其置于外部，远离框架，则需要将负值设置为“顶部”，但需要考虑框架不能占据整个屏幕，因此在这个新例子中宽度和高度参数：

JQUERY例2

$(document).ready(function() {
  $("#my_popup_id").fancybox({
    "autoSize"  : false,
    "width"     : '70%',
    "height"    : '70%',
    "onUpdate"  : function() {
      $(".fancybox-title").css({'top':'-30px', 'bottom':'auto'});
    },
    "afterLoad" : function() {
      $(".fancybox-title").css({'top':'-30px', 'bottom':'auto'});
    }
  });
});

检查提供的文档链接，特别是“回调”标签。

<强>编辑：

就在这里，the Fiddle link!

新编辑说明：

neokio指出了一个只需对Fancybox style sheet进行简单调整的解决方案，因此，对于简单的标题位置控制，它确实是best approach。

这个答案中的一个对于一些更复杂的CSS操作很有用。

已编辑：Fiddle并提供了neokio提供的解决方案！

Answer 6

Neokio走在正确的轨道上，但我认为通过在样式表中添加新的类样式然后引用它来对原始代码的破坏性稍差。

// Put at bottom of jquery.fancybox.css, change as needed
.fancybox-title-top-wrap {
  position: absolute;
  top: -30px;
  left: 0;
  background: transparent; /* Fallback for web browsers that doesn't support RGBa */
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  text-shadow: 0 1px 2px #222;
  color: #FFF;
  padding: 2px 20px;
  font-size: 16px;
}

然后使用：

helpers: { title: 'top' }

您不会丢失任何原始样式，并且可以根据需要不断添加样式。

Answer 7

Chris Mackie的回答是最干净的。没有与afterUpload等混淆。你可以添加以推动FancyBox的顶部唯一的东西是边缘：

$(document).ready(function() {

      $('.fancybox').fancybox({
                    padding      : 0,
          margin       : [60, 60, 20, 60],
          autoSize     : false, 
          autoCenter   : true,
          fitToView    : true,
          openEffect   : 'fade',
          closeEffect  : 'fade',
          openSpeed    : 100,
          closeSpeed   : 100,
          width        : 900,
          height       : 600
     });

});

Answer 8

在包含fancybox.css后添加以下代码段，覆盖fancybox的默认css

// set modal title above container (overriding default bottom) .fancybox-title-float-wrap { bottom: auto; top: -35px; }

或者，如果您使用构建系统（在这里使用GruntJS）和LESS，那么就像在fancybox-custom.less中一样简单。

@import "fancybox";

以及上面的代码段;这样你就可以在一个地方整合你的补丁，而不是分散你的应用程序。

Answer 9

afterLoad   : function() {
    this.outer.prepend( '<a href="index.html"> <img src="img/logo.svg" class="logoShow"></a>' );

    }

尝试将该代码放入您的fancybox功能中。例如

$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox({
openEffect  : 'none',
closeEffect : 'none',
afterLoad   : function() {
    this.outer.prepend( '<a href="index.html"> <img src="img/logo.svg" class="logoShow"></a>' );
    }

}）;

并设置班级"logoShow" css

fancybox把标题放在上面并留在那里

9 个答案: