LIFE IS LIKE A GROCERY CART.
主に日記&旅行記。ごくたまにWindowsとMacとフリーウェアの話題とか，muzieのTranceカテゴリの紹介とか。
FC2ブログでHighslideを使う〜とりあえずそれっぽく篇〜
2007年 02月 25日 (日) 10:33
Liteboxを導入したのはいいもののてんで使っていない私でありますが，今度は Highslide なるものを導入することにしました。Highslideて何？ という方は下のサムネイル画像をクリックしてみてください。オーバーレイ表示ではなく，その場で拡大表示するスクリプトです。さらに，拡大された画像をドラッグすることができます。
これをFC2ブログで使うにはちょこっとがんばってカスタマイズしないといけません。というわけでまたまた自分用メモも兼ねてFC2ブログ専用改造法を書いておきます。なんかもうFC2ブログ用にカスタマイズすること自体が目的になってきてる気がしますが。
こちらのサイトを参考にさせていただきました。
小粋空間 : Highslide JS でサムネイル画像を拡大表示する
ありがとうございます。
HighsideとFC2blogの相性について
結論から言うと，実際問題Highslideとの相性はあまりよくないです。FC2ブログではアップロード時にフォルダを作れません。これがネックとなっています。
ただし，動かないというわけではなく，動かすために多少労力が必要だというだけの話なので，適切にカスタマイズしてやれば問題はないです。
ただ絶対にクリアできない問題として，現在FC2ブログに拡張子curのファイルはアップできないため，虫眼鏡カーソルは使えません。
それでは，とりあえず機能をフルに使うためには色々と面倒事が多いので，まずは「それっぽく」動かすためだけにカスタマイズしていきましょう。
ちなみに私がダウンロードした時点では，バージョン2.2.8でした。多分大きな違いはないと思われます。
ダウンロード
まず，Highslideのサイト でHighslideをダウンロードします。What do you intend to use Highslide JS for? というわけなのですが，要は商用利用に関しては使用料がかかります。
- A personal website, educational site or other non-commercial use (free).
- A commercial or company website ($30).
アップロード
とりあえずそれっぽく動くことを目標に話を進めます。
FC2ブログにログインして，「ファイルアップロード」で以下のファイルをアップしてください。
highslide / highslide.js当然ながらFC2ブログではフォルダは作れませんので，そのままアップするだけでよいです。
highslide / highslide-packed.js
テンプレートの修正
「テンプレートの設定」または「ブログデザインの設定」で，現在使用中のテンプレートを修正します。
まず，「HTMLの編集」にて，<head> 〜 </head>間に以下の行を追加します。
<script type="text/javascript" src="<%url>file/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = '<%url>file/';
hs.outlineType = null;
window.onload = function() {
hs.preloadImages();
}
</script>
さらに，<body>の直後に以下を追加します。
<div id="highslide-container"></div>なお，FC2アクセス解析を設置している場合では，<body>直後はアクセス解析用のタグを入力されているかと思いますが，アクセス解析用のタグの後に上記1行を置けば問題ないようです。
次に，「スタイルシートの編集」にて，以下を追加します。
.highslide {
/* cursor: url(highslide/graphics/zoomin.cur), pointer; */
outline: none;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid white;
}
.highslide-image {
border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border: 2px solid white;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: white;
}
.highslide-loading {
display: block;
color: white;
font-style: 'MS Sans Serif';
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: black;
/*
padding-left: 22px;
background-image: url(highslide/graphics/loader.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
*/
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
現行のスタイルシートの最後に付け足しておけばOKです。
以上でHighslideが一応動くようになります。
リンクの書き方
では，エントリを書くときにどのようにすればよいのかを説明します。
今まで通りに画像を入れると，
<a href="http://..."> <img src="http://..." alt="..." /> </a>といった具合になるかと思います。これを，次のように修正します。
<a href="http://..." class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)"> <img src="http://..." alt="..." /> </a>onkeypress="..." はなくてもいけますが，ある方がより良いでしょう，ということで。
キャプションの付け方
拡大した画像の下にコメントを入れるにはどのようにすればよいのかを説明します。
さっきの
<a href="http://..." class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)"> <img src="http://..." alt="..." /> </a>に，以下のように追加します。
<a href="http://..." id="gazou" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)"> <img src="http://..." alt="..." /> </a> <div class="highslide-caption" id="caption-for-gazou">ここにコメント</div>この場合であれば，画像を拡大表示したとき「ここにコメント」と下に表示されるようになります。
id="gazou" と id="caption-for-gazou" に注意してください。ここの「gazou」を適当に書き換えることで色々のコメントを別々に付けることができます。
以上です。フル機能のためのカスタマイズ方法はもうしばらくお待ちください。
FC2 BLOG | コメント(12) | トラックバック(5) | ▲
FC2ブログでLiteboxを使う & rel属性なしでLiteboxを起動
2007年 01月 20日 (土) 15:20
Liteboxを導入。Liteboxて何？という方は下のサムネイル画像をクリックしてみてください。映えるし動くし，たまりません。また，グループ化すれば連続で画像を閲覧できます。
ことの始まりは友人のサイトを訪ねたらこんなことなっていたために「よしオレも！」と思っただけなんですが，これをFC2ブログで使うにはちょこっとカスタマイズしないといけません。というわけで自分用メモも兼ねてFC2ブログ専用改造法を書いておきます。
こちらのサイトを参考にさせていただきました。
小粋空間 : Litebox 1.0 をブログに適用する
drk7.jp : Lightbox Plus で画像を同一画面にオーバーレイして表示
ありがとうございます。
1. ダウンロード
さてまずは Liteboxのサイト で，litebox-1.0.zipをダウンロードして，解凍します。ちなみに解凍するとき「拡張子が二重」とか文句を言われるかもしれませんが大丈夫です。
2. 準備
FC2ブログではフォルダ構造を維持できないので，使うファイルだけどこか適当に litebox-fc2 などフォルダを作って移動してしまいましょう。使うファイルとは以下の9ファイルです。
js / litebox-1.0.js
js / moo.fx.js
js / prototype.lite.js
css / lightbox.css
images / blank.gif
images / closelabel.gif
images / loading.gif
images / nextlabel.gif
images / prevlabel.gif
さて，中身の書き換えが必要です。
3. スクリプトとCSSの修正・必須段階
以下の赤太字の通りに litebox-1.0.js と lightbox.css をそれぞれ書き換えます。
3.1 "litebox-1.0.js"の修正（20行〜）
// // Configuration // var fileLoadingImage = "./file/loading.gif"; var fileBottomNavCloseImage = "./file/closelabel.gif"; var resizeSpeed = 6; // controls the speed of the image resizing (1=slowest and 10=fastest) var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable
3.2 "lightbox.css"の修正（45行〜）
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(nextlabel.gif) right 15% no-repeat; }
4. スクリプトとCSSの修正・応用段階
さて，上記の改造でもう使うことは可能なのですが，実はこのスクリプトは <a> に rel="lightbox" と書かれていないと動作しません。今までの記事を全部編集し直すとかやってられませんので，画像ファイルへのリンクであれば Litebox が動作するように litebox-1.0.js を改造しましょう。改造する箇所は2か所です。
4.1 "litebox-1.0.js"の修正（126行〜）
// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
var relAttribute = String(anchor.getAttribute('rel'));
// use the string.match() method to catch 'lightbox' references in the rel attribute
if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
anchor.onclick = function () {myLightbox.start(this); return false;}
}
}
ここを，以下のように書き換えます。
// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
//var relAttribute = String(anchor.getAttribute('rel'));
// use the string.match() method to catch 'lightbox' references in the rel attribute
if (anchor.getAttribute('href') && anchor.getAttribute('href').match(/jpg$|gif$|png$/)){
anchor.onclick = function () {myLightbox.start(this); return false;}
}
}
4.2 "litebox-1.0.js"の修正（264行〜）
// loop through anchors, find other images in set, and add them to imageArray
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
imageArray.push(new Array(anchor.getAttribute('href'),
anchor.getAttribute('title')));
}
}
imageArray.removeDuplicates();
while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
を以下のように書き換えます。
// loop through anchors, find other images in set, and add them to imageArray
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
if (anchor.getAttribute('href') && anchor.getAttribute('href').match(/jpg$|gif$|png$/)){
imageArray.push(new Array(anchor.getAttribute('href'),
anchor.getAttribute('title')));
}
}
imageArray.removeDuplicates();
while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
これでjpeg，gif，pngファイルへのリンクは Litebox で開かれるようになります。ちなみにかなりやっつけ仕事なので不具合があるかもしれません。ご自分の責任でどうぞ。（そもそもjavascriptの知識といえば関数？メソッド？プロパティ？プロシージャってなんだっけ？みたいな感じですので…）
では，FC2ブログにログインして，ファイルをアップしましょう。
5. ファイルのアップロード
「ファイルアップロード」で，上記9ファイル
js / litebox-1.0.jsをすべてアップロードします。
js / moo.fx.js
js / prototype.lite.js
css / lightbox.css
images / blank.gif
images / closelabel.gif
images / loading.gif
images / nextlabel.gif
images / prevlabel.gif
6. テンプレートの修正
最後に，「テンプレートの設定」で，現在使用中のテンプレートを修正します。言わずもがなですが，バックアップ取っておくと吉かと。
まず，「HTMLの編集」にて，<head> 〜 </head>間に以下の行を追加します。
<link rel="stylesheet" href="<%url>file/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="<%url>file/prototype.lite.js"></script> <script type="text/javascript" src="<%url>file/moo.fx.js"></script> <script type="text/javascript" src="<%url>file/litebox-1.0.js"></script>
次に，<body>にonload要素を追加します。たとえばこんな感じです。
<body onload="initLightbox()">
テンプレートによってはすでに<body>タグに色々書いてあるかもしれませんが，> の直前に onload="initLightbox()"を入れればOKです。
できあがったら忘れずに「更新」ボタンを押してください。
お疲れさまでした，以上で作業完了です。私もよくわかってないので申し訳ないですが環境によってはうまくいかなかったりするかもしれません。後はくれぐれもタイプミスにはお気をつけください。コピペ推奨です。
1月24日追記：いくつか内容にミスがありましたので修正しました。申し訳ありませんでした。
FC2 BLOG | コメント(401) | トラックバック(2) | ▲
プロフィール
- Author : Naoki
- 名古屋在住大学生。
現在稼働中のマシンは3台 : 自作DOS/V (Win2000)，MacBook Black (MacOS X Tiger)，Mac mini (MacOS X Panther)。
CASIO EXILIM EX-Z600を愛用中。
長編記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
友達申請フォーム
ブログ内検索
RSS
FC2カウンター
Copyright(c) LIFE IS LIKE A GROCERY CART. All Rights Reserved.