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





WordPressをゼロから勉強するならオンラインで完結するプログラミングスクールがおすすめ

ネットで調べてWordPressを勉強するのも良いのですが、最近のGoogleは調べたい結果が出てこないことが少なくありません
またようやくたどりついたとしても記載されている内容が古く、WordPressバージョンについていけず内容を適応したらエラーが出てしまってどん詰まりになってしまう…なんてことが起こります。

・WordPressの勉強に挫折してしまった・・
・WordPressやWebデザインを習得して、フリーランスとして働きたい
・自分のWordPressブログやサイトをもっとカスタマイズしてステップアップしたい
なんて思いがあるのであれば、 最短4週間で未経験からプロを育てるオンライン完結のプログラミングスクール「テックアカデミー」を利用してはいかがでしょうか?

テックアカデミーの良いところは専門の「 WordPressコース」が用意されている点です。

WordPressをカスタマイズしてオリジナルサイトを構築するという内容で、

・週2回のマンツーマンメンタリング ・毎日15時〜23時のチャットサポート ・回数無制限の課題レビュー
が付きます。

この「いつでもWordPressのプロに聞ける」というのが良くて、自分でググるって答えにたどり着けなくてもWordPressのプロに聞くことで、すんなり解決し時間の無駄を止められます。 解決策を探していて見つからないときほどモチベーションが下がるときはありません。

またWordPressをマスターして使えるようになると「副業」をする面でもメリットがあります。
クラウドワークスなどのネットで受注できる仕事にはWordPressをつかった案件が多数あります。
簡単なものですと記事制作からWordPress自体のカスタマイズまで様々。

いまの収入以外に副業として収入源が欲しい!!なんて場合にもWordPressの需要はまだまだ引っ張りだこです。

テックアカデミーではこのWordPressコースを受ける前に 「無料の説明会動画視聴」「無料キャリアカウンセリング」があります。

いまいちどんな講座なのかイメージできない場合には、講座申し込みをすぐにせず一呼吸おいて
必ずこの説明会動画を見て、無料カウンセリングを受けてください。
説明会動画を見て無料カウンセリングを受けてやっぱりオンラインレッスンをやめるというのも全然有りな選択ですから。

WordPressコース講座の無料説明会動画はこちらから >>

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

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

スポンサードリンク

-WordPress, カスタマイズ
-,

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