カラーボックス：クリックすると外部サイトへのリンクが付いたポップアップ画像

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> 

、ベビーニットキットをクリックしたときにポップアップは、私が作成した画像（about.babyknitskit.png）と罰金が開きます。ポップアップの上に「Chronicle Booksで入手してください」というメッセージが表示されます。クリックすると、そのサイトに移動します（同じタブでは不要です）。代わりに、私はabout.babyknitskit.pngイメージをクリック可能にして新しいウィンドウでリンクを開くようにします。

大変ありがとうございます。私はあなたに十分な情報を与えてくれることを願っています。

Answer 1

単にcolorboxのhtmlプロパティを使用します。代わりに、'inline 'をtrueに設定してhrefプロパティを使用することもできます。私は簡単な抽出のためにアンカーのカスタム属性を定義しています。あるいは、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>