Webデザイナーブログから学ぶホームページ制作

ホームページの画像をクリックしたときに、jQueryライブラリを使うことによって、画像がペラペラめくれて表示をすることができます。
画像アクションやインパクトに飽きてしまった方にはお勧めです。

画像をペラペラめくって表示させるjQueryプラグイン「Quick Flip Plugin」の設定方法を解説します。

下記からJavaScriptライブラリ、のダウンロードを行ってください。
jQueryライブラリダウンロード
Quick Flip jQuery Pluginダウンロード

「JavaScript」ファイルへのディレクトリをメタタグに記述します。

<meta charset="UTF-8">
<title>画像をペラペラめくれる「Quick Flip」の設定方法｜Webデザイナーブログ</title>
<meta name="description" content="jQueryを使った画像をペラペラめくれるjQuery「quickFlip」のご紹介を致します。">
<meta name="keywords" content="WEBデザイナー,ホームページ作成方法,画像,jquery.quickflip.source.js,ペラペラ,めくれる">
<meta name="robots" content="all">
<link rel="stylesheet" type="text/css" href="/sample/004/base.css" media="all" />
<script type="text/javascript" src="/sample/004/jquery.js"></script>
<script type="text/javascript" src="/sample/004/jquery.quickflip.source.js"></script>
<script type="text/javascript">
	$(function(){
		$('.quickFlip').quickFlip();
		$('.quickFlip2').quickFlip();
		$('.quickFlip3').quickFlip();
		$('.quickFlip4').quickFlip();
});
</script>

表パネルと裏パネル用に2枚の画像を用意します。
※ここで画像を記載する際に画像コードの中に「class=”quickFlipCta”」を記述。
※ヘッダーに記述してるjavascriptコードと同じクラス名を記述。

<div class="quickFlip">
<div class="blackPanel">
<a href="#" class="quickFlipCta"><img src="/sample/004/img/topics01.jpg" alt="WEBデザイナー" width="248" height="340" /></a>
</div>
<div class="redPanel">
<a href="#" class="quickFlipCta"><img src="/sample/004/img/topics01_down.jpg" alt="WEBデザイナー" width="248" height="340" /></a>
</div>
</div>

<div class="quickFlip2">
<div class="blackPanel">
<a href="#" class="quickFlipCta"><img src="/sample/004/img/topics02.jpg" alt="WEBデザイナー" width="248" height="340" /></a>
</div>
<div class="redPanel">
<a href="#" class="quickFlipCta"><img src="/sample/004/img/topics02_down.jpg" alt="WEBデザイナー" width="248" height="340" /></a>
</div>
</div>

<div class="quickFlip3">
<div class="blackPanel">
<a href="#" class="quickFlipCta"><img src="/sample/004/img/topics03.jpg" alt="WEBデザイナー" width="248" height="340" /></a>
</div>
<div class="redPanel">
<a href="#" class="quickFlipCta"><img src="/sample/004/img/topics03_down.jpg" alt="WEBデザイナー" width="248" height="340" /></a>
</div>
</div>

<div class="quickFlip4">
<div class="blackPanel">
<a href="#" class="quickFlipCta"><img src="/sample/004/img/topics04.jpg" alt="WEBデザイナー" width="248" height="340" /></a>
</div>
<div class="redPanel">
<a href="#" class="quickFlipCta"><img src="/sample/004/img/topics04_down.jpg" alt="WEBデザイナー" width="248" height="340" /></a>
</div>
</div>

実装サンプルを作りましたのでこちらでも確認してみてください。
QuickFlip jQuery デモ

以上で設定完了となりますが、簡単に設定ができますね。
ここでご紹介した「Quick Flip jQuery Plugin」はあまり使われているWebサイトが少ないので使ってみても良いかと思います。
画像アクションを表現するプラグインは沢山ありますので、色んなプラグインを試してみるのも良いですね。