Movable Type 備忘録
Suckerfish HoverLightbox Redux
- Next Page: ブラウザの機能を取得するget_browserを使えるようにする
- Prev Page: Snap
こんにちわアル～(●´∀｀●)♪
わたしのトップページのサイドバーに左図のようなメニューを設置してみましたの。
カッコ良くない (＞∀＜ )!?
Lightbox+prototype.js+scriptaculous.jsという組み合わせで同じようなことがカンタンにできます。
Suckerfish HoverLightbox Redux
LightboxはこちらのサムネイルをLightbox JSで表示してみるでも紹介してますが、もうおなじみですね (￣∇￣)b
prototype.jsもわたしのサイトではすっかり定番カスタマイズとなってます。
でもね、prototype.jsとscriptaculous.jsがどこで使われているのかよく分かってないんですの。
たぶん、小っちゃいイメージ ⇒ 大っきいイメージのところ(エフェクトとして)で使われてるのかなぁ･･･と自分なりに想像してるのココロ。
サンプルが添付されてるので、特に説明することはないのですがチョビッと注意点など。
- Firefoxなどのモダンブラウザでは問題ないのですが、IE6.0で同じような表示をさせるには、以下のJavaScriptを必須でテンプレート内に追加することを忘れずに。
追加しないと、メニューにマウスカーソルを持っていってもメニューが表示されませんので。<!--[if lte IE 6]> <script type="text/javascript" src="http://●●●/js/navigation.js"></script> <![endif]--> - CSSもテンプレート内に追加するのですが、必ず既存のCSSより下に追加すること。たとえば、わたしのサイトだと以下のようになります。
青い字の部分が既に読み込んでいたCSSです。<link rel="stylesheet" href="<$MTBlogURL$>mt-memo/styles-bzbell.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="<$MTBlogArchiveURL$>rating/css/rating.css" /> <link rel="stylesheet" href="/redux/css/screen.css" type="text/css" media="screen,projection" /> <link rel="stylesheet" href="/redux/css/gallery.css" type="text/css" media="screen,projection" />
赤い字の部分が今回新たに読み込むよう追加した行になります。 基本的にCSSは最後に定義された属性が有効になるので、必ず上記のように既存のCSSの下に追加するようにします。
と、こんなところでしょうか。
prototype.jsなど、必要なスクリプトなどもいっしょに添付されているので、サンプルページ見ながらやればカンタンにできたアル。
Trackback Pings(0)
No trackbacks found.
Comments(2)
- #2: Posted by bzbell [RES]
>>1 oscar さん
こんにちわ^^
> prototypeもscript.aculo.usも、どっちかというとlightboxの為に必要なんじゃないですか？
> なんかCSSで、動かしてるように思えるんだけれど。違うのかな？いえ、わたしもそのように見えます （;￣∇￣A
どこでJSが使われてるかって、やっぱりLightboxでしか使ってないんですよね。Lightbox連携なしのCSSのみなら、以前Toolsカテゴリのイメージ表示で同じようなことやってたので興味わかなかったけど、Lightboxとの組み合わせということでTRYしてみました。
他の用途にも使えそう･･･と思いまして。
こんばんは
やっぱり、これに目を付けましたか。
良い感じですよね。ソース見るとえらく簡単で、なんであぁなるのか解んないんですよね。
prototypeもscript.aculo.usも、どっちかというとlightboxの為に必要なんじゃないですか？
なんかCSSで、動かしてるように思えるんだけれど。違うのかな？
私も試す予定です。
でも、bzbellさん、この部分にsnapは邪魔かも・・・