画像をペラペラめくれるjQuery「Quick Flip」の設定方法

2021.12.4｜JavaScript（jQuery）

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

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

本記事の内容

画像をペラペラめくって表示させる設定方法
1.jQueryライブラリをダウンロード
2.htmlファイル内に記述
実装サンプル
まとめ

画像をペラペラめくって表示させる設定方法

1.jQueryライブラリをダウンロード

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

2.htmlファイル内に記述

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

htmlファイルに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>