blogerでLightbox改めcolorbox

Lightboxが動かなくなっていた話。CDNで提供されていたhttpが参照できなくて、httpsでの提供もない。このLightboxはblogger用に改造されているようなので、一般に配布されているCDNのLightboxでは動かない。一旦放置。

で、じゃcolorboxはどうよって思って調べる。結果的には巧くいった。

jQueryのCoda Slider

Coda Slider 3、なんか寸足らずになってしまうのでデバッグ。

jquery.imagecrossfade.jp

jQueryを 1.7.x から 2.0.x に、jQueryUIを 1.8.xから 1.10.xにそれぞれ移行中。どちらも ver. 1.9からいろいろなメソッドやらプロパティやらが廃止・統合されている。プラグインとして利用しているスクリプトが動かなくなることが多く、大概は最新版でなんとかなるが、既にサポートされていないスクリプトがやっかい。

jqueryで簡易クロスフェード

サムネイルをクリックして画像をクロスフェードで切り替えるスクリプトを捜していたが、どれも設定が多くて面倒だったので簡単にできるものを自作。初めてjsで作ったかも。作ると言うほどの出来ではないが...。

jQuery UI Accordion で cookieを使った位置保存

Accorditonのオプションで navigation を trueにセットすれば、表示されている URLから勝手に選択状態(active)を変更してくれるが、それだけでは網羅できないこともある。navigationFilterというオプションでurlの解析などをすればいいんだろうけど、javascriptはとんと分からない。なので、最後の状態を cookieに保存しておくという方法にした。そのメモ。クッキーの管理は jquery.cookie.js で。

$('.selector' ).accordion({
 header: 'h3',
 active: $.cookie('cookiename'),
 change: function(e, ui) { $.cookie('cookiename', $(this).find("h3").index(ui.newHeader[0]), { path: '/' }); }
 });

実際はこの方法だとうまくいかない。cookieが最初は空だから active: の後がブランクになってエラーになる。空の時に 0を入れるようにすればいいんだが、なにせ javascriptはとんと分からない。 $.cookie('cookiename') ? $.cookie('cookiename') : 0 とか書けばいいのかな？
自分は、この部分はphpでやってしまった。

同じ jQuery UIの Tabsは cookieのオプションがあるんだから、accordionでも同じようにサポートしてくれればいいのに..なんて。

jquery tabs accordion

タブの中にそれぞれアコーディオンを配置したとき、最初に隠れている方のアコーディオン・ウィジェットの高さがちゃんと計算されないという問題。パラメータを変えたり、ロジックを追加したり、cssをいじってみたりとさんざん試してみたがしっくりする結果にならない。

で、表題のキーワードでググった３番目の結果に...

jquery ui accordions within tabs

全く同じ問題の質問があった。何のことはない、初期化の順番を変えるだけという....。答えをもらえば、なるほどと理解できる。これだけのために延べ２週間近く悩んでた。単純なというか基本的なキーワードの検索なのに、なんでやらなかったんだろうと。

MooFlowのメモ、つづき

前回の投稿は間違い

95枚以上で表示が乱れる問題は解決。captionの z-indexが 99とかになってたため、写真が増えるとその数値を超える z-indexになってしまうので重なりがおかしくなるようだ。

.mf div.caption {
z-index:10000;
}

とかにすればOKでした。

MooFlowのメモ

カバーフローのように表示できる MooToolsを使った JavaScript、MooFlowのメモ

写真の数が増えたときにどの程度の速度で動くのかを知りたくて実験したところ、100枚程度を超えると表示が乱れることが判明。reflection (鏡面反射)の部分がタイトルやコントロール部分の上側になってしまう。では具体的にどこから表示がおかしくなるのかを調べた。