data-hrefでのcolorbox設定方法

質問

かなり調べてみたのですが解決方法がわからなく、ご教授頂けると幸いです。

まず、テーブル行を全体をリンク（クリック）できるように設定しています。
jQueryは下記のような感じで設定しています。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
$(function() {
$('.list tr[data-href]').addClass('clickable')
.click(function(e) {
if(!$(e.target).is('a')){
window.location = $(e.target).closest('tr').data('href');}
});
});
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

そしてリストの各行をクリックすると、ColorboxにてInlineフレームを表示したく下記の様に記載しました。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<table class="list">
<tr class="inline" data-href="#inline_content">
<th>タイトル</th>
<td>説明</td>
<td>日付</td>
</tr>
<tr class="inline" data-href="#inline_content">
<th>タイトル</th>
<td>説明</td>
<td>日付</td>
</tr>
<tr class="inline" data-href="#inline_content">
<th>タイトル</th>
<td>説明</td>
<td>日付</td>
</tr>
</table>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

Colorboxの記述は下記になります。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
$(document).ready(function(){
$(".inline").colorbox({inline:true, width:"350px", height:"300px"});
});
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

これだと、Colorbox自体は作動するのですが、真っ黒で中身が表示されず指定サイズの枠のみ出てきます。
通常のColorbox設定では<a class="inline" href="#inline_content">テキスト</a>と記述し、こちらをテーブル以外の場所のテキストにリンクするときちんと作動します。

という事は<a ～></a>という形で設定していないから、という事はわかるのですが
tr自体につけた【data-href="#inline_content"】にはどのように設定すれば良いでしょうか？

$(".list tr[data-href].inline").colorbox({inline:true, width:"350px", height:"300px"});
$(".list tr.inline[data-href]").colorbox({inline:true, width:"350px", height:"300px"});
なども試しましたがダメでした。

海外サイトでの記述等もかなり調べてみたのですが
Colorboxでdata-hrefと併用している例が見つけられず、いきづまってしまいました。
ご教授頂けますと幸いです。
どうぞ宜しくお願い致します。

回答No.1

fujillin · ベストアンサー

colorboxはよく知りませんが、表示先のurlを指定できるようになっているみたいなので、それを利用すればいいんでは？
http://www.jacklmoore.com/colorbox/

iframe: true, href: XXX ～～　とか
（iframeのurlがどうなっているのか、ご質問文では不明なので・・・）

ご提示のスクリプトの前半のものは何をしたいのかよくわかりませんでした。

お礼

ご回答ありがとうございました。

説明不足で申し訳ありません。
前半のスクリプトは下記サイトを参考にテーブルの列（tr）全体をリンク先に指定する、というものです。
http://kachibito.net/web-design/clickable-table-rows.html

ご指摘頂いた点、colorboxの設定自体にurl指定する事でうまく動きました。
colorboxのオプションという初歩的な確認をしておらず、お恥ずかしいです。

こちらを踏まえて下記のように修正した所、うまく動作しました！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
$(function() {
$('.list tr[data-href]').addClass('clickable')
.click(function(e) {
if(!$(e.target).is('a')){
window.location = $(e.target).closest('tr').data('href');}
});
$(".list tr.inline").colorbox({inline:true, innerWidth:"350px", href:"#inline_content"});
});
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

本当にありがとうございました！