[JS]画像を簡単に全画面表示するjQueryプラグイン(IE6対応)

画像を全画面表示させるjQueryプラグインをつくりました。
使い方は簡単!全画面表示する要素を指定して、全画面表示させる画像の元サイズを引数で渡すだけ。
centerPositionは画像をセンター寄せにするかどうかのプロパティです。falseにすると左上が基準になります。
要素内の画像は複数でも問題ないので、背景のスライドショーなどにも使えると思います。
あと、あまり需要がないかもしれませんが、複数要素にも対応しています。#imgと#photoを全画面表示とか。

デモはこちら。

使い方

<!DOCTYPE HTML>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8" />
	<title>fullImage.js</title>
	
	<!-- JS -->
	<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.fullImage.js"></script>
    <script type="text/javascript">
		$(function() {
			$("#img").FullImage({
				defaultWidth: 1300, // 画像の元サイズwidth
				defaultHeight: 900, // 画像の元サイズheight
				centerPosition: true // 画像をセンターに合わせるかどうか
			});
		})
    </script>
</head>

<body>
<div id="img"><img src="img/test.jpg"></div>
</body>
</html>

サンプルのダウンロード

コメント

  1. Pingback: フラッシュサイトのように画像を全画面表示するjQueryプラグイン | Web制作ノート | WEB DESIGN LAB

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Navigation