ASCII.jp：jQueryで作る画像ギャラリーのチュートリアル｜Web制作の現場で使えるjQuery UIデザイン入門
ページを遷移せずにサムネイルの一覧から画像を選んで拡大表示する「画像ギャラリー」は、jQueryを使えば比較的簡単に作れます。今回は、シンプルなデザインの画像ギャラリーの作成方法を紹介します。 画像ギャラリーの基本部分を作ってみよう 作成するのは、左側にサムネイル画像の一覧、右側にメイン画像を配置し、サムネイルをクリックするとメイン画像がページを遷移せずに切り替わる画像ギャラリー機能です。 はじめに、もっともシンプルな「サムネイルをクリックするとメイン画像が切り換わるページ」を作成します。 WebページのHTML／XHTML（以下HTML）とCSSは以下のようになっています。サムネイルの一覧部分はul／li要素でマークアップし、サムネイル画像はそれぞれ a要素で包みます。a要素のhref属性にはサムネイルに対応するメイン画像のURLを設定します。メイン画像は div#main内にimg要素
ポンクソフト
コンテンツ PHP入門 jQuery入門 Flash Flash(ActionScript)でゲーム作成入門 Flash(ActionScript)で様々なゲームを作ろう Flash(ActionScript)とPHPの連携入門 PHP（旧コンテンツ） PHPでファイルの読み書き・掲示板 PHPで日付・時刻の計算 PHPでアクセスカウンタ＆解析 PHPでGDを使ってみよう PHPとPostgreSQLの連携入門 Java （旧コンテンツ） Javaでシューティングゲームを作ろう Perl （旧コンテンツ） CGI(Perl)の基本と掲示板作成 C/C++ C/C++言語とDXライブラリでゲーム作成入門 （旧コンテンツ）C言語とelで様々なゲームを作ろう jQuery simple plugins ひとりごと、ふたりごと（ブログパーツ） オリジナルソフトウェア その他未分類なモノ iOSアプ
ASCII.jp：jQueryで作る画像ギャラリーのチュートリアル (1/3)｜Web制作の現場で使えるjQuery UIデザイン入門
※この記事は「Web制作の現場で使えるjQuery UIデザイン入門」の第13回です。過去の記事もご覧ください。 ページを遷移せずにサムネイルの一覧から画像を選んで拡大表示する「画像ギャラリー」は、jQueryを使えば比較的簡単に作れます。今回は、シンプルなデザインの画像ギャラリーの作成方法を紹介します。 今回制作するサンプル 「画像ギャラリー」の完成画面。左側のサムネイル画像をクリックすると、右側のメイン画像が切り換わる（画像クリックでサンプルページを表示します） 画像ギャラリーの基本部分を作ってみよう 作成するのは、左側にサムネイル画像の一覧、右側にメイン画像を配置し、サムネイルをクリックするとメイン画像がページを遷移せずに切り替わる画像ギャラリー機能です。 はじめに、もっともシンプルな「サムネイルをクリックするとメイン画像が切り換わるページ」を作成します。 WebページのHTML／X
10+ jQuery photo gallery and slider plugins
Introduction A picture is worth a thousand words. No doubt about it. Most of the information based website such as CNN, ESPN, they are all using a massive photo slide show on its front page. It's a very effective method to attract viewers' attention. So, here you go. 15 jQuery based photo gallery and sliders. Enjoy. TN3 Gallery TN3 Gallery | Demo TN3 Gallery is a full fledged HTML based customizab
JQueryでフォトギャラリーに効果を - [ Web-holic.com ]
[ javascript ] [ JQuery ] [ 挨拶 ] JQueryでフォトギャラリーに効果を 最近いろんなところでJavaScriptを使ったエフェクトが話題で、「JQuery」を勉強しようと思っている（基礎がないのに...） JQuryの良いところは、CSSに指定をするように、html上の要素に効果や処理の指定をできるところである。 んでもって今回は、フォトギャラリーの写真1枚1枚に順番に効果を加える感じの処理を考えてみた。 htmlはこんな感じ <div class="cont"> <div class="img"> <img src="http://www.web-holic.com/img/01/01.jpg" alt="sample1" /> </div> <div class="img"> <img src="http://www.web-holic.com/img
spaceforaname.com - このウェブサイトは販売用です！ - spaceforaname リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]HTML5, CSS3, jQueryを使用して実装する画像ギャラリー