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

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

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

画像エフェクト(Popup)jquery.fullsize.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" />
 
<link href="fullsize.css" media="screen" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.fullsize.pack.js"></script>	
<script type="text/javascript"> 
	$(function(){
		$("div.wrap img").fullsize({
		  shadow       : false, // true : シャドウあり false : シャドウ無し
		  zoomInSpeed  : 200, // ズームインのスピード
		  zoomOutSpeed : 200, // ズームアウトのスピード
		  fadeInSpeed  : 500, // フェードインのスピード
		  fadeOutSpeed : 500, // フェードアウトのスピード
		  iconOffset   : 3, // アイコンの位置。増やすほど右下に移動する。
		  forceTitleBar: false, // 
		  extraTrigger : ".myClass",
		  parentSteps  : 2
		}); 
	});
</script>	
</head>

<body> 
<div class="wrap"> 
	<img src="images/1.jpg" width="200" height="150" alt="" title="Eye" longdesc="images/1.jpg" /> 
	<img src="images/2.jpg" width="220" height="150" alt="" title="Red" longdesc="images/2.jpg" /> 
	<img src="images/3.jpg" width="100" height="150" alt="" title="G" longdesc="images/3.jpg" /> 
</div> 
</body> 
</html>

シンプルに画像をポップアップ表示することが出来るスクリプト fullsize.js 。
jqueryプラグインです。
アニメーションの設定を少し簡単に調節できます。 

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

jquery.jsをダウンロードします。
次にスクリプトの製作元のサイトへ行き、fullsize.zip をダウンロードしてきます。
動画の下辺りにダウンロードボタンがあるので、そこからゲットしてください。

fullsize.zip を解凍したら、jquery.js と一緒に中身をアップします。
↑はフォルダ分けされていないので、必要なら画像などをまとめて、CSSファイルのパスを再指定してください。

アップロードが完了したら、<head>にスクリプトを読み込む記述をします。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fullsize.pack.js"></script>　

次に、スクリプトのターゲットとアニメーションの動作を指定します。

<script type="text/javascript">
    $(function(){
        $("div.wrap img").fullsize({
            shadow       : false, // true : シャドウあり false : シャドウ無し
            zoomInSpeed  : 200, // ズームインのスピード
            zoomOutSpeed : 200, // ズームアウトのスピード
            fadeInSpeed  : 500, // フェードインのスピード
            fadeOutSpeed : 500, // フェードアウトのスピード
            iconOffset   : 3, // アイコンの位置。増やすほど右下に移動する。
            forceTitleBar: false, //              extraTrigger : ".myClass",
            parentSteps  : 2
       });
   });
</script>　

div.wrap img という所で、ターゲットとなる<img>要素を指定しています。

そして最後にHTML要素を<body>内に記述します。

<div class="wrap">
    <img src="images/1.jpg" width="200" height="150" alt="" title="Eye" longdesc="images/1.jpg" />
    <img src="images/2.jpg" width="220" height="150" alt="" title="Red" longdesc="images/2.jpg" />
    <img src="images/3.jpg" width="100" height="150" alt="" title="G" longdesc="images/3.jpg" />
</div>　

これで設定は完了です。
srcにはサムネイル画像を設定し、longdesc にはポップアップ画像を設定します。
今回はめんどくさかったので、サムネイルにはポップアップ画像のサイズを縮小したものを使用しています。 

関連スクリプト

感想

まあ使いやすいでしょう。こういったスクリプトを候補として、たくさん知っておくと便利かもしれません。

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

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

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