标签: lightbox

在我看来，模式对话框和灯箱都有相同的目的。似乎一方面是性感的（但 JavaScript 重），另一方面是经济的（但无聊）。

是什么促使您决定使用其中一种而不是另一种？或者，是否有更好的方法来向用户询问复杂数据而无需导航到另一个页面？

我在 Stackoverflow 中进行了足够的搜索，但无法找到一个线程来回答我的问题。

以下是我的场景，

function openVideo(videoid,urlid){
        var videourl = 'http://localhost/ptchoice-local/welcome/video/'+videoid+'/'+urlid;

        $("a#video_link").fancybox({
                    'type': 'iframe', 
            'width' : 1000,
            'height' : 600,
            'autoDimensions' : false,
            'autoScale' : false,
            'href' : videourl
        });

    $("a#video_link").trigger('click');
    return false;
} 

<a href="#" onclick="openVideo('2134sdf234532sdfs324234','1')">Show video</a>

因此，当我单击“openVideo”功能而不是锚标记本身时，我想设置 href 值。

Fancybox版本：jquery.fancybox-1.3.4.pack.js

请就此提出建议。

我有多个带有光滑滑块的缩略图，我也想使用灯箱画廊打开它们以获得更大尺寸的图像。

光滑的滑块效果很好，灯箱确实打开了，但它不会检测到图库功能。如何编辑当前的 Magnific Popup Jquery 以便它能够检测到图库？

jQuery('.popup-gallery').each(function() {
    jQuery(this).magnificPopup({
        delegate: 'a',
        type: 'image',
        tLoading: 'Loading image #%curr%...',
        mainClass: 'mfp-img-mobile',
        gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0,1], // Will preload 0 - before current, and 1 after the current image
        arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>', // markup of an arrow button
      }
    });
  });

这是我当前代码的JSfiddle 。

我正在使用<p:lightBox>流式编程<p:media>来预览外部 PDF。

它工作得很好，但我遇到了一点障碍。

当 pdf 对话框呈现时，它会显示（鼠标悬停时）一个标题，其中始终显示相同的标题：“dynamiccontent.properties”。

是否有一个属性或其他东西我可以覆盖来自定义它？

JSP代码：

<p:lightBox>
  <h:outputLink value="#" title="#{myDoc.fileName}">
    <i class="fa fa-eye" aria-hidden="true"></i>
  </h:outputLink>

  <f:facet name="inline">
    <p:media value="#{documentController.stream}" width="1100px" height="600px" player="pdf">
        <f:param name="idStore" value="#{myDoc.idStore}" />
    </p:media>
  </f:facet>
</p:lightBox>

PDF 显示的标题

谢谢你的时间。

我们都看到了网络上流行的灯箱效果(例如JQuery Lightbox和Shadowbox).昨天我与一位完全迷恋灯箱的客户进行了讨论,并希望每次提交表格时都使用它们,包括:

• 登录表单 - 单击登录按钮,将出现带有用户名和密码字段的灯箱
• 客户咨询表格 - 表格提交后,灯箱会显示"谢谢"
• 注册表单 - 表单提交后,Lightbox会显示"谢谢"

我想知道人们何时应该和不应该使用灯箱以及为什么.

具体来说,我希望将灯箱绑定到特定元素.通常我会这样做:$('a.lightbox').lightBox();但由于我正在使用AJAX进行一些加载,因此无效.看看我发现的jQuery API .bind(),.live()但是当我$('a.lightbox').bind('lightBox')在AJAX .load()调用之后做的时候我没有得到任何东西.

我错过了什么？

我在这里遇到了问题.我在iFrame中有一个fancybox,它正常工作,但我需要它扩展到iFrame之外,这样它就可以填满整个屏幕(我的意思是扩展到它的父级).

有谁知道怎么做？

在iPad上查看时,Colorbox iframe内容无法滚动,请阅读以下内容:

https://github.com/jackmoore/colorbox/issues/41#issuecomment-5244379

当显示的网页大于从Ipad为彩色框设置的尺寸时,滚动功能被禁用和/或不存在.

有些人可能会建议一个手指或两个手指滚动,这不起作用.

预先要求:拥有一个Ipad,或者去当地的最佳购买

重现步骤:转到http://colorpowered.com/colorbox/core/example1/index.html 点击外部网页(Iframe)链接,在Google搜索中输入内容

结果:您无法滚动查看结果.

有没有解决这个问题？有什么工作可以解决这个问题吗？顺便说一下,这适用于IE,Chrome和Firefox.

任何一个团体为此工作了？任何帮助将不胜感激.

我的pdf文件没有显示在灯箱上,它只是保持加载但是当我使用iframe显示它时.我在cpanel上传了pdf,我只想让它在灯箱上观看.

这是我在iframe中的代码,它正在运行:

<p><iframe src="url/of/.pdf" width="600" height="780"></iframe></p>

这是我的灯箱代码,没有显示pfd:

<link rel="stylesheet" type="text/css" href="/javascript/jquery/plugins/fancybox/fancybox.css" media="screen">
<script type="text/javascript" src="/javascript/jquery/plugins/fancybox/fancybox.js?b84fd"></script>

<script type="text/javascript">

$(document).ready(function() {

/* This is basic - uses default settings */

$("a#single_image").fancybox();

/* Using custom settings */

$("a#inline").fancybox({
'hideOnContentClick': true
});

/* Apply fancybox to multiple items */

$(".iframe").fancybox({
'transitionIn'    :    'elastic',
'transitionOut'    :    'elastic',
'speedIn'     :    600,
'speedOut'     :    200,
'overlayShow'    :    false
});

});

</script>


<p><a class="iframe" href="url/of/.pdf">Zero</a></p>

希望有人能帮助我.

如何将iframe大小（以我在YouTube上打羽毛灯的iframe为例）设置为浏览器窗口的百分比？

我有一个可能是任意大小的浏览器，并且要将iframe宽度设置为浏览器窗口的80％。

固定宽度的16：9宽高比提到了选择宽度后如何设置16：9高度。我不知道如何使用它。

任何jsfiddle示例（或codepen）都会有很大帮助。我尝试了很多不同的方法-但iframe无法保持宽高比。

http://codepen.io/anon/pen/zvqQgq

<iframe src="https://www.youtube.com/embed/YAcLViTHDOo" width="50%" class="player" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>

如何设置宽度为浏览器窗口的80％，并允许高度为宽度的80％的16：9比例？