WEBデザインテクニック|KLUTCHE

【jQuery】iPhoneに最適!フリックでスライドする写真ギャラリーを簡単に作成するプラグイン

iPhone向けのサイトで画像ギャラリーを設置したいならこのプラグインを使うととてもお手軽です!


jCarousel.min.js

こちらで紹介されているjavascriptを使用します。

くらげだらけ

HTML

jQueryのプラグインなので、headで2つのjavascriptを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jCarousel.min.js"></script>

あとは、スライドさせたい画像をリスト要素にして、jCarouselというクラス名を付けるだけです!

<ul class="jCarousel">
<li><img src="01.jpg" width="240" height="320" alt="01"></li>
<li><img src="02.jpg" width="240" height="320" alt="02"></li>
<li><img src="03.jpg" width="240" height="320" alt="03"></li>
<li><img src="04.jpg" width="240" height="320" alt="04"></li>
</ul>

デモ

こんな感じです。

IE8以下ではみれません!あしからず!

簡単!

このようなプラグインはたくさんありますが、javascriptを設置するだけで、ほぼ何もしなくていい所が良いです。CSSを1行も書く必要がありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です