備忘録なので簡単な記事ですみません
ここからjQueryをいただいてきて
中のcssフォルダに入っているスタイルシートをjsフォルダに移動してから
jsフォルダをサーバーにアップ
http://leandrovieira.com/projects/jquery/lightbox/
HTMLの方はこの方法で
<head>の中にこれを入れる
────────────────────────────
<link rel="stylesheet" type="text/css" href="★/js/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="★/js/jquery.js"></script>
<script type="text/javascript" src="★/js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('a.lightbox').lightBox();
});
</script>
────────────────────────────
そして、リンクしたい画像にこのようにクラスをつける
<p><a href="../img/★_L.gif" class="lightbox"><img src="../img/★_S.gif" width="450" height="302" /></a></p>
────────────────────────────
特定の場所以下すべてのリンクをライトボックス表示にしたい場合
#album以下のリンクにすべてと.lightBoxというクラスをつけたリンクすべてがライトボックスになります
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('#album a').lightBox();
});
</script>
-------------------------------------------
リンクにクラスをつけた場合
<a href="photos/★.jpg" title="ここにキャプション"><img src="photos/s-★.jpg" width="267" height="200" /></a>
ID album以下のリンクすべて
<div id="album">
<a href="photos/★.jpg" title="ここにキャプション"><img src="photos/s-★.jpg" width="267" height="200" /></a>
</div>
────────────────────────────
0 件のコメント:
コメントを投稿