olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascriptサンプル、画像表示系の設置方法

  1. Home>
  2. 画像表示>
  3. 虫眼鏡>
  4. ルーペを選んで画像を部分拡大表示

虫眼鏡tjpzoom.js

ルーペを選んで画像を部分拡大表示

スポンサードリンク
  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>valid.tjp.hu - TJPzoom 3 - JavaScript / CSS / DOM image magnifier - Tutorial</title>
<style type="text/css">
code {background-color: #cccccc;}
.long {display:block;margin:1em;padding: 1em;}
</style>
<script type="text/javascript" src="tjpzoom.js"></script>
<script type="text/javascript">
 var concurr=(document.location+'?').split('?')[1];
 if(concurr == '') {concurr='default';}
 document.write('<scr'+'ipt type="text/javascript" src="tjpzoom_config_'+concurr+'.js"></scr'+'ipt>');
</script>
</head>
<body>

<img src="test.jpg" width="666" height"442" onmouseover="TJPzoom(this);">

<p>* <script type="text/javascript">
 configs=Array('default','smart','natgeo','roundfun','purity','relative');
 for(config in configs) {
  if(configs[config] != concurr) {
   
   document.write('<a href="'+location.pathname+'?'+configs[config]+'">'+configs[config]+'</a> * ');
  } else {
   document.write('<strong>'+configs[config]+'</strong> * ');
  }
 }
</script></p>
</body>
</html>

ルーペを選択して、画像を部分的に確認できるスクリプト。
ルーペ機能をオン、オフにすることもできます。
非営利利用の場合フリーなようです。 

１．ダウンロード/セッティング

製作元サイトへ行き、tjpzoom.zipをダウンロードしてきてください。
鳥の写真付近の Download the tutorial をクリックするとダウンロードできます。
解凍したらjsファイル7つと、dropshadow , halobevel , roundfun のフォルダをアップしてください。
フォルダにはルーペ用の画像が入っているのですが、これらはjsファイルで階層が設定されています。
階層を変えたい場合は、それぞれの名前が付いたjsファイル内の var TJPshadow='roundfun/'; の様な箇所を変更して下さい。

２．<head>の設定

ファイルをアップロードしたら、スクリプトを読み込ませる記述を書き加えます。

■ルーペをオン、オフする場合

<script type="text/javascript" src="tjpzoom.js"></script>　

■ルーペを選択できるようにする場合

<script type="text/javascript" src="tjpzoom.js"></script>
<script type="text/javascript">
 var concurr=(document.location+'?').split('?')[1];
 if(concurr == '') {concurr='default';}
 document.write('<scr'+'ipt type="text/javascript" src="tjpzoom_config_'+concurr+'.js"></scr'+'ipt>');
</script>　

オン、オフとルーペ選択は同時に機能させることが出来ないみたいです。

３．HTMLのマークアップ

HTMLの設定は簡単です。

<img src="test.jpg" width="666" height"442" onmouseover="TJPzoom(this);">　

このように<img>タグに、onmouseover="TJPzoom(this);"　を設定します。

■オン、オフ機能

<a href="#" onclick="if(TJPzoomswitch(document.getElementById('unique113'))) {this.innerHTML='OFF'} else {this.innerHTML='ON'}; return false;">ON</a>　

このようなリンクを表示してオンオフを切り替えます。

■ルーペ選択

<script type="text/javascript">
 configs=Array('default','smart','natgeo','roundfun','purity','relative');
 for(config in configs) {
  if(configs[config] != concurr) {
   document.write('<a href="'+location.pathname+'?'+configs[config]+'">'+configs[config]+'</a> * ');
  } else {
   document.write('<strong>'+configs[config]+'</strong> * ');
  }
 }
</script>　

上記のスクリプトを記述したところに選択用のリンクが表示されます。
表示テキストを変更したい場合は、 configs=Array(内のテキストを変更して下さい。

document.write('<a href="'+location.pathname+'?'+configs[config]+'">'+configs[config]+'</a> * ');　

上記の箇所をサンプルとは別に変更させました。
たぶんこっちの方が使いやすいと思います。 

関連スクリプト

感想

これよりは汎用性があって使いやすいかもしれません。
ルーペを変更するのにあまり魅力は感じませんが、オン、オフできるのは良いと思います。 

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。