Posted by しるべっと on 2009 年 2 月 23 日 – 2:59 PM
Filed under javascript, 日記
LightBox風のjavascriptと言えばいろいろな種類がありますよね。
以前うちでもmediaboxとzoomifyで折込チラシや画像をリッチに見せる的なのをやりましたが、今ではもう個人や企業は問わず沢山のサイトで目にする演出です。
このブログもLightBox風のjavascriptが使えるように作ってます(面倒だからあんまり使ってないけど)。最初はLightBoxを使おうと思っていたのですが、やっぱりライセンス的にはもうちょっと緩い方がいいなと思い、lightboxのクローンであるslimboxを選択しました。当時はMooToolsだけだったと思うんだけど、MITの緩さがいいよね的なノリで。
だがしかし他のAjaxも使うとなると、使用するライブラリは出来るだけ統一した方がいいという事で、その後はjQueryのThickBoxを使うようになりました。
まぁそんなこんなで、先日はてブの整理がてらで久しぶりにslimboxのページを見てみると、なんとjQuery版がリリースされてるではないですか!
slimbox2.02
ライブラリ:jQuery
ライセンス:MIT
slimbox1.69
ライブラリ:MooTools
ライセンス:MIT
使うかどうかは置いといて試しておきたいと思います。
Posted by しるべっと on 2008 年 5 月 21 日 – 5:36 PM
「手軽にネット上でチラシを配信したいんだけど…できればFlashを使った今風な感じで・・・」という相談を持ちかけられたのでお手軽な方法を考えてみた。忘れないうちにメモを。
今回はまずサンプルページをご覧ください。
mediabox&zoomifyサンプルページ
では下準備として今回Zoomifyで表示させたい画像を用意してください。今回は利用者にFlashでズームしながら画像を見てもらうわけなので、準備する画像もそこそこの解像度のものを選びましょう。ちなみにサンプルページの画像は2400ｘ1800ｐｘです。
用意をするのが面倒な方はサンプルで使用した変な画像をお使いください
sample.jpg – 2.08MB
つかえるもんならフリー素材として使っていただいて結構です。
Read More »
Posted by しるべっと on 2008 年 5 月 16 日 – 12:51 AM
まずリキッドレイアウトの説明からですが、横幅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
<div id="container">
<div id="content">
<div class="post">テスト</div>
</div>
</div>
<div id="sidebar">サイドです</div>
これに背景色等を加えるとこうなります
サンプル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
