相关疑难解决方法(0)

我在Jquery FencyBox中成功运行了Youtube视频.但是,我无法在Jquery FencyBox中运行本地MP4视频文件(此文件存在于文件夹中)

请告诉我如何在JQUERY FENCYBOX中运行本地视频文件(与我在FencyBox中运行youtube视频相同).

以下是我正在使用的代码:

1).我正在使用这些文件(插件):

jquery.fancybox-1.3.4.js和jquery.fancybox-1.3.4.css

2).在Fancy Box中成功播放Youtube上的视频:

<div class="main">
    <h1>VIDEO Playing From YOUTUBE</h1>
    <p><a href="http://www.youtube.com/embed/WAZ5SmJd1To" class="youtube iframe">Watch this amazing YouTube video</a></p>
</div>

3).现在我无法在Fancy Box中播放本地视频文件MP4:

<div class="main">   
    <h1>Local Video File Playing</h1>
    <p><a href="example/video.mp4" class="youtube iframe" > My Local Video in Example Folder</a></p>         
</div>

请建议/指导/帮助.

这个问题与jQuery非常相似:Fancybox使用ajax在chrome中产生一个错误循环,尽管在另一个问题中使用了ajax.我使用内联来呈现div.

我可以打开包含div的fancybox,然后再关闭它.但是,如果我再次打开它,我在控制台中看到以下错误,页面从一个完全不同的部分变为页面中随机部分的文本:

未捕获的TypeError:无法调用未定义的方法'width'

我在此页面上设置了Fancybox,其中包含以下内容:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="./includes/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="./includes/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#admin_link").fancybox({
            'titlePosition'     : 'inside',
            'transitionIn'      : 'slide',
            'transitionOut'     : 'fade',
            'type'              : 'inline'
        });
    });
</script>
<link rel="stylesheet" type="text/css" href="./includes/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

div是:

<div style="display: none;">
                <div id="admin_why_text" style="width:400px;height:300px;overflow:auto;">
                    Some text about why this is needed.
                </div>
            </div>

这个div通过以下链接打开:

      <ul><li>example point <br />=> <a id="admin_link" href="#admin_why_text" title="Why is.....?">why is...?</a></li></ul>

正如您所看到的,基于其他用户使用ajax看到的上一个问题(不是我的问题,请参阅上面的链接),我尝试在我的代码中手动定义类型.不幸的是,这没有任何区别.

有人会有任何其他建议吗？或者在使用内联类型之前有没有人看过这个？

编辑:次要添加,其他类型工作正常.我正在使用iframe类型来显示YouTube视频,它们可以关闭并重新打开而不会出现任何问题.

Edit2:我发现当内联框加载时,我的div被替换为以下内容:

<div style="display: none;"> …

好吧我设置了一些图像打开了fancybox.它曾经工作得很好.现在我得到2个错误.

我改变了什么我不确定.我在网上看到,当你有多个jquery库包含时,你通常会得到.fancybox不是函数错误信息.据我所知,我只有一个.

以下是可以获取此错误消息的示例:

(WWW).thecardb.com /阿巴特/ 1000-Bialbero/1960/0/85

我做了一些网址重写,是否有可能导致问题？

RewriteEngine on
RewriteBase /
DirectorySlash Off

# remove trailing slash
RewriteRule ^(.*)\/(\?.*)?$ $1$2 [R=301,L]

# Redirect non-www urls to www
RewriteCond %{HTTP_HOST} ^thecardb\.com [NC]
RewriteRule (.*) http://www.thecardb.com/$1 [R=301,L]

# Don't match real existing files so CSS, scripts, images aren't rewritten
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d

# Match the first two groups before / and send them to the query string
RewriteRule ^([A-Za-z0-9-]+)?$ car.php?model_make_id=$1 [L]

RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([A-Za-z0-9-]+)/([A-Za-z0-9-._]+)?$ …

看起来这个问题之前已经被问到了,但是提问者通过切换到prettyPhoto解决了他自己的问题.我更愿意弄清楚为什么会发生这种情况,只是为了理解,但如果似乎没有解决方案,我会改变.还有一个设置overflow:hidden,如其中一个答案中所述,但我想知道我是否不能只调整框的大小,而不是切断我的图像.

我正在使用fancybox 1.3.4和这个 stackoverflow文章中描述的补丁.

我正在使用fancybox zip附带的所有文件(css,js,images)都在资产管道中,并且没有更改,除了更改css文件中的图像路径以便在rails中正确使用图像'资产管道,使用rails image-url helper.我可以发布CSS,但我不相信它会有所帮助(我可能是错的).我正在使用rails 4附带的jQuery.

DOCTYPE是html.

我的application.js文件看起来像:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.easing-1.3.pack
//= require jquery.fancybox-1.3.4

$(document).ready(function(){
  $("a.image-gallery").fancybox({
    'width': 640,
    'height':480,
    'autoScale':true,
    'autoDimensions':false
  });
});

但是,我放入灯箱库的图像溢出了灯箱的右侧.你可以在这里看到我在firefox 25上谈论的内容.单击前两个图像之一以查看此问题.

作为参考,我的图像是640x480 png.

我可以采取哪些措施来纠正这个问题？