【fancybox】ajaxで別ページの特定の場所を表示させる

電脳備忘録

このサイトはLightBox的な処理をfancyboxというライブラリで処理しているのですが、別ページの特定の場所を表示できないかなぁと思いテストしてみました。
何がしたかったかというと、個別のエントリーではアーカイブページへのリンクを持たずにひとまとめにしておいて、ボタンをクリックしたときにAjaxで情報をとりに行くようにしたらエントリーページの情報量を減らせるんじゃないかと思ったのです。

いろいろらべて何とか別ページの特定の場所を呼び出すことができましたが、まだいまいち理解できていないですね...。

Ajax処理はこんな感じ、

<script>
//Ajax
$(document).ready(function(){
$('.fancybox').click(function(e) {
if (e.preventDefault) {
e.preventDefault();
}else {
e.returnValue = false;
}
var uri = $(this).attr("href").split("#")[0];
var hash = "#"+$(this).attr("href").split("#")[1];
$.ajax({
url: uri,
dataType: 'html',
cache: true,
success: function(html){
var $content = $(html).find(hash);
$.fancybox({'content':$content});
}
})
return false;
});
});
</script>

archive.htmlの#archive-comtents内のコンテンツを表示します。

<a class='fancybox' href="archive.html#archive-comtents">アーカイブ</a>

archive.htmlはこんな感じ、なぜかarchive-comtentsを囲う要素がないと呼び出せないのですが、原因を理解できていません...。

<div id="archive">
<div id="archive-comtents">
<!-- 呼び出すコンテンツ--->
<!-- /#archive-comtents --></div>
<!-- /#archive --></div>

もう少し掘り下げて調べる必要がありそうですね...。

広告

ブログの維持費に充てるでございます・・・。