jQueryの理解を深めようと
いつもながらほかにいくらでもありますが、 勉強がてら超シンプルな
へぼいLightbox風スライドショー?のプラグインを作ってみました。
jquery.ts.js
jquery.ts.css
こんな感じで動きます
まずjQueryは下記のような形でグーグルのAPIを利用しても読み込むことができます。
ダウンロードとかしてこなくていいからお勧めです。
jquery.ts.css このスタイルシートと、
jquery.ts.js このスクリプトを保存して、
サーバーにUPして読み込みます。下記はhtmlファイルと同じフォルダに置いた場合です。
ちなみにスクリプトはjQueryの後に読み込みます。
<link rel="stylesheet" href="jquery.ts.css" type="text/css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
<script type="text/javascript" src="jquery.ts.js"></script>
head内などまぁどこでもいいですがjQueryとスクリプトを読み込んだ後に下のコードを記述します。
<script type="text/javascript">
$(function() {
$('a[rel^="ts"]').ts();
});
</script>
//引数(オプション)はこんな感じにデフォルトでセットされてます↓
<script type="text/javascript">
$(function() {
$('a[rel^="ts"]').ts({borderW: 20,underH: 50,speed: 500,type: 2,auto: false, timer: 6000});
});
</script>
呼び出す画像はLightbox風に以下な感じで、aタグのrel属性に"ts"をセットします。 tsの後ろに[]で任意の名前を付けるとグループ分けしてスライドも可能です。
<a href="images/img1.jpg" rel="ts" title="画像1">画像1</a>
<a href="images/img2.jpg" rel="ts[group1]" title="画像2">画像2</a>
<a href="images/img3.jpg" rel="ts[group1]" title="画像3">画像3</a>
DEMO
GROUP
SINGLE
引数の内容は
borderW→確か画像周りの縁の太さ
underH→マウスオーバーで出る下の部分の高さ
speed→アニメーションスピード
type→アニメーションタイプ(1か2か3だけです)
auto→グループ画像の自動スライド(true 又は false)
timer→自動スライドの間隔
です。
古いIEでも一応動きそうです。それとiPhoneも崩れなそうです。でもiPhoneだけです。
画像など使ってないので、jqueryとjquery.ts.jsとjquery.ts.cssを読み込んで
後は $('a[rel^="ts"]').ts();を呼び出すだけでOK!簡単、単純!
アンカータグのrel属性にtsをセットすればOK!
tsの後ろに[group1]など任意にグループ作成ができます。
アンカーのtitle属性にセットした値がマウスオーバーの際下に表示されます。
画像のパスとかよくわからないとかそういう方にはお手軽かもしれません!
そもそも
ajaxを勉強しようと思ってはじめたのがきっかけでしたが脱線しまして、、、
jQueryの構造やprototypeなどを少し理解したいと思いましたが、やはり意味不明です。
意味不明ですがなんとか動かすことができてしまうからjQueryは凄いなぁ。。
いまだprototypeがどーやって活躍するのかいまひとつわかりません!
こんな感じのスクリプトには必要ないのでしょうか??
あるいは使うと効率やらメモリ消費やらがよくなったりするの?
仕事が終わらなくなるのであまり深く考えるのはやめよう。。。
ということで素人の、良いものではありませんが
よかったら試してみて下さい。