jquery - Jquery 和 id 标记无法正常使用 fancybox

Question

我一直在研究这个网站的功能，并且很好奇是否有人知道“fbrd”id 标签如何与 jquery 一起使用？我已经研究了几个月，似乎无法复制。我是 jquery 的新手。

Answer 1

好吧，我已经浏览了代码，并为您准备了一个示例。

你可以在这里找到它。

他们基本上所做的是将悬停事件与FancyBox插件相结合。

我在演示中使用的 jQuery 是：

$("#fbrd").hover(function() {
    $(".title").toggle();

});

$("#fbrd").hover(
  function () {
    $(this).addClass('hover');
  }, 
  function () {
    $(this).removeClass('hover');
  }
  );


$("#fbrd").click(function() {

    $("#TheFancybox").html("<p id='display'>C:\>_Is this what you are looking for?</p><iframe width='560' height='315' src='//www.youtube.com/embed/lAl28d6tbko?autoplay=0' frameborder='0' allowfullscreen></iframe>");

    $(".fancyTrigger").fancybox();
    $(".fancyTrigger").trigger('click');
});

我没有完全按照他们在网站上所做的那样做，但我的演示应该让您对 jQuery 的工作原理以及如何使用这些函数有一些直觉。您可以根据自己的喜好开始更改设置。如果您不知道为什么某些东西会以这种方式工作，请在评论中寻求帮助。

祝你好运。

更新

为了展示如何使 FancyBox 采用另一个尺寸，然后是它所显示内容的尺寸，您可以像这样设置 FancyBox 的参数：

$(".fancyTrigger").fancybox({
   'width':'90%',
   'height':'90%',
   'autoSize' : false,
   'fitToView':  false
});

可以在此处找到此设置的演示。

可以在此处找到全屏演示。

祝你好运！