jquery

jqueryを使っていろいろ試してみた
jqueryのプラグインを使ったサンプルと使い方を説明しています

tocMakerツリー式のサンプル

tocMakerプラグインを使って以下のようなツリー式メニューを作ることができます
jquery.jsは必要ないです

プラグインのダウンロードと設定の仕方

lightboxの使い方

jquery-lightbox-0.5.zip

(1)jQuery lightBox pluginからjquery-lightbox-0.5.zipをダウンロードする
jQuery lightBox plugin

(2)jquery-lightbox-0.5.zipを解凍する

(3)解凍するとindex.htmがあるので、ブラウザを起動してindex.htmを開いてみる

(4)index.htmに書かれてあるソースを見てjavascript部分を自分のhtmlファイルにコピーする

(5)jquery.jsを自分のフォルダへコピーする

(6)jquery.lightbox-0.5.jsを自分のフォルダへコピーする

(7)jquery.lightbox-0.5.cssを自分のフォルダへコピーする

このlightboxを使ったサンプルを見る

jqGalViewllの使い方

jqGalViewII.1.0.zip

(1)jQuery jqgalviewii pluginからjqGalViewII.1.0.zipをダウンロードする
jQuery jqgalviewii plugin

(2)jqGalViewII.1.0.zipを解凍する

(3)解凍するとjqgalviewiidemo.htmがあるので、ブラウザを起動してjqgalviewiidemo.htmを開いてみる

(4)jqgalviewiidemo.htmに書かれてあるソースを見てjavascript部分を自分のhtmlファイルにコピーする

(5)jquery.jsを自分のフォルダへコピーする

(6)jqGalViewII.pack.jsを自分のフォルダへコピーする

(7)jqGalViewII.cssを自分のフォルダへコピーする

このjqGalViewllを使ったサンプルを見る

galleriaの使い方

jquery.galleria.js

(1)jQuery galleria pluginからjquery.galleria.jsとgalleria.cssをダウンロードする
jQuery galleria plugin

(2)demo_02に書かれてあるソースを見てjavascript部分を自分のhtmlファイルにコピーする

(3)jquery.jsを自分のフォルダへコピーする (jqueryのダウンロード参照)

(4)jquery.galleria.jsを自分のフォルダへコピーする

(5)galleria.cssを自分のフォルダへコピーする

このgalleriaを使ったサンプルを見る

tocMakerの使い方

toc-maker.zip

(1)jQuery toc_maker pluginからtoc-maker.zipをダウンロードする
jQuery toc_maker plugin

(2)toc-maker.zipを解凍する

(3)解凍するとtoc-maker.htmlがあるので、ブラウザを起動してtoc-maker.htmlを開いてみる

(4)toc-maker.htmlに書かれてあるソースを見てjavascript部分を自分のhtmlファイルにコピーする。tocStyle = 1 にする

(5)dhtmlgoodies_tree.jsを自分のフォルダへコピーする

(6)slidemenu.jsを自分のフォルダへコピーする

(7)toc_maker.jsを自分のフォルダへコピーする

(8)dhtmlgoodies_tree.cssを自分のフォルダへコピーする

(9)slide_menu.cssを自分のフォルダへコピーする

zoomiの使い方

zoomi.js

(1)jQuery zoomi pluginからzoomi.jsをダウンロードする
jQuery zoomi plugin

(2)jquery.jsを自分のフォルダへコピーする (jqueryのダウンロード参照)

(3)zoomi.jsを自分のフォルダへコピーする

このzoomiを使ったサンプルを見る

thickboxの使い方

thickbox.js

(1)jQuery thickbox pluginからthickbox.jsとthickbox.cssとloadingAnimation.gifをダウンロードする
jQuery thickbox plugin

(2)jquery.jsを自分のフォルダへコピーする (jqueryのダウンロード参照)

(3)thickbox.jsを自分のフォルダへコピーする

(4)thickbox.cssを自分のフォルダへコピーする

(5)loadingAnimation.gifを自分のフォルダへコピーする

このthickboxを使ったサンプルを見る