WordPressの使い方マニュアル 商業サイトからアフィリエイトサイトまでつくれるWordPressの使い方を学ぼう

WordPress攻略本

WordPress カスタマイズ

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

WordPress運営が楽になるおすすめのサーバーとテーマをご紹介

WordPressおすすめのサーバー・テーマ

スポンサードリンク

-WordPress, カスタマイズ
-,

Copyright© WordPress攻略本 , 2019 All Rights Reserved.