webruaryと黒猫のウィズ

webruaryの記事一覧 webruaryのRSS

通常のブログ。http://webruary.net/


Ajaxで動的に生成されたリンクにもfancyboxを適用させてみる。

Category:Web

忘れないうちに。

自分が出くわしたのは、jqueryを使用してaタグが入ってる親要素全体をクリックエリアになるようにしてたら『fancybox』が適用されなかったっていう。
まぁ、やろうと思えばjqueryじゃなくてCSSのみでイケるコーディング状況だったんですが、脳内で「あきらめないあきらめないあきらめないあきらめないあきらめない」とももクロが歌い始め…。

ちょっと調べてみると、jqueryに限らずAjaxで動的に生成されたリンクだとfancyboxは動作しないっぽい。

ただ、やっぱり、他にも動的なリンクにfancyboxを適用させようとしている方がおり、解決策を紹介していましたので参考にさせていただきました。

ここから続き

解決前に失敗例。
目的は複数の<li>をリンク化させつつ、そのうち一つだけfancyboxでiframeを使用しページ内に表示させたかった。

javascript
<script type="text/javascript">
$(document).ready(function() {
//ボックスをリンク化
$(function(){
$(".box").click(function(){
window.open($(this).find("a").attr("href"),'_self');
return false;
});
});

//fancyboxの部分
$("a.fancy").fancybox({
'width' : '9',
'height' : '85%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
html
<ul>
<li class="box">
<a class="fancy" href="hoge.html">リンクテキスト</a><br>
コメント。コメント。コメント。コメント。
</li>

<li class="box">
<a href="hoge2.html">リンクテキスト</a><br>
コメント。コメント。コメント。コメント。
</li>
</ul>

単純に<li>にclass名boxを割り当ててリンク化し、中の<a>にclass名fancyを指定するれば動作する…そぉ思ってた時期もありました(´・ω・`)
(もちろん、上記以外に<head>にはfancyboxに必要な外部ファイルは読み込んでました。)

これだと、jqueryで動的に<li>へhrefを割り当ててるのでfancyboxが動作せず、ふつーにページ移動しちゃいます。

そこで参考にしたのがモンキーレンチさんの『Ajaxで取得した画像にfancyboxを適用しても動作しない場合の対処法』。
こちらの記事で動的に生成されたのだとfancyboxが動作しないってのを知りました。

正直、正確にlive関数がどんなのか理解してませんが、たぶん動的に生成されたものでも「いえ、自分、最初からここにいました。静的リンクっす。」ってごまかす感じ?的な。

javascript
<script type="text/javascript">
$(document).ready(function() {
//ボックスをリンク化
$(function(){
$(".box").click(function(){
window.open($(this).find("a").attr("href"),'_self');
return false;
});
});

//fancyboxの部分
//jqueryで動的に出力したものにもイベントが適用されるように.liveを追加
$(".fancy").live("mouseover", function(){

$(this).fancybox({
'width' : '9',
'height' : '85%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
});
</script>
html
<ul>
<li class="fancy">
<a href="hoge.html">リンクテキスト</a><br>
コメント。コメント。コメント。コメント。
</li>

<li class="box">
<a href="hoge2.html">リンクテキスト</a><br>
コメント。コメント。コメント。コメント。
</li>
</ul>

live関数については日本語リファレンスをご参照。

ただ、↑の様にlive関数を追加しただけだとfancyboxは動作しますが、表示されるウィンドウには参照先不明(404状態)になります。
おそらくfancyboxが<li>越しのhrefを受けれてないのかな?
コーディング的にありえませんが、実は<li href="hoge.html">ってやるとちゃんと表示されたりします。

ってことで、もう一つ参考にしたのがStack Overflowってサイトに投稿(?)されてた『jQuery Sliding door effect in FancyBox image gallery?』。
「sliding」「effect」である程度は予想できますが、えぇ、日本人な自分には何を質問した投稿なのかもよくわかってません。(←なにげにリンク先のDemoがなかなかイイ感じ。そのうち何かの参考にしよう。ぐへへ。)
ただ、Answerにあった内容がやりたかった事そのまんま。
つまりは、fancyboxのオプションのhrefでリンク先を指定。

javascript
<script type="text/javascript">
$(document).ready(function() {
//ボックスをリンク化
$(function(){
$(".box").click(function(){
window.open($(this).find("a").attr("href"),'_self');
return false;
});
});

//fancyboxの部分
//jqueryで動的に出力したものにもイベントが適用されるように.liveを追加
$(".fancy").live("mouseover", function(){

//varで作った変数urlにfindで探したaタグのhrefを入れる
var url = $(this).find('a').attr('href');

$(this).fancybox({
//hrefに変数urlを入れる
'href' : url,
'width' : '9',
'height' : '85%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
});
</script>
html
<ul>
<li class="fancy">
<a href="hoge.html">リンクテキスト</a><br>
コメント。コメント。コメント。コメント。
</li>

<li class="box">
<a href="hoge2.html">リンクテキスト</a><br>
コメント。コメント。コメント。コメント。
</li>
</ul>

でけた∩(・∀・)∩

もちろん、今回はiframeでしたが、オプションのhref以外を消せば、画像でもファンシーさせれます。

それにしても、相変わらず見づらいなぁ…。
文才が欲しい。

このエントリーをはてなブックマークに追加

Sponsored Links

Comment : 1

  1. URL 2015-07-15 (水) 13:04

    すごくためになったよ!!市ね!

Comment Form

Track Back : 0

この記事のトラックバックURL
http://webruary.blog37.fc2.com/tb.php/110-bdd97bef

トラックバック一覧