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

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

  1. Home>
  2. 画像表示>
  3. 画像エフェクト(Popup)>
  4. シンプルに画像をポップアップ

画像エフェクト(Popup)FancyZoom.js

シンプルに画像をポップアップ

  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FancyZoom</title>
<style>
*{margin:0; padding:0; border:0;}
ul{
  width:665px;
  height:400px;
}
 
li{
  display:inline;
  margin-right:10px;
}

</style>
<script type="text/javascript" src="FancyZoom.js"></script>
<script type="text/javascript" src="FancyZoomHTML.js"></script> 
</head>

<body onLoad="setupZoom();">
<ul>
    <li><a href="image/1.jpg" title="馬の瞳"><img src="image/thumbs/1.jpg" alt="馬の瞳" /></a></li> 
    <li><a href="image/3.jpg"><img src="image/thumbs/3.jpg" alt="表情を誘う木偶" /></a></li> 
    <li><a href="image/4.jpg"><img src="image/thumbs/4.jpg" alt="椿と光" /></a></li> 
</ul>
</body>
</html>

ごくシンプルに画像をポップアップ表示するJavascriptです。
既存のライブラリに依存して無いので使いやすいかもしれません。 

ダウンロード&<head>&<body>設定

サイトへ行きFancyZoom 1.1.zipをダウンロードしてきます。
解凍したフォルダはimages-globalとjs-globalの２つで構成されており、
前者にはポップアップ時に出現する枠の画像、後者にはメインスクリプトが収納されています。
これらを任意の場所へアップロードしたら、スクリプトを読み込ませる設定をします。

 

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

パスは各々調節してください。

次に<body>の設定を行います。下記のようにonload属性を付加してください。

<body onLoad="setupZoom();">　

これで設定は完了です。

タグの記述

<a href="image/1.jpg" title="馬の瞳"><img src="image/thumbs/1.jpg" alt="馬の瞳" /></a>　

このスクリプトでは、IDやclass等でポップアップする箇所を指定せず、<a>要素で画像にリンクしてあるものを自動的にポップアップします。
上記の例は、サムネイル画像をクリックするとポップアップ画像が表示されますが、次のようにテキストからもポップアップさせることが出来ます。

<a href="image/4.jpg">椿と光</a>　

また<a>要素に付加した「title」属性はポップアップ時のキャプションとなります。
ズーム表示させたくない場合は、

<a href="image/3.jpg" rel="nozoom">　

リンク部分に上記の様な設定を付加します。

jsファイルの説明

FancyZoom.jsでは基本的な動作を処理しています。
例えばアニメーションの速度を変えたい場合は、冒頭にある

var zoomSteps = 5　

の数値を変更します。
更にドロップシャドウがきついと思うのなら、

var shadowSettings = '0px 0px 5px rgba(0, 0, 0, ';　

の部分でシャドウを調節できます。

var zoomImagesURI   = 'images-global/zoom/';　

この箇所で、ポップアップ時の枠画像の場所を指定しているので、任意で調節してください。 

FancyZoomHTML.jsはフレームのHTMLを設定しているので、これも自分のデザインに合わせて調節すると良いでしょう。

関連スクリプト

感想

rightboxだとアニメーションが煩わしくてちょっと．．．というときに役立つスクリプトかもしれません。
スライドショーな機能は付いてませんが、ポイントで見せたい場合は重宝するんではないでしょうか。 

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

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

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