Commit Lab » javascript

slimboxのjQuery版がリリースされていた

しるべっと — Mon, 23 Feb 2009 05:59:54 +0000

LightBox風のjavascriptと言えばいろいろな種類がありますよね。
以前うちでもmediaboxとzoomifyで折込チラシや画像をリッチに見せる的なのをやりましたが、今ではもう個人や企業は問わず沢山のサイトで目にする演出です。

このブログもLightBox風のjavascriptが使えるように作ってます(面倒だからあんまり使ってないけど)。最初はLightBoxを使おうと思っていたのですが、やっぱりライセンス的にはもうちょっと緩い方がいいなと思い、lightboxのクローンであるslimboxを選択しました。当時はMooToolsだけだったと思うんだけど、MITの緩さがいいよね的なノリで。

だがしかし他のAjaxも使うとなると、使用するライブラリは出来るだけ統一した方がいいという事で、その後はjQueryのThickBoxを使うようになりました。

まぁそんなこんなで、先日はてブの整理がてらで久しぶりにslimboxのページを見てみると、なんとjQuery版がリリースされてるではないですか!

slimbox2.02
ライブラリ:jQuery
ライセンス:MIT

slimbox1.69
ライブラリ:MooTools
ライセンス:MIT

使うかどうかは置いといて試しておきたいと思います。

mediaboxとzoomifyで簡単に楽して画像をリッチに見せる

しるべっと — Wed, 21 May 2008 08:36:16 +0000

「手軽にネット上でチラシを配信したいんだけど…できればFlashを使った今風な感じで・・・」という相談を持ちかけられたのでお手軽な方法を考えてみた。忘れないうちにメモを。

今回はまずサンプルページをご覧ください。
mediabox&zoomifyサンプルページ

では下準備として今回Zoomifyで表示させたい画像を用意してください。今回は利用者にFlashでズームしながら画像を見てもらうわけなので、準備する画像もそこそこの解像度のものを選びましょう。ちなみにサンプルページの画像は2400ｘ1800ｐｘです。

用意をするのが面倒な方はサンプルで使用した変な画像をお使いください
sample.jpg – 2.08MB
つかえるもんならフリー素材として使っていただいて結構です。

さてサンプルページで使われているエフェクトですが、最近大企業のwebサイトでも見かけるようになったlightbox系のjavascriptです。今回は、画像はもちろんYouTubeやFlash・webサイト等を表示できるmediaboxを使いました。

まずはmediabox本体のjsをダウンロードします。
Mediabox

ダウンロードはページのちょうど真ん中くらいにあります。とりあえずscriptの三つを感謝しつつダウンロードします。そして次はそのしたのDependanciesから、Mediaboxを動かすのに必要な、Mootools javascriptライブラリをダウンロードします。
Mootoolsは必要な機能を自らチェックしてダウンロードする必要があるので、Mediaboxのサイトに書いてあるとおりにチェックを入れましょう。

これでMediaboxを使う準備は整ったのですが、swfを表示する場合はswfobject.jsが必要になってきます。なのでMootoolsへのリンクの下にあるSWFobjectのサイトへいきます。

すると開いたらすぐにDownloadへのリンクがあるのでそれを押してSWFObject 1.5.zipを頂きます。ダウンロードが終わったら解凍しましょう。今回利用するのはその中にあるswfobject.jsだけです。

さてこれで必要なjsはそろいましたので、次は任意の画像を拡大できるFlashを自動で生成してくれるZoomifyをダウンロードします。Adobe Photoshop CS3を使っている方は既にZoomifyを内蔵していますのでそれを利用するのもいいかもしれません。

しかし、今回は誰でも無料で使えるZoomify-EZを書き出してくれるフリーソフトのZoomifyer EZ利用します。(あれれ、どっちがどっちだ)
zoomify – Zoomifyのトップページ
Zoomifyer EZ – 利用するZoomifyer EZのページ

ダウンロードしたzipを解凍するとこんな感じ

Zoomifyer EZの使い方はいたって簡単なので割愛します。起動して使用したい画像を選択するだけです。アイコンへのドロップも対応してますので放り投げてください。

すると選択した画像と同じの名前のフォルダを自動で作ってくれます。上で用意したsample.jpgを使ったと仮定すと、sampleというフォルダが生成されていると思います。これでFlash的な作業は終了です。次は今作ったsampleフォルダ(中にはTileGroup0とImageProperties.xmlが入ってるはず)のパスをHTMLに埋め込みます。さすがにこればっかりは手作業ですがテンプレートが同梱されているので楽です。

まずZoomifyer EZのフォルダに同梱されてあるTemplate.htmを開きます。するとテーブルのなかにobjectが入ってますのでそれを編集します。書き換える場所は2箇所です。

を

にして、もうひとつは

EMBED FlashVars="zoomifyImagePath=http://www.zoomify.com/content/test/"

を

EMBED FlashVars="zoomifyImagePath=sample/"

に書き換えます。基本的にzoomifyImagePath=の後を先ほどのフォルダの名前にします。あとはobjectとembedの中のwidthとheightをおのおのちょうどいい大きさにしてやります。

それが終わったらHTMLにjsやmediabox.css等のlinkをかけばおしまいです。
mediabox&zoomifyサンプルページ
一応ファイル構成とHMLTを書いておきます。参考になれば。

index.htmlにはscript srcを書いて、test.htmlには先ほど編集したZoomifyのコードを書きます。
テキストリンクでもよかったのですが、なんか味気ないのでサムネイルにしました。

index.html



無題ドキュメント

Mediaboxの使い方は、上のように rel=”mediabox[width height]“と記入してください。みてのとおりですが、呼び出すサイズもそのなかで指定します。

test.html










Powered by Zoomify

今回のサンプルのソースはかなり汚い(間違っている)ので、あてにしないでください。書き直すのがマンドクセぇ(’A')=3

あとサンプルページではMediaboxのCloseボタンを日本語の奴に変えています。「英語なんか使ってたまるかこの野郎！」という日本男児はこれでも使ってください。

リキッドレイアウトの最大横幅を固定する-minmax.js

しるべっと — Thu, 15 May 2008 15:51:53 +0000

まずリキッドレイアウトの説明からですが、横幅100％で2カラムのリキッドレイアウトを作ります。3カラムはその応用になるので割愛。また現実問題としてサイドバーは固定の方が使いやすいので200pxで固定します。今回の肝はリキッドさせながらサイドバーを固定させる所でしょうか。投稿記事の表示される部分はwidth:100%;を指定してサイドバーは200pxを指定します。

全然目新しいことでもなんでもないのですが、とりあえず忘れないようにメモっときます。

CSS

#container {
float: left;
width: 100%;
margin-right: -200px;
}

#content { margin-right: 200px;}

.post {
width: 90%;
margin: 0 auto;
}

#sidebar {
float: right;
width: 200px;
}

XHTML



テスト


サイドです

これに背景色等を加えるとこうなります
サンプル1

これはこれで良いのですが、最近は解像度が高いディスプレイも増えてきているので、100％だと間延びしてしまいかねません。

ですのでリキッドを生かしながら、サイトの横幅の最小値を従来どおりの760px、最大値を最近増えてきている960pxで固定させてみます。つまりサイトの横幅がユーザーのディスプレイにあわせて、760px～960pxの間で可変するようなります。

今回は簡単に#liquid-fixを作り、上で使ったXHTMLの全体をそれで包み込みます。その為には#liquid-fixに最大幅と最小幅を指定します。
指定にはmax-width / max-height / min-width / min-heightを使います。

対応ブラウザについてはHTMLクイックリファレンス – max-width をどうぞ。それに加えIE7でも正式対応しております。

ではmin&max-widthを利用して#liquid-fixに横幅を指定します。

CSS

#liquid-fix {
min-width: 760px;
max-width: 960px;
}

これを上のCSSに書き足して、あとはHTMLで全体を包むとこうなります。
サンプル2

しかしこのままでは先ほど説明したとおり、IE6ではmin-width等をサポートしていないためサンプル１と変化がありません。ここでdoxdesk.com のminmax.js を使います。

利用は簡単で、minmax.jsをサーバーにアップロードしてhead内に
＜script type=”text/javascript” src=”○○/minmax.js”＞＜/script＞
と書くだけです。

するとIE6でもmin-width等を利用することができるようになります。
サンプル3

Commit Lab » javascript

slimboxのjQuery版がリリースされていた

関連する投稿

mediaboxとzoomifyで簡単に楽して画像をリッチに見せる

関連する投稿

リキッドレイアウトの最大横幅を固定する-minmax.js

関連する投稿