Question

使用JQuery，我将一个div从外部HTML页面加载到fancybox，并使用变量构建链接。只需点击两下即可打开它。我相信，第一个只是启动它。但我不知道如何解决它。有没有更好的方法来做到这一点？

HTML在这里：

<a class="BannerVideoAwesome fancybox" id="series900" border="0"   href="/mkting/Videos/Speakers.html"><img src="/images/titles/CM/series-speakers-video.jpg" border="0"  align="left" /></a>

jQuery在这里：

$('a.BannerVideoAwesome').live('click', function(e){
    e.preventDefault();
    var url = $(this).attr('href');
    var grabVid = '#' + $(this).attr('id');
    vidObject = url + grabVid;
    var vidContents = vidObject.html();
    alert(vidContents);
    $.fancybox({
            //'href': url,
            'content':'vidContents'
                     });

如果有任何人可以给我的帮助，请提前多多谢谢你。几天来我一直在努力。

Answer 1

尝试从点击事件更改为鼠标悬停。

$('a.BannerVideoAwesome').live('mouseover', function(e){
...

Answer 2

我认为你帖子的标题有点误导。无论如何，如果我理解正确，你只想将外部html文件中的部分内容（DIV）加载到fancybox中。在您的示例中，episodeSpeakers.html文件包含ID ='series900'

的DIV

<div id="series900">selected content</div>

如果以上是正确的，那么你不需要使用jQuery live（），而是将fancybox绑定到click（）并使用ajax和dataFilter来选择内容。

使用相同的html，这个脚本应该可以解决问题：

$("a.BannerVideoAwesome").click(function() {
var grabVid = "#"+$(this).attr('id');
$.fancybox(this,{
 'type': 'ajax',
 'ajax': {
   dataFilter: function(data) {
   var vidContents = $(data); 
   vidContents = $(grabVid, vidContents); 
   return(vidContents); 
  } // datafilter
 } // ajax
}); // fancybox
return false;
}); //click

或者您可以使用

$("a.BannerVideoAwesome").click(function(event) {
event.preventDefault();
.
.

而不是

return false;

重要：由于某些跨浏览器问题，请不要使用上面的dataFilter解决方案。最好使用fancybox的内联方法，将部分内容（来自外部html文件）添加到调用html文档中的隐藏DIV中，然后将其从那里移动到fancybox中。它（当然）需要添加这样的DIV。 e.g：

<div style="display: none;">
 <div id="fancyContent"></div>
</div>

然后使用此脚本：

$("a.BannerVideoAwesome").click(function() {
var grabVid = "#"+$(this).attr('id');
$.ajax({
 type: "GET", // default
 dataType: "html",      
 cache: false,                      
 url: this.href,
 success: function (data) {
  $("#fancyContent").html(grabVid ? $("<div>").append(data).find(grabVid) : data);
  $.fancybox({
   'href': "#fancyContent",
   'onCleanup': function() {
     var fancyContent = this.href;
     $(fancyContent).unwrap().empty();
   } // onCleanup 
  }); // fancybox
 } // success
}); //ajax
return false;
}); //click

适用于大多数浏览器。顺便说一句，onCleanup选项修复了this bug

Answer 3

$('a.BannerVideoAwesome').live('click', function (event) {
    $.fancybox(this,{
        'autoDimensions': true,
        'autoScale': true,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'ajax',
        'padding': 0
    });
    event.preventDefault();
});

Fancybox点击两次即可打开动态加载的内容

3 个答案: