jQueryを使って画像スクロール、クリック後画像の切り替えをする
- Category
- : Javascript

以前紹介した画像をスクロールさせる jquery.scrollable.jsのjquery.scrollable.jsとJavaScriptを使って画像の切り替え&LightBox使用で使ったスプリクトを使って、並んでる画像はスクロール、それをクリックしたら画像を切り替える画像ギャラリーを作ってみました。
(2008/11/21 15:52 PM)

以前紹介した画像をスクロールさせる jquery.scrollable.jsのjquery.scrollable.jsとJavaScriptを使って画像の切り替え&LightBox使用で使ったスプリクトを使って、並んでる画像はスクロール、それをクリックしたら画像を切り替える画像ギャラリーを作ってみました。
(2008/11/21 15:52 PM)

「Animated JavaScript Accordion V2」で配布。紹介されているスプリクトなんですが、容量も少なく、アコーディオンメニュー開閉の動作もスムーズのなので使い方や注意点などを紹介しておきたいと思います。
Animated JavaScript Accordion V2
(2008/11/19 14:20 PM)

JavaScript Table Sorterで配布。紹介されているスプリクトなんですが、容量も少なく、設置も簡単なのでテーブルをソートさせたいと思っている方は是非使ってみて下さい。
※jQueryやPrototypeなど他のスクリプトは必要ありません。
(2008/11/10 10:38 AM)

今回ご紹介するTooltipsとはCreate simple tooltips with CSS and jQuery - Part 2: Smart Tooltipsでご紹介されています。
使い方が分からないよ><って人の為に使い方や少しいじる程度の解説でもしておきます。
(2008/11/05 00:37 AM)

CSSのの中に「min-width」「min-height」「max-width」「max-height」と言うプロパティがあるのですが、IE6ではそのままでは使えないので知らない人もいると思うですが、これがけっこう使えるんですよね。
サイト全体の横幅をpx指定せずに、%やaoutなどを使ってブラウザのサイズに合わせて可変するようなサイトを見かけるんですが、この時にmin-widthとかを指定しておくとブラウザのサイズが小さくなっても表示が変にならないようになるんですよ。
まぁーそんなわけでIE6でも実装出来る方法を解説しておきます。
(2008/10/22 13:23 PM)

jquery.scrollable.jsは、さまざまなコンテンツを画面内の特定の領域でスクロールさせるプラグインです。
Scroll your HTML with jquery.scrollable.jsで使い方など紹介はされているのですが、英文って事もあり直ぐに使い方が分からないかったので、自分の方でも解説をしておきたいと思います。
(2008/10/14 13:15 PM)

どういう仕組みかと言うと上記画像の用にグループ 1のラジオボタンを選択するとグループ 1のみ表示され、グループ 2を選択するとグループ 2のみ表示されるって感じです。
言葉だけでは理解しにくいと思いますので、デモページをご覧下さい。
(2008/10/02 20:00 PM)

nyroModalはjQueryのプラグインです。
個人的に気に入っているので、お勧めWebサイトでも使っていますし、以前紹介したlightviewみたいにhtmlや他のメディアを表示したりもしてくれます。
本家サイトnyroModal :: jQuery Pluginは英語ですし、「使い方が分からない」って方の為に解説したいと思います。
(2008/10/01 10:50 AM)

ネタ元:JavaScriptを使ってクリック時に画像を入れ替える その3
自分の先輩でもあるチバのブログのチバコウタロウさんがクリック時に画像を入れ替えるいろんな方法を書いてくれていたので、それを生かしつつ拡大画像をクリックしたらLightBoxで表示するようにしてみました。
(2008/09/26 16:43 PM)

jQuery lightBox pluginは、LightBox 2のjQuery版です。
LightBox 2はPrototypeで動いているのですが、それをjQueryで動かせちゃうですよ。
自分はほとんどjQueryしか使わないので、LightBoxを使う時はこの方法で使用しています。
(2008/09/25 14:20 PM)