标签: lightbox

要在jquery中运行灯箱,你必须点击图库的一个图像('a'链接)然后立即灯箱运行....

$('#gallery a').lightBox();

但我打算使用灯箱作为缩放,这意味着我有一个按钮'ZOOM',通过点击这个按钮我会打开我的画廊......

我不知道我怎么能这样做......

我有一个关于灯箱的问题，请参阅我的 jsFiddle。单击其中一个图像会打开更大版本的绘画作为页面叠加。

如何使用ESC按键关闭此页面叠加层？

以及如何使用箭头键移动到下一个图像？

我需要什么样的 jQuery 插件 / javascript 才能做到这一点？

<ul class="lb-album">

                    <li>
                        <a href="#Fly-My-Pretties-Walled-Garden">
                            <img src="http://sandipa.com.au/images/works-for-sale/thumbs/Fly-my-Pretties-Walled-Garden-sm.jpg" alt="Fly My Pretties: Walled Garden">
                            <span>Fly My Pretties</span>                        </a>
          <div class="lb-overlay" id="Fly-My-Pretties-Walled-Garden">
                            <a href="#page" class="lb-close">x Close</a>
                            <img src="http://sandipa.com.au/images/2010-2011/1000px-wide/Fly-my-Pretties-Walled-Garden.jpg" alt="Fly My Pretties: Walled Garden">
                            <div>
                                <h3>Fly My Pretties: Walled Garden<span>mixed media on canvas</span></h3>
                                <p>72 x 137 cm</p>
                                <a href="#Light-that-Shapes-the-Shadows" class="lb-prev">Prev</a>
                                <a href="#Central-Highlands-Circle-of-Gold" class="lb-next">Next</a>                            
                            </div>
                        </div>
                    </li>

<li>
                        <a href="#Central-Highlands-Circle-of-Gold">
                            <img src="http://sandipa.com.au/images/works-for-sale/thumbs/Central-Highlands-Circle-of-Gold-sm.jpg" alt="Central Highlands: Circle of Gold">
                            <span>Circle of Gold</span>                     </a> …

我目前正在使用由...提供的灯箱... http://leandrovieira.com/projects/jquery/lightbox/

如何点击作品,它会调出灯箱并显示文字而不是图像？我想要的是灯箱中显示的条款和条件.

HTML

<span id="terms"> <a href="">Terms & Conditions</a></span>

jQuery的

$(function () {
   $('#terms a').lightBox();
});

我有一个youtube视频.

我想在停止播放时显示一个灯箱.我需要使用javascript/jQuery或PHP来完成.Ajax也没关系.

我找了一个解决方案,但没有找到一个有效的解决方案.

我有几个我正在研究的网站是通过灯箱加载子页面.谷歌正在查找实际内容,但页面很可怕,因为它们并不意味着加载所有标题和诸如此类的东西 - 这是用于灯箱交付的内容(ajax,fancybox).

在PHP或javascript中,如果有必要,我如何确定是否在灯箱中查看内容？很高兴抛出"查看原始页面"链接或其他东西.

是否有另一种方法可以链接到更传统的URL的维基百科公共页面？

当我将灯箱图像上的href链接设置为外部网站页面时,它很高兴,除非该外部页面的URL看起来像图像(以'.jpg'结尾) - 在这种情况下,灯箱会尝试加载图像和休息.

维基百科公共图像页面充当页面,而不是图像.我想链接到页面,但页面URL以".jpg"结尾,因此灯箱正在尝试将页面加载为图像.

例如:http://commons.wikimedia.org/wiki/File: Giant_Haasts_eagle_attacking_New_Zealand_moa.jpg

我已搜索但无法找到任何帮助.

我正在使用http://lokeshdhakar.com/projects/lightbox2/。我有图像缩略图，单击它们后，它们会在灯箱中打开 - 显然。

我遇到的问题是，当其中一些图像为 1800x1200 时，灯箱会覆盖整个网页。

如何编辑以确保图像的最大高度为 400 像素，宽度成比例？我不能简单地上传较低尺寸的图像，因为它们是用户上传的图像，所以我需要做这个脚本/服务器端。

谢谢！

我正在使用Fancybox插件播放模态视频.这很容易实现在台式机和平板电脑上播放视频的要求.但是在移动设备上,而不是显示模态窗口,视频应该在单击链接时自动以全屏模式播放.我尝试在移动设备中禁用插件,希望youtube在用户重定向时自动以全屏模式打开它.但没有奏效.

我怎样才能做到这一点？或者这实际上是可能的吗？

这是jQuery

$(function () {
        var jWindow = $(window);
        $(".youtube-media").click(function () {
            if (jWindow.width() <= 768)
                return;
            $.fancybox({
                'padding': 2, 'autoScale': true, 'transitionIn': 'none', 'transitionOut': 'none', 'title': this.title,
                'width': 600, 'height': 340, 'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                'type': 'swf', 'swf': {
                    'wmode': 'transparent',
                    'allowfullscreen': 'true'
                }
            });
            return false;
        });
    });

这是HTML代码

<a class="youtube-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Play Video</a>

我目前正在尝试使用dropzone.js库在我的网站上实现一个拖放上传功能.到目前为止,这种方法运行良好,但我希望用户能够在上传完成后点击它们来查看上传的图片.

我考虑过购买包括像fancybox或lightbox这样的库,但我不知道如何将这个实现到上传的dropzone-elements.任何帮助/ tipps将非常感激,我无法在网站的任何地方找到我的问题的答案.

提前致谢 :)

我正在使用featherlight.js的1.3.3版本,而且我仍然在大图像上进行垂直滚动.无论出于何种原因,事情都没有很好地调整大小.

要重现,只需在其中抛出一个非常大的图像链接并运行featherlight - 垂直滚动.适用于Mac的最新版Chrome,Safari和Firefox.

我注意到使用WP Featherlight插件时不会发生这种情况,但是看起来这个插件使用的是版本1.2.3的修改版本,其中CSS(可能还有JS)与Github上的内容不匹配...

例如,这就是插件CSS中的内容:

.featherlight .featherlight-content {
background: #fff;
border: 0;
cursor: auto;
display: inline-block;
max-height: 95%;
max-width: 90%;
min-width: inherit;
overflow: auto;
padding: 0;
position: relative;
text-align: left;
vertical-align: middle;
white-space: normal;

}

这就是Github回购中的内容:

.featherlight .featherlight-content {
    /* make content container for positioned elements (close button) */
    position: relative;

    /* position: centering vertical and horizontal */
    text-align: left;
    vertical-align: middle;
    display: inline-block;

    /* dimensions: cut off images */
    overflow: auto;
    padding: 25px 25px 0;
    border-bottom: 25px …