代码之家 › 专栏 › 技术社区 › icanhazgiraffe

如何使用fancybox打开外部链接

lightbox fancybox wordpress jquery

icanhazgiraffe · 技术社区 · 11 年前

我正在为我遇到的一个问题寻求帮助。我有一个WordPress网站,我的主题已经集成了fancybox。我希望我的网站上的外部链接也能在fancybox中打开,而不仅仅是现在默认的图片。下面是在我的scripts.js中调用fancybox的地方

    // Lightbox Init
var fancyboxArgs = {
    padding: 0,
    overlayColor: "#000",
    overlayOpacity: 0.85,
    titleShow: false
};
$('.gallery-icon a').attr('rel', 'post-gallery');
$("a[rel='gallery'], a[rel='lightbox'], .gallery-icon a, .colorbox").fancybox( fancyboxArgs );`

在外部链接上启动fancybox的代码会是什么样子?

2 回复 | 直到 11 年前

Mathieu 11 年前

目前,Fancybox是在与该选择器匹配的DOM元素上初始化的

$("a[rel='gallery'], a[rel='lightbox'], .gallery-icon a, .colorbox")

如果您想向该选择器添加外部链接,可以尝试添加 a[target='_blank'] 到选择器,如下所示:

$("a[target='_blank'], a[rel='gallery'], a[rel='lightbox'], .gallery-icon a, .colorbox")

然而,只有当外部链接当前在选项卡中打开时,这才有效。如果不是这样,你需要在外部链接中添加一些东西,将其与CSS类或数据属性等内部链接区分开来,并将其添加到选择器中。

Chris G 11 年前

我要做的是设置另一个函数来搜索一类“外部”,然后在iframe中打开fancybox。您可以轻松调整 this 将类附加到外部链接。

推荐文章

nr159 · 如何让一个只支持Css的灯箱在一个页面上运行多个图像?

6 年前

Dan073 · 如何在图像下方添加标题(图像用于灯箱)

7 年前

Shahbaz A. · HTML5视频:自动播放在lightbox中不工作

7 年前

xendi · Videojs响应灯箱不工作

7 年前

Enzo · UIKit Lightbox next按钮工作不正常

7 年前

Octtavius · 为什么html5lightbox不能与angular一起工作?

8 年前

Bram Van Vleymen · 使用javascript显示灯箱

9 年前

Roy Grubb · 如何在jQuery中使用.on(“click”……)之后的类和数据类型模拟<a>标记

10 年前

Eager2Learn · Magento-在新窗口或选项卡中以LightBox打开页面

10 年前

icanhazgiraffe · 如何使用fancybox打开外部链接

11 年前