Mar  14,  2008

jQueryを使ったスライドショー

jQueryを使ったスライドショーを作ってみました。
■スライドショー　サンプル


ソースを公開するので面白そうだと思った人はダウンロードして使ってみてください。
■ダウンロード


表示用とサムネール用の２つの画像を用意する必要がありますが、写真数の変更は基本的にHTMLの修正だけで動作します。

動作検証ブラウザは
Windows
　IE６,７
　FireFox 2.0
Mac
　FireFox2.0
　Safari3.0（たぶん２でも動きます）

CSSのoverflow:hiddenとposition:relativeのバグが解消できなかったためIEとそれ以外のブラウザでは画面構成とスライドショーの動作が異なりますのでご注意ください。


写真の枚数を変えるときはindex.htmlの「<!-- 編集領域　ここから --><!-- 編集領域　ここまで -->」となっている2ヶ所を変更してください。

-----画像表示部分-----
<div class="photo_caption" id="main1">
<img src="img/1.jpg" alt="image" width="512" height="384" class="photo" />
<div class="caption"><h2>プリンちゃん１</h2><p>トイプードルのプリンちゃん。椅子にすわる</p></div>
<div class="mouse_target"></div><!-- mouse_target -->
</div><!-- photo_text -->

-----サムネール部分-----
<div class="th_photos"><a href="#" id="p_id1"><img src="img/1_th.jpg" alt="image" width="64" height="48" class="photos" /></a></div><!-- th_photos -->


画像サイズは（とりあえず）固定でお願いします。
「画面表示部分」のid="main1"と「サムネール部分」のid="p_id1"の部分は連番になるので表示する画像の数に合わせて修正してください。
画像のファイル名は連番にしなくても大丈夫です。任意の名前を付けてください。画像を置く場所も好きな場所にできます。

このスライドショーはjQueryとプラグインのeasing pluginを使っています。
それぞれの詳しい情報は
▼jQuery
http://docs.jquery.com/Main_Page
▼easing plugin
http://gsgd.co.uk/sandbox/jquery/easing/
を見てください。

このスライドショーは改変、改修、再配布してもらって全然構いません。商用利用もOKです。
ボタン画像以外はHTMLとCSSで画面を作っているのでデザインやインターフェースの変更、表示画像サイズの変更もそんなに難しくないと思います。
index.jsがスライドショー本体になりますが、これも処理をだらだら書いているだけなのでjQueryの基本を理解していればそんなに難しくないし、すぐにソースのしょぼさに気付くと思います（恥）

////
写真表示の切り替え用に使っているクラスの付けたり外したりが一番面倒くさい処理になってます。addClass()、removeClass()じゃなくswapClass()みたいな関数があればいいのにと思うんですが。。。
////

サンプルで使っている画像はドッグウェアの「free stitch」から提供してもらいました。
どうもありがとうございます。

yamada ： 5:19 PM

Aug  21,  2007

ページ内リンクをスムーズにスクロールさせるJS

完全に自分メモですが。

簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3.00

jQueryを使ってるんですね。

ちなみに、MTに「InsertLink」というプラグインいれたので、
なんか書いてみてくなったので。
外部へのリンクが劇的にはりやすくなりました。
いちいちtarget="_blank"とか打たなくてもよい。
target指定が一発でできるので楽。
もっと早く入れてればよかったです。

Kawata ： 9:06 PM

Aug  20,  2007

MAC OS XのDockみたいなメニューをつくるJavascript

macdocjs.jpg

iFishEye

以前FlashでMacのDockの動きを再現するってのをエントリしましたが、
今度はJavascriptでこんなん見つけました。
意外と使えるかもしれませんね。
IE、Firefox、Opera、Safariで動くそうです。

ライセンスはMITです。

Kawata ： 6:24 AM

Aug  09,  2007

GoogleMapのタグを簡単につくれる

Google Mapsのタグをつくるのって意外と面倒。
でもってこんなサービスがあるよって教えてもらいました。
知らんかった！遅い？


Google Maps簡単作成ツール：GMapCreator


他にもいろいろ使えそうなGoogleMapのあれやあこれやが掲載されていたので、
メモっておきます。

Kawata ：12:54 AM

Jul  30,  2007

javascriptからFlashを操作する方法

使わないと忘れそうなのでメモです。
javascript側に下記の記述。

で、ボタン側に
onclick="swfl_gotofr(飛ばしたいフレーム)"
てな感じで記述。

詳しくはこちらで「Javascriptでムービーを制御する」

Kawata ： 4:43 AM

Jul  26,  2007

ブロック要素の高さを揃えるJS

これは便利。

CSSでコーディングする時に厄介なのが横並びにしたブロック要素の下のラインが揃わないこと。
テキストの文字数が固定できないとどうしてもガタガタになっちゃう。
それを解消してくれるのがこのライブラリだそうです。
先日のWeb標準の日々のセミナーのグループディスカッションから生まれたものだそうで、
こういうのがあるとセミナーをやった本当の意義がありますよね。素晴らしいことだと思います。


▼ブロックレベル要素の高さを揃えるheightLine.js
http://blog.webcreativepark.net/2007/07/26-010338.html


安定すれば今後このJSは実装が当たり前になりそうな気がします。
こんど使ってみよう。

yamada ：11:38 AM

Jul  23,  2007

swfobject.jsを使ってHTMLからswfに変数を渡す方法

以前、HTMLからswfに変数渡すのってどうすればいいのと
質問をされたので、
先日yamada君がFlashを呼び出すJSで書いていたswfobject.jsを使って
変数を渡すのをやってみました。簡単です。
HTMLからswfを渡す方法は2つあって、

○○○.swf?変数名=値と書く方法（サンプル1）と、


のようにFlashVarsを使って、
param name="FlashVars" value="変数名=値"のように書く方法（サンプル2）と
2つあります。
○○○.swf?変数名=値と書くのは昔のやり方なのかな。

続きはこちら

Kawata ： 3:51 AM

Jul  18,  2007

Web標準の日に行ってきました。その2　「DOMから始めるjavascriptモダンスクリプティングの基礎」編

4つのセッションしか受けなかったのですが、
かぶってたり、ちょっと書くのに調べたかったりするので、
先に最終日のfutomiの羽田野さんの講義に関して書いておきます。

いつもお世話になっている羽田野さんですが、
事前にこういうことも話をして欲しいとお願いしていたものも
追加で盛り込んでくれて、非常に参考になりました。
ライブラリを使って簡単にというのも、素敵なのですが、
こういった基礎をきちんと説明してくれるセミナーというのも
非常に貴重だなぁ〜と。

講義の後で、羽田野さんとごはん食べにいって、いろいろ聞けたし、
充実した2日間でした。
でも、さすがにちょっと、疲れた。。
さすがに半分徹夜明けの状態で、聴講はきついというのが身にしみて
わかった日でもありました。

■参加した講義
DOMから始めるjavascriptモダンスクリプティングの基礎
羽田野さん
futomi's cgi cafe


■内容
1.DOM
2.イベント
3.でしゃばるなJavaScript
4.コードは使い回せ


Kawata ： 4:20 AM

Jul  15,  2007

Web標準の日に行ってきました。その1　「jsライブラリで実装する効率的なWeb制作」編

台風がきている中、秋葉原まで「Web標準の日」を見にいってきました。 寝坊はするし、台風のせいで傘はぶっこわれるし、
さんざんでしたが、参加した講義は、なかなかおもしろいものでしたので、
まとめておきます。

■参加した講義
jsライブラリで実装する効率的なWeb制作
西畑一馬さん
西畑一馬さんのブログ


■内容
1、ライブラリの紹介
2、ライセンス形態の紹介（MTI、BSD、GPL、CC）
3、jsライブラリの使い方（実装方法、使用上の注意など）
4、jsライブラリの使い方（無名関数など）
5、グループワーク

続きは次ページで。

Kawata ： 7:36 PM

Jun  04,  2007

Flashを呼び出すJS

JavaScriptを使ってFlashを呼び出す方法というのはいくつかありますが、
どうやらこのやり方がよいみたいですね。

▼SWFObjectのドキュメントを日本語に翻訳してみたよ
http://www.trick7.com/blog/2006/06/15-135235.php

FlashPlayerを持っていない人用の代替コンテンツの表示や各パラメーターを渡すのも関数でできるようです。
近々使ってみます。

yamada ：11:53 AM

May  11,  2007

リキッドデザインで重宝するIEでmin-widthを使えるようにする方法

仕事で悩んでいるときに、教えてもらったところ、
非常に助かったので、みなさんにも。
リキッドデザインをCSSでコーディングしたとき、
困るのが、縮め過ぎると、レイアウトが崩れて意図しない形に
なってしまいます。
3段組が2段組になったりとか。。。

そんなとき、CSSのmax-withやmin-widthと回避できるわけですが、
残念なことにIE6では効かない！

というとき、このJSを使ってみると、一発解決！
素敵なライブラリです。


CSS minimum and maximum sizes

使い方は簡単！


という具合にJSを読み込んで、class:minmaxを指定するだけです。
便利です。


詳しい解説はこちら minmax.js - IEでCSSのmax-widthなどを使えるようにするライブラリ

Kawata ： 1:59 AM