JQuery & Fancybox 单击图像以打开新页面/链接(更新现有代码）

JQuery & Fancybox clicking image to open a new page/link (Update existing code)

本文关键字：链接 更新 代码 新页面 amp Fancybox 单击 图像 JQuery      更新时间：2023-09-26

早上好，

Iv 有一个页面，当用户登陆我们的主页时，该页面当前会打开事件图像，此代码已经到位，我只是尝试添加指向我们正在举办的活动的链接。（修改代码）我一直在尝试使用 .wrap 和"内容"以及我在这里找到的其他一些东西，但是我无法正确修改代码。（当我尝试时，页面将简单地退出显示，所以我知道有错误）我不熟悉java/fancybox，因此任何有关修改当前代码的帮助将不胜感激！

这是我目前拥有的：

<script type="text/javascript">
jQuery(document).ready(function(){

        jQuery.fancybox({
            'autoScale'         : false,
            'width'             : 783,
            'height'            : 700,
            'autoScale'         : false,
            'transitionIn'          : 'elastic',
            'transitionOut'         : 'none',
            'type'              : 'iframe',
            'titlePosition'         : 'inside',
            'overlayColor'          : '#fff',
            'href'              : '/img/treeofdreams.jpg'
        });
});
</script>

PS 我甚至试图更改 iframe 上的高度以在图像下方添加以下内容：

For more details visit our FaceBook page: <a href="url">Click Here</a>

然而，iframe似乎不想在下面分享更多的房地产！

谢谢

如果您只想添加一个指向 fancybox 中显示的图像的链接，那么.wrap()方法是要走的路，但是您可能需要确切地知道您需要定位哪个选择器并将其包装在 onComplete （v1.3.4） 回调中

所以试试这个代码：

jQuery(document).ready(function ($) {
    jQuery.fancybox({
        autoScale: false,
        width: 783, // or whatever needed
        height: 700, 
        transitionIn: 'elastic',
        transitionOut: 'none',
        // type: 'iframe', // you don't need this for images
        titlePosition: 'inside',
        overlayColor: '#fff',
        href: '/img/treeofdreams.jpg', // the URL of the image
        title: "the title", // you may need this
        onComplete: function () {
            jQuery("#fancybox-img").wrap(jQuery("<a />", {
                href: "http://facebook.com/", // the URL to open after clicking the image
                target: "_blank", // opens in a new window/tab
                title: "go to facebook" // optional, shows on mouse hover
            }))
        }
    });
}); // ready

注意#fancybox-img是花式框图像的选择器ID。

参见 JSFIDDLE

注意：这是针对花式盒子v1.3.4

相关文章：