1

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

最重要的是内容。

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

有人可以帮我实现吗？

4

9 回答 9

10

最好和最简单的 - 使用助手：

helpers : {
            title : {
                type: 'inside',
                position : 'top'
            }
        }
于 2013-04-24T21:35:11.477 回答
6

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

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

.fancybox-skin{position: relative;}

那应该把标题放在顶部。

于 2012-05-08T13:28:35.300 回答
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

于 2015-10-16T17:55:22.053 回答
2

从默认的 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;
    }

这会将标题定位在左上方，在我看来它看起来最好。这是一个屏幕截图：

在此处输入图像描述

于 2012-05-10T02:02:58.983 回答
1

要将标题放在顶部，通过使用 Jquery，您可以使用 Fancybox 回调操作相关的 CSS，当加载内容时，使用beforeLoador afterLoad，当 Fancybox 更新时，使用onUpdate.

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

假设您正在使用下面的代码加载您的幻想框，并且要操纵标题位置，您可以调用“ onUpdate ”和“ afterLoad ”来触发该更改：

查询示例

$(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的标题放在了顶部，但是如果你需要它在外面，远离框架，你需要给“top”设置一个负值，但是考虑到框架不能占据整个屏幕，因此这个新示例中的宽度和高度参数：

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

检查提供的文档链接，特别是“回调”选项卡。

编辑：

在这里，小提琴链接！

新的编辑说明：

neokio指出了一个只需对Fancybox 样式表进行简单调整的解决方案，因此，确实对于简单的标题位置控制来说，这是最好的方法。

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

已编辑：还有neokio提出的解决方案的小提琴！

于 2012-05-08T13:52:48.930 回答
0

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' }

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

于 2012-07-23T18:13:07.193 回答
0

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

});
于 2012-12-02T11:30:15.063 回答
0

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

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

或者，如果您使用带有 LESS 的构建系统（在此处使用 GruntJS），那么它就像在您的 fancybox-custom.less 中一样简单。

@import "fancybox";

连同上面的片段；这样你就可以将你的补丁整合在一个地方而不是分散在你的应用程序周围。

于 2013-08-03T12:23:37.693 回答
0 
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

于 2015-03-26T05:45:06.000 回答