上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサード リンク

ちょっと前からこのブログでも利用させてもらってますが、画像の表示に「Litebox 1.0」というJavaScriptを利用しています。「Litebox 1.0」を利用すると同一ウインドウ内に画像をフェード効果で表示させることができます。Movabletypeで適用する方法を紹介していきます。

 まずLiteboxをダウンロードします。
このブログではダウンロードしたファイルを解凍した後、css、images、jsのフォルダをそのままindex.html があるディレクトリにアップロードしましたが、その前に「lightbox.css」「litebox-1.0.js」を少し修正します。

ダウンロードしたファイル「lightbox.css」「litebox-1.0.js」を修正します。

cssフォルダ内の「lightbox.css」をメモ帳などエディターを使って開きます
「lightbox.css」の48行目と53行目と54行目辺りの三箇所のgifファイルを絶対パスに変更します。
(たとえばhttp://www.boomlabo.net/images/prevlabel.gifといった感じに変更)

jsフォルダ内の「litebox-1.0.js」を同じくメモ帳などで開きます
23行目と23行目の二箇所のgifファイルを絶対パスに変更します。

css、images、jsのフォルダをindex.htmlがあるディレクトリにアップロード。

 

Movabletypeテンプレートの修正箇所 <head>~</head>内に以下を記述します。

<link rel="stylesheet" href="<$MTBlogURL$>css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<$MTBlogURL$>js/prototype.lite.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/litebox-1.0.js"></script>

bodyの要素にonload 属性を追加します。 太字の部分を追加します。

<body class="○○○-column-○○○" onload="initLightbox()">

記事内の画像リンクにrel属性値を追加します。

<a href="http://domain/path/to/images/hogehoge.jpg" rel="lightbox"><img src="http://domainpath/to/images/hogehoge_thumb.jpg" /></a>

上記の太字部分(rel="lightbox")を追加すると画像をクリックした際背景が半透明のブラックになりフェード効果で画像を表示するようになります。

Litebox 1.0で画像を表示
スポンサード リンク
Comment
Comment Form
Not Display
[チェックを入れると投稿した内容は管理者だけが閲覧します]

TrackBack

nao

Author:nao
オンラインゲームが中心、無料ツールやフラッシュゲームを紹介していきます。

全記事数
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。