Featherlight.jsでhtmlを読み込んでみる。
2014年10月3日
軽めなlightbox系プラグインを探してたら、Featherlight.jsってのがあったんで試してみました。
Featherlight – The ultra slim jQuery lightbox.
<html>
<head>
<link href="/css/featherlight.css" rel="stylesheet">
</head>
<body>
<a href="/test.html" data-featherlight="ajax">test</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="/js/featherlight.js"></script>
</body>
</html>
jQueryのプラグインなんで、jqueryと、DLしたfeatherlight.jsと、featherlight.cssを読み込み。
あとは、開きたいページをhrefに指定して、data-featherlight=”ajax”プロパティを追加するだけ。
これだけで、LightBox風な感じで、/test.htmlが表示できます。
お手軽ー。
iframeで表示してるのかと思ったけど、html読み込んでページに埋め込んでるぽい。
ま、中で同じjsを再度読み込んだり、わざわざparent呼んだりしなくていいから操作もお手軽。