jquery-slideshow をgithubに上げた
今作っているスライドサイトは、スライドショーページがJSベタ書きでよろしくなかった。
そんなわけで、一定の形式のHTMLファイルであれば、少ない設定でスライドショーをうごかすことができるようにするのが目的。
ぶっちゃけslideShowLiteとかすればよかったと思わなくもない。実際Liteやし。
↓がそのソース
https://github.com/rymizuki/juqery-slideShow
手抜きなのはいつもどおり。サイトがきちんとした暁にはちゃんと書く。
そもそもjavascriptはいまいちよくわかってない節があり、Pluginを書いたとはいえ、正しく理解して構築したわけじゃない。
だからちゃんと勉強するべき。というTODOを残しつつ、まあとりあえず動くのでよしとしよう。
README
ここで書くのか。ちゃんとソースと一緒に書けよ。
例によってまず、プラグインをロードしますん。
<link rel="stylesheet" href="/css/slideshow/default.css" /> <script type="text/javascript" src="/js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="/js/slideshow/jquery.slideshow.js"></script>
本体は、/slideshow/jquery.slideshow.js にある。
また、スライド用の簡易的なデザインを当てるために、"/css/slideshow/default.css"をロードしている。
そんでもって、どうやってスライドに当てるのかというと、こんな感じ。
<script type="text/javascript"> $(function(){ var sl = $.slideShow({ section_tag: 'section', title_tag : ':not(article)', content_tag: 'article', }); // controller $(window) .slideControllerKeys({mode:'next', keys:[13, 39, 78]}) .slideControllerKeys({mode:'back', keys:[37, 66, 80]}); $('#controller > #next').slideControllerButton({mode:'next'}); $('#controller > #back').slideControllerButton({mode:'back'}); }); </script>
まず、$.slideShow() でページの初期化を行なっている。指定しているのは
- コンテンツセクションのタグ
- タイトルエリアのタグ
- スライド１枚を示す範囲のタグ
コレに対して、jquery-selecteorで要素を取得してくるのねん。
期待しているHTMLは以下のようなもの。
<section class="level-1"> <h3>HTML5について</h3> <dl> <dt>のらねこの気まま暮らし</dt> <dd>in Hatena Blog</dd> <dt>氏名</dt> <dd>rymizuki(@mizuki_r)</dd> </dl> <article class="level-2"> <h4>アジェンダ</h4> <ol> <li>最初に</li> <li>こんな問題がある</li> <li>そこで私はこう考える</li> <li>こうすればみんな幸せ</li> </ol> </article> <article class="level-2"> <h4>ここがタイトル</h4> <p>ここに、<br /> コンテンツ本文とか</p> </article> <article class="level-2"> <h4></h4> <p>タイトル無しもできるんだな</p> </article> </section>
なんでこんなHTMLなのかというと、それはTextXatenaを使ってはてな記法から変換したからです。
その中の設定も少々特殊で、いかんせんちと面倒な感じになっています。
初期値をもうちょっとシンプルにできたらもっとすっきりするんだけど。いい方法はないかしら。
あ、そのうちText::Xasteについても書かなくてはですね。
