概要
jQueryを使用したスライドギャラリー。
細かいオプションが指定できる
・本家サンプル
jQueryのサイトに移った模様
GalleryView | jQuery Plugins
2011/7/7 最新版はgalleryview 3.0-beta 1.1
Photo Gallery – Light Theme
Photo Gallery – Dark Theme
Your Daily Horoscope
Webcomics Roundup
Photo Gallery – More Customizations
Polaroid Gallery
Filmstrip Only w/ External Links
Panels Only – Lightbox Style Gallery
ソースダウンロードは下記URLからパッケージされたファイルがダウンロードできる
10/11/29現在最新版はgalleryview2.1.1
Releases for GalleryView | jQuery Plugins
詳しい使用方法はダウンロードしたファイルにREADME.txtがあるので読む（英語）
使用方法
基本的な使用方法はgalleryView()をコールする
headタグ内にcss,javascriptの読み込みを記述
パスは設置場所により変える。
[code language=”php”]
<link type="text/css" rel="stylesheet" href="galleryview.css" />
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.galleryview-2.1.1.js"></script>
<script type="text/javascript" src="jquery.galleryview-2.1.1-pack.js"></script>
<script type="text/javascript" src="jquery.timers-1.2.js"></script>
[/code]
bodyタグ任意の場所に記述
[code language=”php”]
<script type="text/javascript">
$(document).ready(function(){
$(‘#gallery’).galleryView({
//option設定 Galleryの設定をここで指定できる。指定しないとデフォルト値
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100
});
</script>
[/code]
WordPressで使う場合
[code language=”php”]
<script type="text/javascript">
jQuery(function(){
jQuery(‘#gallery’).galleryView({
//option設定 Galleryの設定をここで指定できる。指定しないとデフォルト値
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100
});
});
</script>
[/code]
html
[code language=”php”]
<h2>Basic slideshow (no captions/overlay/HTML content)</h2>
<ul id="gallery">
<li><img src="img/gallery2/01.jpg" alt="image1" title="a1" /></li>
<li><img src="img/gallery2/02.jpg" alt="image2" title="a2" /></li>
<li><img src="img/gallery2/03.jpg" alt="image3" title="a3" /></li>
<li><img src="img/gallery2/04.jpg" alt="image4" title="a4" /></li>
<li><img src="img/gallery2/05.jpg" alt="image4" title="a5" /></li>
</ul>
[/code]
Sample
-
$value ) {
// echo “$key => $value
“;
echo “
“;
}
?>
コメント