前の記事 ≪:2009年3月23日 管理人のブックマーク
次の記事 ≫:タイポグラフィに使える20の便利ツール集

訪問者驚きの手めくり風、画像ギャラリー作成サンプル

2009年03月24日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

Create a unique Gallery by using z-index and jQuery | This Blog Use jQuery

訪問者驚きの手めくり風、画像ギャラリーを作成できるサンプル。
以下がデモで、実際に試してみましょう。驚きの効果が得られるはずです。


HTML定義部分。分かりやすいコードも魅力です。

<!-- relevant for the tutorial - start -->
<div class="grid_6 prefix_1 suffix_1" id="gallery">
<div id="pictures"> <!--画像の定義部分-->
    <img src="images/picture1.png" alt="" />
    <img src="images/picture2.png" alt="" />
    <img src="images/picture3.png" alt="" />
    <img src="images/picture4.png" alt="" />
    <img src="images/picture5.png" alt="" />
</div>

<div class="grid_3 alpha" id="prev"> <!--ページ送りのリンク部分-->
<a href="#previous">« Previous Picture</a> </div> <!--前へリンク-->
<div class="grid_3 omega" id="next"> <a href="#next">Next Picture »</a> </div><!--次へリンク-->

</div><!-- relevant for the tutorial - end -->

またまた、jQueryベースのプログラムです。
JavaScriptのプログラム自体は40行ぐらいのもので学習にもよいかも。

紹介先サイトで、HTML、JavaScript、CSSの定義方法について触れられているので、参考にしてもよいですね。

関連エントリ

関連の記事検索:jQuery, JavaScript, Ajax, スライドショー, Web制作, Webデザイン
スポンサード リンク

By.KJ : 2009年03月24日 07:03 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)