opensource

ココログ / slimbox

slimbox †

ココログへの設置 †

  • ココログで使われているmootoolsが1.11系のため Slimbox 1.5x系を使う
  • Slimbox関連ファイルは「slimbox.js」と「slimbox」フォルダ全部を読み込ませる
  • 「mootools.js」はココログがデフォルトで読み込むものを利用する
  1. Slimboxファイルをダウンロード
  2. ココログへアップロード
    • 「slimbox」フォルダ以下を作成
    • 以下のように設置 
      ホーム/
　+slimbox/
　　+js/
　　| +slimbox.js
　　+css/
　　　+slimbox.css
　　　+closelabel.gif
　　　+loading.gif
　　　+nextlabel.gif
　　　+prevlabel.gif
  3. ココログのリストで読み込み
    • [マイリスト]タブ-[管理]タブ-[項目を追加する] 
      タイトル
(なし)
URL
(なし)
メモ
<script type="text/javascript" src="http://yi10.cocolog-nifty.com/slimbox/js/slimbox.js"></script>
<link rel="stylesheet" href="http://yi10.cocolog-nifty.com/slimbox/css/slimbox.css" type="text/css" />

      　　↓
      「保存」

  4. 記事本文
    • <a>タグのrel属性に"lightbox"を指定する
    • 同様に<a>タグのtitle属性に文字列を指定すると、lightbox画像の下にコメントとして表示される 
      <a href="http://yi10.cocolog-nifty.com/blog/2008/20081207_084838.jpg" rel="lightbox" title="小雪舞う">
<img class="image-full" src="http://yi10.cocolog-nifty.com/blog/2008/20081207_084838.jpg" alt="何故に雪なの？" border="0" />
/a>

Slimboxをrel属性なしで動作させる †

  • <a>タグのhref属性がjpg・gif・pngだったらSlimboxを動作させるようにする
  • 「slimbox.js」の以下の箇所を変更する
    • オリジナル 
      return el.rel && el.rel.test(/^lightbox/i);
    • 変更後 
      return el.href && el.href.test(/jpg$|gif$|png$/i);

リンク †







OS

言語

ソフトウェア

CMS

ツール

サイト

しごと術

その他

edit