ホーム > Movable type > MT4 写真の見せ方のカスタマイズ

MT4 写真の見せ方のカスタマイズ

Posted by bitboi on May 18, 2008 | | コメント(0) | トラックバック(0)

写真の見せ方をちょっと工夫して、クールな感じにカスタマイズするためのメモです。

Lightbox2(2008-5-18現在はv2.04)をダウンロードします。
ダウンロード先：Lightbox2

ダウンロードしたフォルダを開き、jsフォルダのlightbox.jsをテキストエディタで開き49行目あたりの

LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

の、'images/loading.gif'を'/images/loading.gif'に
'images/closelabel.gif'を '/images/closelabel.gif'に書き換えし保存。

次にCSS、jsをフォルダごとアップロード。

次にimegesの中の画像をコピーし、ご自分のサイトのimegesのディレクトリへアップロード。

次は、MTのテンプレートをカスタマイズします。

テンプレートモジュール「ヘッダー」の
<script type="text/javascript" src="<$MTLink template="ajax_comments_javascript"$>"></script>
の後に、

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />

を追記。保存、再構築して終了です。
うまく作動しない場合は、アップロードしたディレクトリのパーミションを確認して下さい。

画像のリンクアンカーにrel="lightbox"を追加すればクールに画像を表示します。

【サンプル】Blue:Uploaded by tearoom on 27 Jul 07, 10.30PM JST.

うまく表示されるようになったら、右コラムのサムネイル画像の表示もクールにしてみましょう。

テンプレートモジュール「サイドバー」のphotos部分の

<a href="<$MTAssetURL$>">

に rel="lightbox[Photos]"を追記し

<a href="<$MTAssetURL$>" rel="lightbox[Photos]">

とします。保管して、再構築で終了。

写真がセット化され、普通の写真が何故かクールに見えてきます。

[Photos]はご自分の好み、[My Photo]などご自由にどうぞ。

タグ:

トラックバック(0)

トラックバックURL:

コメントする

Powered by Ajax Comments

Reading
Release 2.1
previous
Twitter
    Follow me icon
    名言（名言集.comより）
    Recent Entries
    Categories
    Pages
    Archives
    Comments
    TrackBacks
    Tags
    Photos
    Feed
    Powered by
    Search