标签: fancybox

您好我正在使用jQuery插件fancybox显示bing地图,当有人将地址输入文本框并点击旁边的提交按钮时.并加载fancybox并显示该地址的地图.这适用于我的应用程序,但问题是,它只能在一个页面上运行良好,而在另一个页面上,当我加载它时,它给我一个错误,说fancybox不是一个函数.我在错误控制台和firebug控制台中看到了这个错误.我不确定会出现什么问题.相同的代码适用于另一个页面,但它不适用于此页面？

$("<a href=\"#showmap\">Map</a>").fancybox is not a function

我很确定它不是可重用性问题.但是当我测试是否已经加载了fancybox的原始文件时,它们会加载dom,所以它可能不是实际问题.但我无法理解问题还有什么.

这是我的代码

abbr:只是一个文本位.我根据用户选择的内容有不同的div.并且每个div都有自己的控件,这些控件将从该文本开始并附加自己的定义,例如mapresults,decValLat,decValLon等.

ex:abbr >> east然后ids将是eastmapresults,eastdecValLat,eastdecValLon等.

function showMapFancybox(abbr){
    var abbr;
    $('#'+abbr+'mapresults').hide(); 
    $('<a href="#showmap">Map</a>').fancybox({
        overlayShow: true,
        onClosed: function() {
            $('#'+abbr+'mapresults').show();
            map_latdec = $('#decValLat').attr('value');
            map_longdec = $('#decValLon').attr('value');
            map_latdeg = $('#degValLat').attr('value');
            map_longdeg = $('#degValLon').attr('value');

            $('#'+abbr+'decValLatsub').val(map_latdec);
            $('#'+abbr+'decValLonsub').val(map_longdec);
            $('#'+abbr+'degValLatsub').val(map_latdeg+'N');
            $('#'+abbr+'degValLonsub').val(map_longdeg+'W');
        }
    }).click();    
};

我想基于fancybox关闭触发一个简单的jQuery函数.它是页面上唯一的fancybox

$.fn.fancybox.close = function() {
    $('#sub_cont').hide(250, function() {
    $('#IDsearchform input').val('');
    });
 });

当然以上都行不通

我正在使用Fancybox显示内联内容(带有链接到新页面的图像的div).模式中的div和图像显示正常,但是当单击图像转到新页面时,我得到"无法加载请求的内容.请稍后重试." 错误.

FancyBox javascript如下:

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox().hover(function() {
            $(this).click();
        });
        $("#fancybox-outer").fancybox().mouseleave( function() {
               $("#fancybox-overlay").click();
         });
    });
</script>

并适用于以下HTML剪辑:

<li class="fancybox-outer">
    <a id="inline" href="#hover-image_0" class="fancybox">
        <img src="http://website.com/file/id:63" style="margin-top: 32px" />
    </a>
    <p><a href="http://website.com/template/view/18">1G2A</a></p>
    <div style="display: none;"><div id="hover-image_0"><a href="http://website.com/template/view/18"><img src="http://website.com/file/id:64/ext:.png" class="img" /></a></div></div>
</li>

<li class="fancybox-outer">
    <a id="inline" href="#hover-image_1" class="fancybox">
        <img src="http://website.com/file/id:60" style="margin-top: 32px" />
    </a>
    <p><a href="http://website.com/template/view/17">17</a></p>
    <div style="display: none;"><div id="hover-image_1"><a href="http://website.com/template/view/17"><img src="http://website.com/file/id:61/ext:.png" class="img" /></a></div></div>
</li>

有谁看到可能导致问题的原因或我需要纠正的内容？

谢谢!

更新:2012年1月19日 - 我在我的服务器上执行了与第一个答案(http://estorkdelivery.com/example/example.html)相同的测试,发现我得到了相同的回复.所以它似乎与我的服务器有关.

我仍然需要帮助解决这个问题.有人有主意吗？

谢谢!

更新:2012年1月28日 - …

我想使用灯箱宝石,如fancybox或彩盒.两个宝石都要求在application.css中添加这一行

 *= require colorbox-rails

这是问题所在.我只有application.css.scss文件.我的所有css文件都是scss文件.我在application.css.scss中有import语句但没有*= require语句.添加上面的行会导致错误:

"*"之后的CSS无效:期望"{",是"= require colorb ..."

这是完整的application.css.scss

@import "bootstrap";
@import "welcome";
@import "sessions";
@import "users";


*= require colorbox-rails

我正在寻找一种解决方案,将光标悬停在Fancybox图像上时将光标更改为放大镜.

就像在Pinterest上一样,当你悬停图像时(使用chrome).

到目前为止,我有这个没有跨浏览器支持.

.picture img {
    cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in;
}

有没有更好的方法来解决这个问题？

有没有人知道如何在运行时调整jQuery Fancybox的大小？

初始化fancybox时我可以这样做:

$("tag").fancybox({ 'frameWidth': 500, 'frameHeight': 700 });

我正在用动态内容填充fancybox,我希望它根据内容调整大小.

我使用jQuery的fancybox一个弹出报名表这里

我希望表单的大小为450px×700px,但无论我设置高度和宽度,我都会得到滚动条:

<script type="text/javascript">
    $(document).ready(function() {
        $("a#regForm").fancybox({
            'titleShow'  : false,
            'autoscale' : true,
            'width'  : '450',
            'height'  : '700',
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic'
            }); 
        });
    </script>

必须有一些我做错了但我无法弄清楚它是什么.我很感激这里有用的手.谢谢.

我发现将以下函数应用于链接onclose 可以从iFrame中关闭Fancybox: parent.$.fancybox.close();

我想更进一步,让链接将父页面转到新的URL.我尝试了以下但它不起作用:

<a onclick="location.href='http://www.domain.com/page/';parent.$.fancybox.close();"> Close and go to page</a>

使用a href不起作用onclose优先.

我刚刚决定使用Firebug,当创建Fancybox窗口时,它实际上需要我的所有ASP.NET控件(包含在DIV标记中)并将它们放在FORM标记之外.所以我猜这就是为什么然后ASP.NET按钮不做任何事情 - 它被放置在窗体之外.

那么,除了使用完全不同的模态对话框之外,你有什么建议我可以阻止这个(或使ASP.NET按钮工作)吗？

编辑:好的,人们报告某些建议的修复程序在某些版本上适用于他们.所以,请务必阅读所有答案/滚动到底部,了解如何在不同的Fancybox版本上解决此问题.

Fancybox 2.0是否可以始终保持图像库导航箭头可见？而不是仅仅在悬停时可见.