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以外を消せば、画像でもファンシーさせれます。
それにしても、相変わらず見づらいなぁ…。
文才が欲しい。
この記事についてるタグ
関連記事
- »FC2ブログのテンプレートをhtml5でリニューアル。
- »Outlook.com(hotmail)で@より前に.(ドット)があると送受信出来ない罠。
- »Ajaxで動的に生成されたリンクにもfancyboxを適用させてみる。
- »ちょっと気になったのでオンラインストレージ探してみた。
- »隣接セレクタと間接セレクタを微妙に勘違いしてたのでメモ。
Sponsored Links
Comment : 1
Track Back : 0
- この記事のトラックバックURL
- http://webruary.blog37.fc2.com/tb.php/110-bdd97bef
神URL 2015-07-15 (水) 13:04
すごくためになったよ！！市ね！