jQueryポートフォリオギャラリー。ポートフォリオを作成するためのプラグイン。「プロジェクトを提案する」ページの実装

ドミトリー・セミョノフ著
jQuery イメージギャラリーおよびコンテンツスライダープラグインです。完全に応答性が高く、タッチフレンドリーで、ファイルサイズとパフォーマンスを最適化するために必要な機能のみを含めることができるモジュール式アーキテクチャを備えています。

by アンディ – コーヒースクリプター
高度にカスタマイズ可能な jQuery 用のギャラリー/ショーケースプラグイン。

トレント著
Galleriffic は、帯域幅を節約しながら大量の写真を処理するように最適化された、リッチでポストバックのないエクスペリエンスを提供する jQuery プラグインです。

トニックギャラリー - jQuery XML ポートフォリオギャラリー | 6ドル

by あいの
Galleria は、jQuery ライブラリ上に構築された JavaScript イメージギャラリーフレームワークです。目的は、Web およびモバイルデバイス用のプロフェッショナルな画像ギャラリーを作成するプロセスを簡素化することです。

アーティスト: CatchMyFame
先日、jQuery を使用してページ上の一連の画像間をフェードアウトする簡単な方法を探しました。そこで、プログラマーである私は、独自のプラグインを作成することにしました。

トーマス・カーン著
Smooth Div Scroll は、コンテンツを左右に水平にスクロールする jQuery プラグインです。 jQuery 用に作成された他の多くのスクロールプラグインとは別に、Smooth Div Scroll はスクロールを個別のステップに制限しません。

ビクター・ザンブラーノ著 – frwrd.net
Minishowcase は、AJAX を利用した小さくてシンプルな php/javascript オンラインフォトギャラリーで、複雑なデータベースやコーディングを必要とせずにオンラインで画像を簡単に表示できるため、数分で稼働中のギャラリーを作成できます。

カスパー・ダヴィッド・フリードリヒ著
EOGallery は、jQuery で作成された Web アニメーションスライドショーギャラリーです。基本的な jQuery 関数と Cody Lindley の Thickbox のみを使用して、大きな画像を表示します。

アルノー・パショー著
jQuery 用のマルチフォーマットカルーセル。写真、ビデオ (flv)、オーディオ (mp3) などの複数のメディアをサポートする、邪魔にならずアクセスしやすいポートフォリオです。この jQuery 用プラグインは、各メディアの拡張子を自動的に検出し、適応したプレーヤーを適用します。

ザウォール – メディアギャラリー – jQuery 搭載 | 5ドル

ステファン・ペトレ著
空間効果を備えた別のイメージギャラリープラグイン。非常に軽くてシンプルなプラグインです。

モレノ・ディ・ドメニコ著
jmFullWall は、印象的なポートフォリオを作成するための jQuery プラグインです。

ファブリツィオ・カルデラン著
Mosaiqy は、Opera 9 以降、Firefox 3.6 以降、Safari 3.2 以降、Chrome および IE7 以降で動作する写真の表示およびズーム用の jQuery プラグインです。写真は JSON/JSONP データ構造から取得され、グリッド内でランダムに移動されます。 CSS3 トランジションを使用する最近のブラウザでは、高価なアニメーションはすべて GPU によって引き継がれ、CPU オーバーヘッドが最小限に抑えられます。

コーディ著
次の jQuery プラグインは、一連の画像をいくつかのオプションを備えた小さなギャラリーに変換します。マイクロイメージギャラリーでは、画像のプレビューをサムネイルとして表示するグリッドビューと、1 つの画像のみを表示する単一ビューを切り替えることができます。

VION – jQuery イメージギャラリープラグイン | 7ドル

by マリフ
jQuery フレームワークといくつかの単純な CSS を使用して作成された、シンプルでありながらエレガントなフルスクリーンイメージギャラリー。

適切に構成され、視覚的にデザインされたもの (この場合は別のページ) は、専門的な活動で一定レベルのスキルを達成した専門家の個人 Web サイトまたはブログの重要な要素です。
ポートフォリオページは一種のレポート、または視覚的な概要であり、これを使用すると、写真、記事、出版物、デザイン要素など、最も成功した完成作品のセットを Web サイト/ブログの読者や訪問者に明確に示すことができます。、など。
私にはそのようなページはありません。私としては、これは迷惑な脱落であり、できるだけ早く修正する必要があるため、現在実際に取り組んでいます。
広大なグローバルネットワークでは、ポートフォリオを整理するための既製のページテンプレートが膨大に見つかり、そのようなページの多様性は実に印象的です。したがって、Web デザインと開発の複雑さをすべて掘り下げる必要がない人でも、いつでも自分に適したオプションを見つけることができます。ウェブサイト構築の知識が不足している人のために、アダプティブレイアウトの例、完成した作品をカテゴリーごとにフィルタリングしたシンプルなポートフォリオページ、で作成され、魅力的なトランジション効果で薄められ、アニメーション要素を備えたものを見ることを提案します。

ページレイアウト、実行可能な JavaScript、およびいくつかのデザイン要素は、素晴らしい Web デザイナー兼開発者の Kevin Liew (queness.com) によって作成されました。最適なソリューションを選択する際、私にとって重要だったのは、実装が簡単であること、jQuery プラグインの機能、最新のすべてのブラウザで正しく動作すること、インターネットサーフィンにさまざまなモバイルデバイスを使用する人気が高まっていることを考慮すると、プラグインの適応性であることです。未来のページのデザイン。派手なデザイナーの付加機能や重いプラグインは必要ありません。

基本的なレイアウトは、構築する必要がある 2 つの主要な UI 要素、送信された作品のカテゴリをフィルタリングするためのタブナビゲーション、およびキャプションが飛び出すホバー効果を備えたサムネイルグリッド自体で構成されます。
まず、最終的にすべてが機能するには、jQuery バージョン 1.7.0 以降が必要です。まだ接続していない場合は、タグの前に次の行を追加します。

MixItUp プラグインを起動し、上記のファイルの後に次のコードを挿入します。

< script type= "text/javascript" >$(function () ( var filterList = ( init: function () ( $("#portfoliolist" ) . mixitup(( targetSelector: ".portfolio" , filterSelector: ".filter" , エフェクト: [ "fade" ] , イージング: "snap" , // ホバーエフェクトを呼び出します onMixEnd: filterList. hoverEffect() ) ; ) , hoverEffect: function () ( $("#portfoliolist .portfolio" ) . hover( function () ( $(this) . find (".label" ) . stop() . animate((bottom: 0 ) , 200 , "easeOutQuad" ) ; $(this) . find("img" ) . stop() . animate(( top: - 30 ) , 500 , "easeOutQuad" ) ; ) , function () ( $(this) . find(".label" ) . stop() . animate((bottom: - 40 ) , 200 , "easeInQuad" ) ; $( this ) . find("img" ) . stop() . animate(( top: 0 ) , 300 , "easeOutQuad" ) ; ) ) ; ) ) ; filterList. init() ; ) ) ;

$(function () ( var filterList = ( init: function () ( $("#portfoliolist").mixitup(( targetSelector: ".portfolio", filterSelector: ".filter", エフェクト: ["fade"], イージング) : "snap", // ホバー効果を呼び出します onMixEnd: filterList.hoverEffect() )); ), hoverEffect: function () ( $("#portfoliolist .portfolio").hover(function () ( $(this). find(".label").stop().animate((下: 0), 200, "easeOutQuad"); $(this).find("img").stop().animate((上: -30 ), 500, "easeOutQuad"); ), function () ( $(this).find(".label").stop().animate((bottom: -40), 200, "easeInQuad"); $( this).find("img").stop().animate((top: 0), 300, "easeOutQuad"); )); ) ); filterList.init(); ));

すべてのプラグインオプションを個別に検討することに意味はありません。デフォルトのオプションが非常に最適です。そうですね、パラメーターを実験したい人は、できる限りのことをしてください。

ページレイアウトと要素の外観を形成するには、いくつかのファイルをドキュメントに接続します。 1 つは基本スタイル用で、たとえば、layout.css と呼びます。もう 1 つの小さな CSS ファイルは、normalize.css で、要素の標準設計におけるブラウザーの一貫性を確保します。

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

それでは、可能であれば不必要な水を使わずに、私たちの母国語で、忍耐強い言語で、アクセスしやすく理解できる方法で、すべてを順番に見てみましょう。

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >全て< li>< span class = "filter" data- filter= "app" >アプリケーション< li>< span class = "filter" data- filter= "card" >名刺< li>< span class = "filter" data- filter= "icon" >アイコン< li>< span class = "filter" data- filter= "logo" >ロゴ< li>< span class = "filter" data- filter= "web" >ウェブデザイン

全て
アプリケーション
名刺
アイコン
ロゴ
ウェブデザイン

ナビゲーションパネルには、カテゴリに分類された作品のリスト全体が表示されます。 data-filter 属性の値に従って、data-cat 属性を介して各ポートフォリオカテゴリを 1 つまたは別のナビゲーションバー項目に関連付ける必要があります。 data-filter の値を data-cat と一致させることで、ポートフォリオ項目がカテゴリー別にフィルターされます。
さらに、当面は非表示のサムネイルに、写真の上にマウスを置いたときにのみポップアップする、作品名とカテゴリのタイトルを記載した小さなパネルを追加します。 CSS でこの構造全体の外観を簡単に形成できるように、対応するクラスを要素に割り当てましょう。

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >ホスティングを始める。ル< span class = "text-category" >ロゴ< div class = "label-bg" > .........

Beget.Ru のホスティングロゴ.........

ユーザーがあなたのすべての作品を完全に見ることができるように、写真へのリンクを追加したり、署名に直接リンクを追加したりできることに注意してください。

CSS

さて、静かに、最も興味深い部分、ポートフォリオページとそのアダプティブバージョンのユーザーインターフェイスの一般的なスタイルを CSS で形成する部分に移りましょう。この記事では、基本的な (デフォルト) 値のみを示します。つまり、背景画像や接続されたフォントは含まれません。これらすべては、必要な人のために、デモで見ることができるか、ソースコードとともにアーカイブで見つけることができます。。

.container (position :relative ; width : 960px ; margin : 0 auto ; /* ブラウザウィンドウのサイズを変更すると、一連の遷移が表示されます */ -webkit-transition: all 1s easy; -moz-transition: all 1s イーズ; -o -transition: すべて 1 のイーズ; トランジション : すべて 1 のイーズ; ) #filters ( margin : 1% ; padding : 0 ; list-style : none ; ) #filters li ( float : left ; ) #filters li span ( display : block ; padding : 5px 20px ; text-decoration : none ; color : #666 ; /* テキストに少し影を追加します */ text-shadow : 1px 1px #FFFFFF ;cursor : pointer ; ) /* changeホバー時のカテゴリの背景 */ # filters li span: hover (background : #34B7CD ; text-shadow : 0 0 2px #004B7D ; color : #fff ; ) /* アクティブなカテゴリ項目の背景 */ #filters li spa. active (背景: rgb (62 , 151 , 221 ); テキストシャドウ: 0 0 2px #004B7D ; カラー: #fff ; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box ; -moz-box-sizing: ボーダーボックス ; -o-box-sizing: ボーダーボックス ; 幅: 23%; マージン: 1%; 表示: なし。フロート: 左; オーバーフロー: 非表示; ) .portfolio-wrapper (overflow : hidden ;position :relative ! important ; background : #666 ;cursor : pointer ; ) .portfolio img (max-width : 100% ;position :relative ; ) /* 署名はデフォルトで非表示になります * / .portfolio .label (位置 : 絶対 ; 幅 : 100% ; 高さ : 40px ; 最下部 : -40px ; ) .portfolio .label-bg (背景 : rgb (62 , 151 , 221 ) ; 幅 : 100% ; 高さ : 100 % ; 位置 : 絶対 ; 上 : 0 ; 左 : 0 ; ) .portfolio .label-text (色 : #fff ; 位置 : 相対 ; z-index : 500 ; パディング : 5px 8px ; ) .portfolio .text-category ( 表示 : ブロック ; フォントサイズ : 9px ; )

Container (position:relative; width: 960px; margin: 0 auto; /* ブラウザウィンドウのサイズを変更すると、遷移のチェーンが表示されます */ -webkit-transition: all 1s easy; -moz-transition: all 1s ease; -o- トランジション: すべて 1 イーズ; トランジション: すべて 1 イーズ; ) #filters ( margin:1%; padding:0; list-style:none; ) #filters li ( float:left; ) #filters li span ( display: block; padding:5px 20px; text-decoration:none; color:#666; /* テキストに少し影を追加します */ text-shadow: 1px 1px #FFFFFF;cursor: pointer; ) /* テキストを変更しますホバー時のカテゴリの背景 */ #filters li span:hover (background: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; ) /* アクティブなカテゴリ項目の背景 */ #filters li span.active (背景: rgb(62, 151, 221 ); テキストシャドウ: 0 0 2px #004B7D; カラー:#fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box; -moz-box-sizing : border-box; -o-box- sizing: border-box; width:23%; margin:1%; display:none; float:left; overflow:hidden; ) .portfolio-wrapper ( overflow:hidden; 位置: 相対 !重要; 背景: #666; カーソル:ポインタ; ) .portfolio img ( max-width:100%;position:relative; ) /* 署名はデフォルトで非表示になります */ .portfolio .label (position:Absolute; width: 100%; height:40px;bottom:-40px; ) .portfolio .label-bg (背景: rgb(62, 151, 221); 幅: 100%; 高さ:100%; 位置: 絶対; 上:0; 左:0; ) .portfolio .label-text ( color: # fff; 位置: 相対; z-index:500; パディング:5px 8px; ) .portfolio .text-category ( 表示:ブロック; フォントサイズ:9px; )

2 番目の部分では、同じスタイルシート内で、いくつかのメディアクエリを使用して、代替 CSS セクションを作成します。ページレイアウトがさまざまなモバイルデバイスの画面に正しく表示されるようにするために、さまざまな画面用の代替 CSS ルールもこれらのセクションに追加します。したがって、通常のブラウザ用に CSS テーブルに以前に設定されたルールを簡単にオーバーライドして、待望の適応性を実現できます。

/* タブレット */ @media のみの画面 and (min-width : 768px ) および (max-width : 959px ) ( .container ( width : 768px ; ) ) /* モバイル - 注: 幅 320px 用にデザインします*/ @media のみscreen and (max-width : 767px ) ( .container ( width : 95% ; ) #portfoliolist .portfolio ( width : 48% ; margin : 1% ; ) ) /* モバイル - 注: 幅 480px 用にデザインします */ @media画面のみと (min-width: 480px) と (max-width: 767px) (.container (width: 70%;))

/* タブレット */ @media のみの画面 and (min-width: 768px) and (max-width: 959px) ( .container ( width: 768px; ) ) /* モバイル - 注: 幅 320px 用にデザインします*/ @media のみscreen and (max-width: 767px) ( .container ( width: 95%; ) #portfoliolist .portfolio ( width:48%; margin:1%; ) ) /* モバイル - 注: 幅 480 ピクセル用のデザイン */ @media画面のみと (min-width: 480px) と (max-width: 767px) ( .container ( width: 70%; ) )

それだけです。「ポートフォリオ」という大きなタイトルが付いた素晴らしいページが完成しました。あとは、皆さんの同様に素晴らしく傑出した作品をページに埋め込んで、全世界に向けて展示するだけです。あなたはまだ、静かに、控えめに、自分自身を誇りに思うことができます。重要なことは、この問題でやりすぎないことです。
サンプルをもう一度見て、必要に応じてソースコードを取得し、静かな家庭環境で、ゆっくりと時間をかけてこの作業を完璧に仕上げることができます。

レッスンを作成する際には、次の資料が使用されました。著者が書きたての、オリジナルの、手付かずのポートフォリオページがそこにあります。

皆さん頑張って、残りの短い夏を楽しんでください！

1. jQueryギャラリーを使用したポートフォリオの実装

左の列にマウスカーソルを移動すると、プロジェクトのサムネイルがスクロールします。コンテンツ領域には、プロジェクト名、説明、使用されているテクノロジのリストを含む大きな画像が表示されます。サムネイル間を移動すると、プロジェクト情報が見事なアニメーション効果で相互に変化します。説明ページの画像をクリックするとjQueryアニメーションで拡大表示されます。ポートフォリオページ全体の驚くほどエレガントな外観にも注目したいと思います。デモを見てください。

2. CSSとjQueryを使ったポートフォリオサイトの超実装

写真家のポートフォリオ Web サイトの優れた実装。メニュー項目をクリックすると、画面上に散在する正方形から固定高さと幅のコンテンツを含む領域が組み立てられます。より多くの情報を固定領域に収めるために、コンテンツをスクロールできます。ポートフォリオの作品を表示する実装は珍しいもので、サムネイルをクリックすると背景画像として写真が表示され、ブラウザのウィンドウサイズを変更すると自動的に拡大・縮小されます。

3. jQueryを使ったポートフォリオウォール

オンラインポートフォリオ作成のためのオリジナルソリューション。プロジェクトブロック (サムネイルとリンク付きの短い説明) が複数連続して表示され、ブラウザウィンドウを変更すると、ブロックがアニメーション効果とともにページ上に均等に再配置されます。各プロジェクトには複数のサムネイル画像を含めることができ、サムネイル画像間の遷移は矢印を使用して実行されます。リンクをクリックすると、完全な説明が記載されたページが開きます。そのページでは、固定高さの半透明のブロック上にテキストがスクロールして配置されます。プロジェクトのスケーラブルな画像がページの背景として使用されます。クールですね - デモを見てください。

4. jQuery ページのスムーズなスクロール

縦横スクロールの実装。

5. jQueryプラグイン「Draggable Image Boxes Grid」

コンテンツブロックと画像で構成されるドラッグ可能なグリッド。グリッドはマウスを使用してドラッグできます (マウスのいずれかのボタンを押して、希望の方向にドラッグします)。サムネイルをクリックするとメイン画像が画面幅いっぱいに拡大されます。テキストが表示された暗いブロックをクリックすると、より詳細な説明が記載されたエリアが開きます。

6. 1 ページのポートフォリオ Web サイト

コンテンツがアニメーションで変化する 1 ページの Web サイト。デモページで、メニュータブを移動して効果を確認します。

7. ブロック表示タイプをjQueryに切り替える

この jQuery 「表示オプションの切り替え」プラグインを使用すると、ページにスイッチを実装できます。これにより、訪問者は情報の表形式表示からブロックの説明を含む完全なビューに切り替えることができます。ポートフォリオの導入に最適です。

8. jQueryギャラリーとGoogleマップを備えたレストランWebサイトのテンプレート

カフェWebサイト用に作成したオリジナルのjQueryソリューション。このテンプレートには、メニューから料理を表示するための興味深い jQuery ギャラリーが実装されています。ギャラリー内の画像は、ブラウザウィンドウのサイズに応じて拡大縮小されます。まず、ギャラリーには料理の名前と簡単な説明が記載されたサムネイル画像が表示されますが、フルサイズの写真は背景で暗く表示されます。矢印またはマウスホイールを使用して、利用可能な写真間を移動します。ギャラリーモードでマウスをクリックすると、説明付きのサムネイルが削除され、ウィンドウの幅全体に引き伸ばされた元の大きな画像を表示できるようになります。ギャラリーからサイトメニューに戻るには、右上隅のリンクをクリックします。シックな jQuery ギャラリーに加えて、Google の地図がテンプレートに非常に効果的に統合されています。

9. Plasm The Wallプラグイン

写真または HTML ブロックからユニークな「壁」を作成し、マウスを使用して画面上の固定領域内にドラッグできます。

10. 円の中に要素を表示するプラグイン

指定された直径の円に沿ってページ上のさまざまな要素を表示します。

11. プレースホルダーページ「開発中のサイト」

このページには、データベースに記録される電子メールアドレスを送信する機能があり、サイトの開設に関する通知を送信できます。このページは、jQuery プラグイン Nivo Slider v に基づいた小さなスライドショーでも装飾されています。 2.3.

12.QuickFlip 2プラグイン

これを利用すると、リンクをクリックしたときに名刺が回転するという興味深い効果を作成できます。

13. JQueryクリックマップ

アイデアは、ユーザーのクリックを追跡することです。デモページでプラグインの動作を確認するには、マウスをクリックして [分析] ボタンをクリックします。また、マウスでクリックした箇所が半透明の背景に表示されます。

優れたオンスクリーンキーボードの実装。何かの役に立つかわかりません。

15. jQuery付箋

ノートのシートの実装。テキストは編集でき、メモ自体を削除したり、画面上で移動したりできます。例を確認するには、デモページの「デモ」タブに移動してください。

16. jQuery の評価 17. HoverAttribute

興味深いリンクのデザイン: リンクの上にマウスを置くと、そのアンカーが変わります。かっこいいね。

18. 登録フォーム用の jQuery ファンシーキャプチャ

登録フォームのキャプチャの実装。プラグインは数値のセットであり、ドラッグして昇順に設定する必要があります。登録がロボットではなく実際の人間によって行われていることを確認する非常に興味深い方法です。

画面の下部にはボタンがあり、ページを上下にスムーズにスクロールすることができます。

20. 翻訳者。 jQueryプラグイン「jTextTranslate」

このプラグインは Google Language API を使用し、テキストを Google が提供する任意の言語に翻訳できます。翻訳するには、段落の横にあるアイコンをクリックし、ドロップダウンリストから翻訳先の言語を選択する必要があります。

21. ページナビゲーション用のjQueryプラグイン

ページナビゲーションのためのスクロールリンクの優れた実装。 jQueryを使用して実装されています。

22. jQueryプラグイン「Notes」

この jQuery プラグインを使用すると、Web サイトに「紙」のメモを実装できます。

23. jQueryプラグイン「Catch404」 24. jQueryプラグイン jBreadCrumb

アニメーションのパンくずリストナビゲーションチェーンを作成するためのプラグイン

25. 「リール」プラグイン 26. jQuery「ダンスフロア」プラグイン

商品ページを実装するためのjQueryプラグイン。商品画像をクリックすると商品説明が表示されます。

27. jQueryプラグイン「3Dラベルクラウド」 28. ボリュームCSSボタン 29. アニメーションによるページ水平スクロール

ページの垂直スクロールの jQuery 効果。 1 ページ Web サイトやポートフォリオ Web サイトの実装に最適です。エフェクトを表示するには、デモページのメニュー項目をクリックします。

30. jQueryプラグイン「Rating System」

何かの評価を実装するための jQuery エフェクト。円とその下のテキストの色は、マウスカーソルがどの円の上に置かれているかに応じて変わります。

31. jQueryパネルマジック

サイトナビゲーションを実装するプラグイン。この場合、サイトはドキュメントのグリッドとして表示され、興味深い jQuery 効果を使用してドキュメント間で遷移が行われます。

このプラグインを使用すると、小規模な Web サイトや Web アプリケーションを簡単に作成できます。ポートフォリオサイトなどでも見栄えが良くなります。

32. Mootoolsの読み込みインジケーター、「MoogressBar」プラグイン

効果的な荷重インジケーター。

33.Mootoolsプラグイン「CwComplete」

フィールドに入力するとき、プラグインは Ajax を使用して入力できるオプションを提案し、フィールドに既に入力されているテキストを満たすオプションのみをフィルターして表示します。

34. jQuery と CSS3 を使用した素晴らしい ajax チャット

会話を始める前に、訪問者はニックネームと電子メールアドレスを入力する必要があります。右側の列には、チャットにログインしている人の数が表示されます。使用されるテクノロジー: PHP、MySQL、jQuery、CSS。

35. 「プロジェクトを提案する」ページの実装

訪問者は新しい提案を追加したり、既存の提案に投票したりできます。視聴者がサイトについてどう思っているかを知りたい人にとっては、優れたソリューションです。このページを使用して、プロジェクトをさらに発展させるための新しいアイデアを蓄積することもできます。使用されるテクノロジー: PHP、MySQL、jQuery、CSS

36. PHPとjQueryを使った投票・投票の実装 37. Ajax「TinyEditor」を使った投票

現場でのアンケートを正確に実施します。使用されるテクノロジー: JQuery、Ajax、PHP、MySQL。

Web サイトに投票を実装するための非常に興味深いソリューションです。ブロックを上下にドラッグし、マウスで画像を掴むことで、ページ上に任意の順序で並べることができます。ブロックを高く残すほど、そのブロックの評価が高くなります。したがって、ブロックが一番下に配置された場合は、そのブロックが最も気に入らなかったことを意味します。ブロックを希望の順序で配置した後、投票が考慮されるように「投票を送信」ボタンをクリックする必要があります。結果ページには、投票結果と投票した訪問者数が表示されます。使用されるテクノロジー: CSS、PHP、MySQL、jQuery。

入力された情報の正確性を検証するシンプルな Ajax コメントシステム。コメントはデータベースに保存されます。 PHP、MySQL、CSS、jQuery を使用して実装されます。

40. ファイルダウンロード数のカウンター 41. PHPを使用したページの注意事項

使用されるテクノロジー: PHP、jQuery、CSS。

メニュー項目間を移動すると、ページを再ロードせずにコンテンツがロードされます。使用されるテクノロジー: PHP、jQuery、CSS。

43. Googleの技術を利用したjQueryサイト検索

Google AJAX Search APIを使用したサイト検索の実装。訪問者にサイトとインターネットの両方で検索する機会を提供できます。この場合、サイトページだけでなく、画像やマルチメディアファイルからも検索が可能です。

44. 画像に説明をオーバーレイする jQuery 効果

ポートフォリオの実装に使用できる非常に興味深い効果です。画像をクリックすると、背景が半透明になって暗くなり、注意すべき内容を説明するキャプションが表示されます。

45. jQueryを使用した質問と回答ページの実装

サイト上の FAQ ページの jQuery 実装。ページの上部に質問のリストが表示されます。質問をクリックすると、選択した質問までページがスムーズにスクロールし、アクティブな質問とその回答が別の色で強調表示されます。質問のリストに戻るリンクも、アクティブな回答フィールドに表示されます。

46. Ajax の Web サイト。ページを再読み込みせずにコンテンツが読み込まれる 47. jQuery を使用した背景とテキストの色の変更

マウスを上に置くと色が変わります。ランダムに色を変えることができます。

48. jQueryを使ったサイトガイド

この興味深いプラグインを使用すると、訪問者が初めてサイトを訪問する場合に、そのサイトの主な機能を紹介できます。ページが読み込まれると、サイトのツアーに参加するように求めるブロックが右上隅に表示されます。訪問者が初めてサイトを訪問する場合は、短いガイドを使用して主な機能に慣れることができます。この場合、ページは暗くなり、各ステップで必要なブロックがマークされます。訪問者が以前にあなたのサイトを訪れたことがある場合は、サイトのツアーを提供するウィンドウを閉じるだけで済みます。

49. Joyride Kit Web サイトのバーチャルツアー

このプラグインを使用すると、訪問者にページの主な機能を紹介できます。これは、要素の連続したポップアップ説明の形式で行われます。訪問者は、「次へ」ボタンをクリックしてすべてのヒントを表示するか、バツ印を使用してオンラインツアーを閉じることができます (このページに初めてアクセスしたわけではない場合)。

シール