Javascript Patchworker - サムネイル機能

このスクリプトについて
　ブロードバンド化が進むにつれてWEBページに写真などを公開する機会も増えてきました。ですが容量の大きい写真を大量に掲載する場合、スペースもありませんし、ページもかなり重くなります。そこでよく利用される技術がサムネイルという技術です。予めサイズの小さな画像を用意して、それをクリックすることで大きな画像を表示する技術です。通常のリンクでも実現可能ですが、今回はそれをJavaScriptで実現してみました。
　JavaScriptを用いる利点はいくつかあります。邪魔なアドレスバーやツールバーなどを消せること、またウィンドウにぴったりのサイズに合わせられることなどです。

実行例
　　

関連

対応ブラウザ
WIN IE 3.0～ NN 2.0～　MAC IE 3.0～ NN 2.0～

サンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ウィンドウをオープン</title>
<script type="text/javascript">
<!--
//ユーザが設定する変数----------------------------------
  var Wname = "newWin"; //新しいウィンドウの名前
  var x = "auto"; //ウィンドウのX座標
  var y = "auto"; //ウィンドウのY座標
//------------------------------------------------------

function thumbnail(URL, width, height){
  options = "Resizable=0, directories=0, location=0, menubar=0, scrollbars=0, status=0, toolbar=0, width=" + width + ", height=" + height;
  if( x != "auto" ) options += ", left=" + x;
  if( y != "auto" ) options += ", top=" + y;
  win = window.open ('', Wname, options);
  win.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">');
  win.document.write('<html>\n<head>\n');
  win.document.write('<meta http-equiv="Content-Style-Type" content="text/css">');
  win.document.write('<style type="text/css"></style>\n</head>\n');
  win.document.write('<body>\n');
  win.document.write('<img src="'+URL+'" width="'+width+'" height="'+height+'">\n');
  win.document.write('</body>\n</html>');
  win.document.close();
}
//-->
</script>
</head>

ユーザ設定
　ユーザーが設定する変数は、Wname、x、yですが、どれも大して設定する意味はありませんので、説明は割愛します。
　サムネイルの作り方は、公開したい画像の縮小版を用意し、それをHTMLに記述し、その画像にリンクを張り、
javascript:thumbnail('公開したい画像へのパス', 'その画像の幅', 'その画像の高さ')
をリンク先に設定します。（サンプル参照）
　サンプルでは画像がリンクであることを強調するためにわざとリンクの青枠を残してありますが、邪魔な場合は画像のタグにborder="0"という属性を記述してください。

JavaScriptのTOPに戻る　　

TOPに戻る