- 2008-05-20 (火) 11:59
- WEB
English (Google automatic translation) | Français (La traduction automatique de Google)
やっぱWordPressに乗り換え… の時にLightbox2も組み込んでみたんであるが、どうも見慣れた感がある。
組み込んだときに Mdkart 氏作成の「add-lightbox」プラグインを入れて使っていた。
ほかに画像表示のエフェクトがないかと探していたところ、おで氏作成の「wpj-highslide」を発見。
タグ付きの書式で書けば、highslideが適用されるとのこと…。
highslide はサムネイル画像をクリックすると拡大表示し、カーソルキーで前の画像、次の画像、マウスでドラッグ（移動）ができるもの。CSSを切り替えることによって、いろんなパターンに適用できる。
タグは書かなければいけないみたいだから、Add-lightbox をいじってなんとかならないものかとやってみた。
テンプレートの編集は必要だけど、見事自動的にタグを付けることに成功。
私は英語が堪能ではないため、日本語のことしか考えていない（すみません）。
とはいえ、勝手に改造したモノを配布するわけにもいかず、作者の方（Mdkart氏）に連絡を取ってみたんである。
しつこいようですが、私は英語が堪能ではないため、エキサイトさんに翻訳をお願いすることに（笑）。
送った内容は
あなたが作ったプラグインを改造して「highslide用」に改造しました。
配布してもいいっすか？
みたいな感じで。
その日の夜に返事をいただいた。
大まかな内容として
ちゃんと作り直して、私のブログに掲載しましょう。
その方がカンタンですし、最善策じゃないかと…。
という返事がきた。
追記：本日返信があり、
Lightboxプラグインと、そう大差ないだろうから、
あなたのBLOGで変更点を掲載しちゃってください。
みたいな返事がきました。Thankyou, Mdkart!
確かにサポートとかのコトを考えると、私のスキルではどこまでできるかわかりませんしねぇ。
↑もうこの選択肢はなくなりました。
お急ぎで試したい方は、add-lightboxをダウンロードして、以下の部分を修正すれば動くんじゃないかと…。
6/2追記…結構な参照数があるようなので、もしや「”」が正常に表示されていないのか？と思ったんで、テキスト版をアップ。改行コードはCR、エンコーディングはUTF-8が開けるエディタが必須。
Download >> add-lightbox-modify-utf8.txt.zip
13行目あたりからある以下4行のコードを (original code)
$pattern = "/<a(.*?)href=('|¥")([^>]*).(bmp|gif|jpeg|jpg|png)(’|¥”)(.*?)>(.*?)<¥/a>/i”;
$replacement = ‘<a$1href=$2$3.$4$5 rel=”lightbox[%LIGHTID%]“$6>$7</a>’;
$content = preg_replace($pattern, $replacement, $content);
$content = str_replace(”%LIGHTID%”, $post->ID, $content);
以下の4行に差し替える。 (modifed code)
$pattern = "/<a(.*?)href=(.+¥.jpg¥"|.+¥.jpeg¥"|.+¥.png¥"|.+¥.gif¥")(>)(<img .+)(alt=¥")(.*)(¥" width.+)<¥/a>/i";
$replacement = '<a$1href=$2 class="highslide" onclick="return hs.expand(this)" id="$6"$3$4$5$6$7</a><div class=¥'highslide-caption¥' id=¥'caption-for-$6¥'>$6</div>';
$content = preg_replace($pattern, $replacement, $content);
$content = str_replace("", $post->ID, $content);
※「”」がちょっと違う記号になってる場合があるみたいです。ご注意ください。
私の場合、highslideのに同梱のCSSはディレクトリを作って入れている。
また、ソース中に埋め込むJavascriptも、外部jsとして保存している。
どうせならすべてのページに適用したいじゃないですか（ってフツーか）。
ディレクトリ構造は以下の雰囲気
public_html
[dir]highslide
[dir]graphicshighslide.js
highslide-html.js[dir]hs_src （CSSや外部JSを入れてる）
highslide-w10.css
highslide-w10.js
…
js-scb.js
みたいな感じ。
ちなみに highslide-w10.js の内容は以下の通り。
（highslideのサンプルHTMLに書かれているものを抜き出しただけ）
hs.graphicsDir = '/highslide/graphics/';
hs.outlineType = 'rounded-white';
window.onload = function() {
hs.preloadImages(5);
}
js-scb.js は、画像のコントロールバーを表示させるためのJSを抜き出したもの。
<body>〜</body>中に表示させる必要があるんで、document.write でまとめてある。
document.write('<div id="controlbar" class="highslide-overlay controlbar">');
document.write('<a href="http://vikjavev.no/highslide/?user=1" title="Powered by Highslide JS" style="width: 30px; margin-right: 23px"></a>');
document.write('<a href="javascript:void(0)" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>');
document.write('<a href="javascript:void(0)" onclick="return hs.next(this)" title="Next (right arrow key)"></a>');
document.write('<a href="javascript:void(0)" class="highslide-move" title="Click and drag to move" style="margin-left: 10px"></a>');
document.write('<a href="javascript:void(0)" onclick="hs.close(this)"></a></div>');
上記のJSを「たくさん作るのメンドー」って方、ここからダウンしてください。(*.js files in Zip)
<body>〜</body>中のどこかに入るように
<script type="text/javascript" src="<?php bloginfo('home'); ?>/hs_src/js-scb.js"></script>
を追加する。
テンプレートの fotter.php に（<body>〜</body>中のどこかに入るように）
<div id="highslide-container"></div>
を追加。これは表示ページのどこかに入っていればいいみたい。
テンプレートの header.php に以下のコードを追加（<head>〜</head>部分に入れる）
<script type="text/javascript" src="<?php bloginfo('home'); ?>/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('home'); ?>/hs_src/highslide-w10.css" />
<script type="text/javascript" src="<?php bloginfo('home'); ?>/hs_src/highslide-w10.js"></script>
以下の面倒なコード入力は、プラグイン様がやってくれるんで入力不要。
<a href="images/full-image.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="images/thumbnail.jpg" alt="Highslide JS" id="thumb1"
title="Click to enlarge" height="120" width="107" />
画像の注釈（キャプション）を入れたい場合のタグも自動で付く（ハズ）。
<div class='highslide-caption' id='caption-for-thumb1'>
This caption can be styled using CSS.
</div>
基本的にWordpress2.5.Xで生成されたタグしか考慮してません（あしからず）。
キャプションに関しては「ALTタグ」を探してIDとキャプションに引用する仕様。
もしかすると同一ページ内に同じ名前のALTタグがあると正常動作しないかも。
確実動作版は、作者様を待つ方が吉だと思う（絶対そうだ）。
↑もうこの選択肢はなくなりました。残念。
念のため、実行される場合は、くれぐれも自己責任で。
スポンサード リンク
- Newer: デスクトップに文字の嵐。
- Older: Another HTML-lint
Comments:2
- 1600 08-06-03 (火) 9:20
-
はじめまして
この改造プラグインを使用させてもらった者です。
highslideはプラグインで楽だったのですが、表示させる為の
タグ入れはめんどうだな～と思っていろいろ検索していたら
ここを見つけました。思ったとおりにでき、提供してくださったM-M-J様
に感謝です。
また、お名前の表示もしない変な形でlinkしてしまい申し訳ありませんでした。 - mmj 08-06-03 (火) 9:39
-
1600様
いえいえ、リンクしていただけるだけで感謝でございます。
コメントまでいただき、ありがとうございます。
“ぐうたら”するための努力は惜しまない主義ですので（笑）
これからもよろしくお願い申し上げます。
Trackbacks:0
- Trackback URL for this entry
- http://www.m-m-j.com/2008/05/highslide/trackback/
- Listed below are links to weblogs that reference
- highslide from M-M-J Blog