标签: fancybox

我尝试过lightbox-plus,fancybox等......

但我无法想象如何做到这一点.

这些视频是带有包含Youtube视频的链接的图片帖子:

<p><a href="http://www.youtube.com/watch?v=zUN826BdvV4">
<img class="alignnone size-thumbnail wp-image-40" 
title="Screenshot" src="http://localhost/custom-post-type/
wp-content/uploads/2011/01/Screenshot2-150x150.png" 
alt="" width="150" height="150" /></a></p>

例如,Fancybox for Wordpress允许我为图像添加一个灯箱,但如果图像链接到Youtube视频则不起作用.

有什么建议？

好的,所以我有一个iframe画布应用程序,其高度设置为"可设置",facebook javascrip sdk调用FB.Canvas.setSize(); 和FB.Canvas.setAutoGrow(); .这些工作完美,因为iframe根据其内容设置为某个像素高度.

问题是当我打电话给Fancybox时,它根据这个高度定位自己.我知道这正是它应该做的事情,因为fancybox jQuery返回视口:

(jquery.fancybox-1.3.4.js最新版本的第673行):

_get_viewport = function() {
return [
    $(window).width() - (currentOpts.margin * 2),
    $(window).height() - (currentOpts.margin * 2),
    $(document).scrollTop() + currentOpts.margin
];
},

但问题是,对于很多观众而言,iframe将比浏览器窗口更长.因此,Fancybox将自己置于iframe中,并且最终只能被大多数观众看到.(即iframe高度为1058px,用户浏览器仅为650px).

有没有办法让fancybox只计算物理浏览器的高度？或者我是否需要更改我的Facebook画布应用程序中的某些设置才能使其正常工作？

我喜欢唯一的滚动条是Facebook上的那个(父母,如果你愿意的话).

所有建议非常感谢!

有谁知道如何使用自定义开放转换打开fancyBox:

http://fancyapps.com/fancybox/

我希望实现类似的转换到这里找到的示例:

http://www.zurb.com/playground/reveal-modal-plugin

我喜欢显示插件,但它没有我需要fancyBox为新项目做的一些功能

非常感谢,

山姆

如何使用按钮帮助器和缩略图助手添加fancybox？
是否可以将按钮(按钮助手)放在图像下面,以便我可以观看和选择我想要看到的内容？

按钮

$(document).ready(function() {
$(".fancybox-button").fancybox({
    prevEffect      : 'none',
    nextEffect      : 'none',
    closeBtn        : false,
    helpers     : { 
        title   : { type : 'inside' },
        buttons : {}
    }
});

});

和缩略图代码

$(document).ready(function() {
$(".fancybox-thumb").fancybox({
    prevEffect  : 'none',
    nextEffect  : 'none',
    helpers : {
        title   : {
            type: 'outside'
        },
        overlay : {
            opacity : 0.8,
            css : {
                'background-color' : '#000'
            }
        },
        thumbs  : {
            width   : 50,
            height  : 50
        }
    }
});

});

我有点新的JavaScript我无法让它工作.
我想要做的是将它们混合在一起并将按钮放在底部

PS我还可以使用fancybox缩略图助手来处理Youtube视频吗？

是否有一组配置允许我打开一个固定的设置宽度的FancyBox2弹出窗口(内联类型)？如果高度弯曲,则可以,但我希望将宽度设置为特定尺寸.

我尝试过这样的事情:

$.fancybox( {content:msg, type:"inline", title:title, autoSize:false, minWidth:"250px", width:"450px", height:h, maxWidth:"450px"} );

但如果我的内容恰好大于450px,它只会扩展视图而不是使用更高的高度.

我不是程序员,但我已经整合了一个使用精美盒子的网站,并且在chrome和firefox方面都很好,但ie8&ie9是一场灾难.该网站是http://www.pinnaclebillboards.com.

我已经搜索过纠正问题,但我甚至不确定如何描述它.有人能指出我正确的方向吗？

我有这个html,在图像的链接上设置了data-fancybox-group属性,就像在演示中启用下一个/上一个但它不起作用.我包括按钮js和css,它们正确加载,所以我不知道它为什么不起作用.有人可以帮忙吗？

   <ul class="gallery photos">                              

      <li>
        <div>
          <h4><a href="http://nduna.demo.provokateur.com/media-center/photos/amy-robbins/">Amy Robbins</a></h4>
          <div class="photocontent">
            <p>
              <a href="http://nduna.demo.provokateur.com/wp-content/uploads/2012/12/Homepage-Together1.jpg">
            <img class="alignnone size-thumbnail wp-image-1082" title="Homepage-Together" src="http://nduna.demo.provokateur.com/wp-content/uploads/2012/12/Homepage-Together1-200x88.jpg" alt="" width="200" height="88" />
          </a>
        </p>
      </div>
      <a href="http://nduna.demo.provokateur.com/media-center/photos/amy-robbins/" class="cta">Show image</a>
    </div>

  </li>
  <li>
    <div>
      <h4><a href="http://nduna.demo.provokateur.com/media-center/photos/unicef-hq07-0149indrias-getachew/">Indrias Getachew</a></h4>
      <div class="photocontent">
        <p>
          <a href="http://nduna.demo.provokateur.com/wp-content/uploads/2012/07/070149F.jpg">
            <img class="alignnone size-thumbnail wp-image-942" title="070149F" src="http://nduna.demo.provokateur.com/wp-content/uploads/2012/07/070149F-200x88.jpg" alt="" width="200" height="88" />
          </a>
        </p>
      </div>
      <a href="http://nduna.demo.provokateur.com/media-center/photos/unicef-hq07-0149indrias-getachew/" class="cta">Show image</a>
    </div>
  </li>
  <li>
    <div>
      <h4><a href="http://nduna.demo.provokateur.com/media-center/photos/dsc-0103/">DSC 0103</a></h4>
      <div class="photocontent">
        <p>
          <a href="http://nduna.demo.provokateur.com/wp-content/uploads/2012/07/DSC_0103.jpg">
            <img class="alignnone size-thumbnail wp-image-943" title="DSC_0103" src="http://nduna.demo.provokateur.com/wp-content/uploads/2012/07/DSC_0103-200x88.jpg" alt="" width="200" …

我在这个网站上有一个fancybox画廊

到目前为止这是我的代码:

$(document).ready(function() 
{$("a[rel=gal]").fancybox({
            'transitionIn' : 'fade',
            'transitionOut' : 'fade'    
        });});

需要做些什么来创建一个过渡(淡入和淡出),就像在这个网站上而不是滑动？我们如何删除下一个标题？

我正在尝试使用fancybox(http://fancyapps.com/fancybox/)在我的页面上自动显示图像,但背景(灰色)部分无效.有任何想法吗？

参见http://www.southshoreopera.org上的示例

我会尽力解释这个 - >

我正在使用Fancybox,一切都很棒.这就是问题所在.

我想删除白色背景以及iframe-pop的阴影,而不是叠加!我试着玩css文件,这些文件并没有真正起作用......

如果你单击"#1"方块,你可以看到我的意思:http://testingpage.de/ (我故意破坏了背景图像以查看白色bg.)

感谢您提供的所有帮助和建议!

更新:

由于有用的提示,我可以摆脱图像的白色背景.它仍然不适用于iframe ......