Colorbox: всплывающее изображение со ссылкой на внешний сайт по клику

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> 

В выше, когда младенца Вязаные Kit щелкают всплывающее окно открывается нормально с изображением я создал (about.babyknitskit.png). В верхней части всплывающего окна есть «Get it at Chronicle Books», и когда я нажимаю, он приведет меня к этому сайту (на той же вкладке, которую я не хочу). Вместо этого я хотел бы, чтобы изображение about.babyknitskit.png можно было щелкнуть и открыть ссылку в новом окне.

Любые мысли очень ценятся. Надеюсь, я дал вам ребята достаточно информации, поскольку я новичок во всем этом и в stackoverflow.

Answer 1

Просто используйте свойство html colorbox. В качестве альтернативы вы можете использовать свойство 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>