Question

我希望有人可以帮助我。我有一个新的客户端网站上的colorbox工作，但我很难找到如何添加代码，允许弹出的图像被点击，然后链接到新标签中的外部网站。

这是我到目前为止所做的：

$(document).ready(function(){
$("a[rel='pop']").colorbox({transition:"fade", speed: 250});

}）;

<a href="../images/about.babyknitskit.png" rel="pop" title="<a href='http://www.chroniclebooks.com/site/catalog/index.php?main_page=pubs_product_book_info&products_id=6499&store=books'>Get it at Chronicle Books</a>"><span class="h2">Baby Knits Kit</span> (2007)<br>Chronicle Books<br></a>

在上面的内容中，当点击Baby Knits Kit时，弹出窗口会打开我创建的图像（about.babyknitskit.png）。在弹出窗口的顶部有“Get it at Chronicle Books”，当我点击它时会带我到那个站点（在我不想要的同一个标签中）。相反，我希望about.babyknitskit.png图像可以点击并在新窗口中打开链接。

任何想法都非常感激。我希望我已经给了你们足够的信息，因为我是所有这些和stackoverflow的新手。

Answer 1

只需使用colorbox的html属性即可。或者，您可以使用href属性并将'inline'设置为true。我已经为锚点定义了一个自定义属性以便于提取，或者你可以编写一个正则表达式模式来从title属性中提取它。

    $(document).ready(function() {
        $("a[rel='pop']").colorbox({transition:"fade", speed: 250, html: function(){
            var html = $('<a href="' + $(this).data('image-link') + '" target="_blank"><img src="' + $(this).attr('href') + '" /></a>');
            return html;
        }});
    });

<a href="_images/luke_header-bkg.jpg" rel="pop" title="<a href='http://www.chroniclebooks.com/site/catalog/index.php?main_page=pubs_product_book_info&products_id=6499&store=books'>Get it at Chronicle Books</a>" data-image-link="http://www.chroniclebooks.com/site/catalog/index.php?main_page=pubs_product_book_info&products_id=6499&store=books"><span class="h2">Baby Knits Kit</span> (2007)<br>Chronicle Books<br></a>

Colorbox：弹出图像，点击时链接到外部网站

1 个答案: