全画面を使用したクールなギャラリー「Full Page Image Gallery」をWordPressテーマ化した

スポンサーリンク

codropsのギャラリーが素敵だったので
WordPressのテーマにしてみました。
ライセンスは、個人でも商用でも利用可
で、コードも自由な利用を認めてくれて
いました。唯一、記事を丸ごとコピーし
ないで欲しい、との事。

そのライセンスはこちら

先日も話題になったパクリ記事問題です(僕の記事もやられてました→ttp://ameblo.jp/sfida2010/entry-10758747352.html)が、codropsは心の広いブロガーさんのようで好感をもてますね。こうありたいものです。リスペクトも兼ねて、ライセンスに従い、WordPressのテーマにしたので配布します。

FullPageImageGallery


このギャラリー(Full Page Image Gallery with jQuery)です。これをまんまテーマ化。


こんな感じでWPで管理できます。サムネイルの数は「表示設定」→「1ページに表示する最大投稿数」の数と同等になります。右上にページ送りがあります。ロゴは画像だったのでテキストにしました。

仕様と使い方

IE7はかろうじて動きます。IE6以外はたぶん大丈夫。動作なんかはcodropsにデモがあるのでそちらでご確認下さい。

ギャラリーなので通常通り記事を書いてもタイトルや記事内容はどこにも反映されません。記事ページでは1つの画像が表示されるだけです。single.phpはつくっていませんので、何かアイデアがあったら作ってみてください。


画像は

imageという名前でカスタムフィールドを作る。値に全画面に表示させる画像
thumb_imgという名前でカスタムフィールドを作る。値にサムネイル用画像(縦120px、幅90px)

という感じで呼び出します。これだけでギャラリーが作られていきます。どちらかが空白だとギャラリーは動作しませんのでご用心下さい。

今回のテーマのコード

まぁDLすればいいだけの話なんですが、シンプルなコードなので参考までに部分的に掲載します。functions.phpも使いませんでした。

元のマークアップはこれ。

<div id="outer_container">
				<div id="thumbScroller">
					<div class="container">
						<div class="content">
							<div><a href="#"><img src="images/thumbs/1.jpg" alt="images/1.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/thumbs/2.jpg" alt="images/2.jpg" class="thumb" /></a></div>
						</div>
					・
					・
					・

					</div>
				</div>
			</div>
			<div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs</div>
		</div>
        <div>
            <span class="reference">
                <a href="http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/">back to the Codrops tutorial</a>
				<a href="http://www.flickr.com/photos/markjsebastian/">Photos by Mark Sebastian</a>
            </span>
		</div> 

で、テーマ化したコード。

<div id="outer_container">
				<div id="thumbScroller">
					<div class="container">
	<?php if (have_posts()) : ?>
   	 <?php while (have_posts()) : the_post(); ?>
						<div class="content">
							<div><?php $image = get_post_meta($post->ID, 'image', true); ?>
<?php $thumb = get_post_meta($post->ID, 'thumb_img', true); ?>
<a href="#"><img src="<?php echo $image; ?>" alt="<?php echo $thumb; ?>" class="thumb" height="120" width="80" /></a></div>
						</div>
   <?php endwhile; ?>
	<?php else : ?>
 	   <h2>Not Found</h2>
	<?php endif; ?>
					</div>
				</div>
			</div>
			<div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs</div>
		</div>
        <div>
            <span class="reference">
                <?php next_posts_link(__('&laquo; Older Entries')) ?>
		<?php previous_posts_link(__('Newer Entries &raquo;')) ?>
            </span>
		</div>

ループにカスタムフィールドで画像URLを出力させただけ。見苦しいコードで申し訳ないです。

URL :
TRB :

Comments & Trackbacks (14)

  1. Mana

    これってカスタムフィールドをひとつにして
    サムネイル画像のサイズを管理ページから設定して

    $thumbnail_id = get_post_meta($post->ID, ‘カスタムフィールド名’, true);
    echo wp_get_attachment_image($thumbnail_id, ‘thumbnail’);

    で出力したらユーザー的に簡単かもです!

    • シロ

      コメントあざすwそれも考えたんですが、強制的にサムネと同じ画像になるのがちょっと気になったんで一応ユーザー側で選べるように分けたんですよね・・よかったら改造してみてくだしあ

      • Mana

        なるほど!クロップなども全部自動ですもんね。
        グラフィックツールを持っていない、画像のサイズ変更ができないようなユーザーが対象であれば一緒にしちゃったほうがいいかもしれませんね!
        まぁ作る側からすれば上記の作りが楽なんですよね…w

        • シロ

          そうなんですよねぇ・・でも最初はうんこさんと同じ考えだったんですよ。作る側が楽>まぁそうなっちゃいますよね、大抵はw


  2. 動作しません

    • シロ

      それは残念でしたね。

  3. acr0.

    初めまして。WEB初心者のacr0.と申します。
    WORDPRESS,SEO,CSSなど必ずといっていいほどこちらのサイトが検索結果に登場し、大変参考にさせていただいています。ギャラリー的なものを探していたので「FullPageImageGallery」テーマを有難く利用させていただきます。これからも参考にさせていただく機会が多いと思いますので、宜しくお願い致します。

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services