jQueryを使用したスライドショー GalleryView

概要

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の読み込みを記述
パスは設置場所により変える。

<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>

bodyタグ任意の場所に記述

<script type="text/javascript">
   $(document).ready(function(){
$('#gallery').galleryView({
	//option設定 Galleryの設定をここで指定できる。指定しないとデフォルト値
	panel_width: 800,
	panel_height: 300,
	frame_width: 100,
	frame_height: 100
});
</script>

WordPressで使う場合

<script type="text/javascript">
jQuery(function(){
jQuery('#gallery').galleryView({
	//option設定 Galleryの設定をここで指定できる。指定しないとデフォルト値
	panel_width: 800,
	panel_height: 300,
	frame_width: 100,
	frame_height: 100
});
});
</script>

html

<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>

Sample






参照URL
・本家URL
GalleryView: A jQuery Content Gallery Plugin — Space for a Name

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>