記事一覧

Slimbox + WDP

「迷える子羊」さんでLightbox設置が紹介されていましたので、
少し捻って(?)SlimboxをWDPに設置する方法を紹介。

※2007/10/27  IE6対策について追記

【SAMPLE】 ※Photo from BurningWell
ファイル 136-2.jpg

【参考サイト】
・Slimbox - mootoolsベースのLightboxライブラリ。(buena suerte!)
・slimboxを使ってみたい(m・fami)

続き

Slimboxとは

Slimboxとはmootoolsというjavascriptフレームワークをベースとした
Lightboxクローンです。
Lightboxと同じ動作や機能がありながら軽量で、設置が簡単です。
動作に同じ rel="lightbox"を仕様しているため
lightboxからslimboxに移行しても、記事の書き換えが必要ありません。

Lightboxでは prototype.js + lightbox.js と組み合わせていましたが、
Slimboxでは mootools.js + slimbox.js のように組み合わせます。

mootoolsを使用して他にも様々な表現・機能が追加できます。
このサイトでも使用中の別窓表示(XHTMLでのtarget="_blank"代用)も
続いて紹介する予定です。

mootools & Slimboxの設置

必要なファイルをダウンロード

1.Slimbox - Downloadより、slimbox.zipをダウンロード。

2.mootoolsを以下にチェックを入れてダウンロード。

  • Core: Moo, Utility
  • Native: Array, String, Function, Element
  • Window: Window.Base, Window.Size
  • Effects: Fx.Style, Fx.Styles (optionally Fx.Transitions)

  面倒くさい、よく分からない、今後もmootoolsを使い倒すという方は
  全部にチェックを入れてしまっても問題ありません。
  最後のほうにあるCompression(ファイルの圧縮率)は

  • Packer Compression(圧縮レベル・高)
     = ファイルサイズが小さいがソースが見難い
  • No Documentation
  • No Compression(圧縮レベル:低)

  のうち、お好きなものを選んでください。
  特にこだわりがない場合、
  初期チェックのPacker Compressionのままで問題ありません。
  ちなみに全部にチェックを入れた場合、
  mootools.jsは高圧縮で40KBほどですので、prototype.jsと
  ほぼサイズは変わりません。

3.ダウンロードしたmootools-release-1.xx.jsを、
  名前が長いのでmootools.jsにファイル名変更。

ファイルのアップロード

1.slimbox.zipを解凍。

slimbox
 ├ js  ─ slimbox.js
 └ css ┬ slimbox.css
       ├ closelabel.gif
       ├ loading.gif
       ├ nextlabel.gif
       └ prevlabel.gif

  上記のようなフォルダ構成で解凍されます。
  「js」フォルダからはslimbox.jsを取り出しておきます。

2.slimbox.jsとmootools.js、
  「css」フォルダ丸ごとを「diarypro/skin」フォルダに入れる。

skin
 ├ slimbox.js
 ├ mootools.js
 └ css ┬ slimbox.css
      ├ closelabel.gif
      ├ loading.gif
      ├ nextlabel.gif
      └ prevlabel.gif

  のように配置できればOK。

3.「diarypro/skin」フォルダ内、header.htmlをエディタで開き、
  <head>~</head>内に次のタグを挿入。

<script type="text/javascript" src="${INFO_URL}skin/mootools.js.gz"></script>
<script type="text/javascript" src="${INFO_URL}skin/slimbox.js"></script>
<link rel="stylesheet" href="${INFO_URL}css/slimbox.css" type="text/css" />

  「css」フォルダ名を変えた場合は、css/slimbox.cssのURLを
  それにあわせて変えてください。

4.HTMLの書き出しを行っている場合、index.htmlを使用中の方は
  Web Diary Proにログインし、「サイトの再構築」を行ってください。

slimboxを使ってみよう

使い方は簡単、画像へのリンクに rel="lightbox"を加えるだけです。

例)ファイル1:サムネイル、ファイル2:表示したい画像のとき

<a href="$FILE2_path" rel="lightbox">$FILE1</a>

とすると、ファイル2が記事最初のサンプルのように表示されます。

例2)ファイル1:サムネイルA ファイル2:画像A
   ファイル3:サムネイルB ファイル4:画像B

<a href="$FILE2_path" rel="lightbox[cg1]">$FILE1</a>
<a href="$FILE4_path" rel="lightbox[cg1]">$FILE3</a>

のように書くと、lightbox[cg1]とついた画像(A~B)が連続で見れるようになります。(slimbox本サイトのデモ IMAGE SET 参照)

SlimboxのIE6対策

SlimboxはIE6では正常に動作しません。(メインの画像表示はできるが、
背景の半透明黒ゾーンがハンパにしか表示されないバグ)
解決するには2通りのパターンがあります。

<?xml version="1.0" encoding="utf-8"?>の削除

header.html最上部にある<?xml version="1.0" encoding="utf-8"?>を削除すると、IE6でも完全に動くようになります。
この記述はIEと相性が悪いときがあり、これを記述していない
XHTMLはちょくちょく見かけます。
DOCTYPEの前にXML宣言があるとバグが生じる仕様のようです。

綺麗なソースにこだわるのでなければ、一番てっとり早い解決法…
なのですが、折角WDPは綺麗なソースを書いてくれるので、少々
もったいなくあります。

 【参考】
・標準準拠モードと後方互換モード・DOCTYPE宣言について(小粋空間)

IE6のみSlimboxを起動させない

header.htmlに追加したjsファイル、cssファイルのリンクをIE6では
読み込まないようにします。
<head>~</head>内の記述を次のように変えます。

<![if ! IE 6]>
<script type="text/javascript" src="${INFO_URL}skin/slimbox.js"></script>
<link rel="stylesheet" href="${INFO_URL}skin/slimbox.css" type="text/css" />
<![endif]>

こうすると、FirefoxやOperaではSlimboxが起動しますが、IE6では起動せず、設置前の状態で画像が表示されます。
ソースの正しさは保持できますが、いまだ使用ブラウザの半数以上を占めるIE6ユーザーを切り捨てるのは辛いですね汗

TRACKBACK

未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2014/07/31(木)02時17分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/21(水)17時55分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/26(月)01時40分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/27(火)05時31分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/02(月)08時16分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/09(月)03時27分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/03/25(水)07時57分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/04/01(水)00時12分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/04/03(金)02時07分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/04/10(金)13時13分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/04/15(水)05時47分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/04/19(日)08時24分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/04/21(火)09時39分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/05/12(火)05時18分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/05/22(金)00時06分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/05/23(土)08時58分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/05/31(日)00時40分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/06/01(月)00時07分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/06/19(金)00時55分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/06/23(火)20時21分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/07/02(木)00時19分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/07/06(月)00時20分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/07/07(火)13時51分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/07/21(火)10時48分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/07/24(金)02時05分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/08/03(月)02時04分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/08/11(火)07時08分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/08/15(土)03時07分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/08/15(土)03時39分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/10/28(水)20時55分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/11/03(火)00時59分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/04/18(月)05時31分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2016/04/25(月)16時22分 受信

COMMENT

■陽子 [H] ... 2007/10/29(月) edit・delete

こんにちは、自サイトで設置の際にはこちらのTipsにかなりお世話になっています。

ええと、このページのサンプルですと、MacOSX10.4・Safari2の環境でSlimboxが起動しません(普通の画像リンクになります)。同じ環境でもFirefoxはちゃんと起動します。で、Slimbox配布元のサンプルは上記Safariでも起動します。未導入で何もわかっていないのですが、とりあえず状況のみお知らせします。

■kiriji ... 2007/10/29(月) edit・delete

>陽子さん
ご報告ありがとうございます!
Mac環境はないため、こうしたご一報はとてもありがたいです。
ここで設置したSlimboxはデフォルトとは微妙に
異なる設置をしているため、(cssファイルの位置が違うetc)それが原因になっているかもしれません。
他にも色々JavaScriptを入れているため原因がややこしくなっているのですが……。
IE6での不具合はなんとかなったと一息ついていたところでしたので、また調査再開してみますね。

※その後の追記
この記事の中に<head>~</head>がソース用に変換されないまま入っていました。[汗]
もしかしたらそれが不具合の原因かもしれません。
修正後もまだ動きませんようでしたらご連絡ください。

■陽子 ... 2007/10/31(水) edit・delete

こんにちは、追記にさっき気付きました[汗]
うーん、リロードもしてみたんですが、まだ読み込めないです…。SafariのCSSは読み込み順とかインポートの仕方に癖(バグか)があるみたいですが、ファイルの場所とかも関係するのでしょうか。

■kiriji ... 2007/11/01(木) edit・delete

>陽子さん
再びご報告、ありがとうございました。
同時にファイルの位置はSlimboxデフォルトのものに直しておいたのですが、それでも駄目だったということは、

・他のJavaScriptと干渉しあって動かない
・このサイトのCSSの書きかたが変

のいずれかだと思われます。
う~ん、己の勉強不足が祟っていますね[蒼ざめ]
ナビゲーションツリーやネタバレは便利なので
なるべく外したくないところなので、徐々にCSSを
今度は直していきたいと思います。

できればデフォルトの状態で検証したいところなのですが、
Mac環境がないというのは本当にどうにもならないもので[滝汗]
申し訳ありません、今しばらくかかりそうです…。

■ゆー [H] ... 2008/10/27(月) edit・delete

お久しぶりです。
昔の記事への書き込みで申し訳ないのですが、この件についてちょっとわかったことがあったので、コメントさせていただきます。

Web Diary Proへの組み込みではありませんが、このスクリプトを使用していたところ、やはりsafariで閲覧できない不具合に遭遇しました。
ここをこう直せば動く…というのはわからなかったのですが、どうも最新版のslimbox 1.64 + mootools 1.2だと動作しないようです。一つ前の、slimbox 1.53 + mootools 1.11に差し替えると正常に動作しました。(safari2.0.4にて確認)
※本家(http://www.digitalia.be/software/slimbox)のも動作していませんでした。

バージョンダウンすることで別の不具合が起こってしまう可能性はありますが、とりあえずご報告です。

■kiriji ... 2008/12/26(金) edit・delete

>ゆーさん
大変お久しぶりになってしまいました。
同じmootoolsでもバージョンにより動かないブラウザがあるとのこと、把握いたしました。
しかもslimbox配付元で「バージョンによってはOperaじゃ動かないよ」とはっきり英語で書いてありました。
おそらく自分が使用するOperaで動作が確実なものを優先した結果、safariの方が動かないものを使用してしまったようです。申し訳ありません。

とある企業サイトでは、わざとmootools v1.0と旧版slimboxを組み合わせていたものを使用していたりと、どうやら旧版の方が動作が確実なようです。
(Operaでも問題ありませんでした)
現在のOpera9.6xだとまた今の動作が微妙になっていますし、旧版に差し替えを検討いたします。
遅くなりましたが、ご報告ありがとうございました!

■未承認 ... 2014/07/08(火) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/09(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/14(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/17(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/18(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/26(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/31(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/08/01(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/21(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/25(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/02/01(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/02/08(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/02/21(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/02/26(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/03/06(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/08/03(月) edit・delete

管理者に承認されるまで内容は表示されません。

■非公開 ... 2022/01/09(日) edit・delete

管理者にのみ公開されます。

■非公開 ... 2022/08/11(木) edit・delete

管理者にのみ公開されます。

■非公開 ... 2022/08/27(土) edit・delete

管理者にのみ公開されます。

■非公開 ... 2022/09/05(月) edit・delete

管理者にのみ公開されます。

■非公開 ... 2022/09/12(月) edit・delete

管理者にのみ公開されます。

■非公開 ... 2022/09/22(木) edit・delete

管理者にのみ公開されます。

■非公開 ... 2022/09/30(金) edit・delete

管理者にのみ公開されます。

■非公開 ... 2022/10/06(木) edit・delete

管理者にのみ公開されます。

■非公開 ... 2022/10/15(土) edit・delete

管理者にのみ公開されます。

■非公開 ... 2022/10/23(日) edit・delete

管理者にのみ公開されます。

■非公開 ... 2022/10/27(木) edit・delete

管理者にのみ公開されます。

■非公開 ... 2022/11/05(土) edit・delete

管理者にのみ公開されます。

■非公開 ... 2022/11/14(月) edit・delete

管理者にのみ公開されます。

■未承認 ... 2022/11/21(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2022/11/21(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2022/12/02(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2022/12/03(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2022/12/16(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2022/12/18(日) edit・delete

管理者に承認されるまで内容は表示されません。

■非公開 ... 2023/01/08(日) edit・delete

管理者にのみ公開されます。