Lightbox2について
http://lokeshdhakar.com/projects/lightbox2/
から入手。
やりたかった事
Linux/Windows上のPHP / ImageMagickで、画像のサムネイルを作成/表示と、Lightbox2で拡大表示。同じソースにて。
以下、ソース
<?php
print <<< _HTML_
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" type="text/css" href="./css/lightbox.css" />
<meta charset="UTF-8"/>
<title>画像を表示</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="./js/lightbox.js"></script>
<h1>画像を表示する</h1>
_HTML_;
if (PHP_OS == "WIN32" || PHP_OS == "WINNT") {
$bmp_img = mb_convert_encoding("$bmp_img", "utf8", "cp932"); //文字コード変換
}
//WindowsOSここまで
$work_dir2 = "work/";
$work_img= dirname(__FILE__)."/".$work_dir2.$bmp_img
$temp_img= dirname(__FILE__)."/".$work_dir2."temp.jpg";
// 出力する画像サイズの指定
$width = 300;
if (PHP_OS == "WIN32" || PHP_OS == "WINNT") {
$work_img = mb_convert_encoding("$work_img", "cp932", "utf8"); //文字コード変換
}
list($imagick_w, $imagick_h) = getimagesize($work_img);
//元画像の比率を計算し、高さを設定
$proportion = $imagick_w / $imagick_h;
$height = $width / $proportion;
//高さが幅より大きい場合は、高さを幅に合わせ、横幅を縮小
if($proportion < 1){
$height = $width;
$width = $width * $proportion;
}
if (PHP_OS == "WIN32" || PHP_OS == "WINNT") {
$work_img = mb_convert_encoding("$work_img", "utf8", "cp932"); //文字コード変換
}
$imagick = new Imagick();
$imagick->readImage($work_img);
$imagick->setImageFormat('jpeg');
//$imagick->stripImage();
$imagick->resizeImage($width, $height, Imagick::FILTER_POINT, 0);
$imagick->writeImage($temp_img);
if($temp_img !== FALSE){
print "<a href=\"work/".$bmp_img."\" data-lightbox=\"group\" data-title=\"".$bmp_img."\"><img src=\"work/temp.jpg\" alt=\"".$bmp_img ."のサムネイル\"></a></td>\n";
}
$imagick->clear();
$imagick->destroy();
echo '</body>';
echo '</html>';
?>
解説。
<?php
print <<< _HTML_
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" type="text/css" href="./css/lightbox.css" />
<meta charset="UTF-8"/>
<title>画像を表示</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="./js/lightbox.js"></script>
<h1>画像を表示する</h1>
_HTML_;
ここについては、print <<<を使って楽してます。
意外だったのは、
<link rel="stylesheet" type="text/css" href="./css/lightbox.css" />
を<head>の先頭に書かなきゃならない事、
つまりhtmlで位置制限あるの？？と言う事と、
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="./js/lightbox.js"></script>
を</body>の、前、つまり<body>の後、って、通常は<head></head>に書く場所なのでは、と思ったところ。
http://blog.raizzenet.com/how-to-use-lightbox2/
に感謝です。
if (PHP_OS == "WIN32" || PHP_OS == "WINNT") {
$bmp_img = mb_convert_encoding("$bmp_img", "utf8", "cp932"); //文字コード変換
}
Windowsの文字コード対応。
$work_dir2 = "work/";
$work_img= dirname(__FILE__)."/".$work_dir2.$bmp_img
// 出力する画像サイズの指定
$width = 300;
if (PHP_OS == "WIN32" || PHP_OS == "WINNT") {
$work_img = mb_convert_encoding("$work_img", "cp932", "utf8"); //文字コード変換
}
list($imagick_w, $imagick_h) = getimagesize($work_img);
//元画像の比率を計算し、高さを設定
$proportion = $imagick_w / $imagick_h;
$height = $width / $proportion;
//高さが幅より大きい場合は、高さを幅に合わせ、横幅を縮小
if($proportion < 1){
$height = $width;
$width = $width * $proportion;
}
ここいらまでが、サムネイルの縦横比等をきめている。
if (PHP_OS == "WIN32" || PHP_OS == "WINNT") {
$work_img = mb_convert_encoding("$work_img", "utf8", "cp932"); //文字コード変換
}
$imagick = new Imagick();
$imagick->readImage($work_img);
$imagick->setImageFormat('jpeg');
//$imagick->stripImage();
$imagick->resizeImage($width, $height, Imagick::FILTER_POINT, 0);
$temp_img= dirname(__FILE__)."/".$work_dir2."temp.jpg";
$imagick->writeImage($temp_img);
if($temp_img !== FALSE){
print "<a href=\"work/".$bmp_img."\" data-lightbox=\"group\" data-title=\"".$bmp_img."\"><img src=\"work/temp.jpg\"></a></td>\n";
}
$imagick->clear();
$imagick->destroy();
echo '</body>';
echo '</html>';
?>
最もはまったのは、
$imagick->writeImage($temp_img);
と
<img src="work/temp.jpg">
実はLinuxだと、いずれも'temp.jpg'で動いてしまう。
Windowsが問題であった。
そして前者はサーバローカルで見た時のフルパス、
後者がネット越しに見た時の相対パス、
の為にこうなっている。