スポンサーサイト

2014.01.27 Monday

一定期間更新がないため広告を表示しています

  • -
  • -
  • -

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

humberger
引数の内容は
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がどーやって活躍するのかいまひとつわかりません!
こんな感じのスクリプトには必要ないのでしょうか??
あるいは使うと効率やらメモリ消費やらがよくなったりするの?
仕事が終わらなくなるのであまり深く考えるのはやめよう。。。

ということで素人の、良いものではありませんが
よかったら試してみて下さい。

スポンサーサイト

2014.01.27 Monday

  • -
  • -
  • -

コメント
コメントする








   
この記事のトラックバックURL
トラックバック

calendar

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
293031    
<< October 2017 >>

profile

last entry:2013/06/10

selected entries

categories

archives

recent comment

search this site.

others