ポラロイド風写真配置

ブラウザによっては、傾きが表示されない場合があります。（CSS3で設定）
再読み込みで配置される位置が変わり、プレスドラッグで動かすことができます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ポラロイド風ギャラリー</title>
<link href="css/style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="polaroid">
	<img src="images/01.png" alt="">
	<p>DisneyLand Halloween 01</p>
</div>
<div class="polaroid">
	<img src="images/02.png" alt="">
	<p>DisneyLand Halloween 02</p>
</div>
<div class="polaroid">
	<img src="images/03.png" alt="">
	<p>DisneyLand Halloween 03</p>
</div>
<div class="polaroid">
	<img src="images/04.png" alt="">
	<p>DisneyLand Halloween 04</p>
</div>
<div class="polaroid">
	<img src="images/05.png" alt="">
	<p>DisneyLand Halloween 05</p>
</div>
<div class="polaroid">
	<img src="images/06.png" alt="">
	<p>DisneyLand Halloween 06</p>
</div>
<div class="polaroid">
	<img src="images/07.png" alt="">
	<p>DisneyLand Halloween 07</p>
</div>
<div class="polaroid">
	<img src="images/08.png" alt="">
	<p>DisneyLand Halloween 08</p>
</div>
<div class="polaroid">
	<img src="images/09.png" alt="">
	<p>DisneyLand Halloween 09</p>
</div>
<div class="polaroid">
	<img src="images/10.png" alt="">
	<p>DisneyLand Halloween 10</p>
</div>
</body>
</html>

《style.css》

body, div, img, p {
  padding:0; 
  margin:0;
}
body {
  overflow:hidden; 
  background-image:url(../images/bg.jpg);
}
.polaroid {
  width:368px; 
  height:376px; 
  background-image:url(../images/polaroid-bg.png); 
  position:absolute;
}
.polaroid img {
  width:335px; 
  height:275px; 
  margin:25px 0 0 15px;
}
.polaroid p {
  color:#2E2E2E;
  font-size:20px; 
  font-family:
    Georgia,serif;
    text-align:center; 
  margin-top:15px;
}

《script.js》

/*
* Author:      Marco Kuiper (http://www.marcofolio.net/)
*/
google.load("jquery", "1.3.1");
google.load("jqueryui", "1.7.0");
google.setOnLoadCallback(function()
{
// When everything has loaded, place all polaroids on a random position	
$(".polaroid").each(function (i) {
	var tempVal = Math.round(Math.random());
	if(tempVal == 1) {
		var rotDegrees = randomXToY(330, 360); // rotate left
	} else {
		var rotDegrees = randomXToY(0, 30); // rotate right
	}
	
// Internet Explorer doesn't have the "window.innerWidth" and "window.innerHeight" properties
	if(window.innerWidth == undefined) { 
		var wiw = 1000;
		var wih = 700;
	} else {
		var wiw = window.innerWidth;
		var wih = window.innerHeight;	
	}
	
	var cssObj = {
    'left' : Math.random()*(wiw-400),
    'top' : Math.random()*(wih-400),
    '-webkit-transform' : 'rotate('+ rotDegrees +'deg)',
    '-moz-transform' : 'rotate('+ rotDegrees +'deg)',
    '-ms-transform' : 'rotate('+ rotDegrees +'deg)',
    '-o-transform' : 'rotate('+ rotDegrees +'deg)',
    'tranform' : 'rotate('+ rotDegrees +'deg)' }; // added in case CSS3 is standard
	$(this).css(cssObj);
});

// Set the Z-Index (used to display images on top while dragging)
var zindexnr = 1;

// boolean to check if the user is dragging
var dragging = false;

// Show the polaroid on top when clicked on
$(".polaroid").mouseup(function(e){
	if(!dragging) {
		// Bring polaroid to the foreground
		zindexnr++;
		var cssObj = {
    'z-index' : zindexnr,
    'transform' : 'rotate(0deg)', // added in case CSS3 is standard
    '-webkit-transform' : 'rotate(0deg)',
    '-moz-transform' : 'rotate(0deg)',
    '-ms-transform' : 'rotate(0deg)',
    '-o-transform' : 'rotate(0deg)'
		};
		$(this).css(cssObj);
	}
});

// Make the polaroid draggable & display a shadow when dragging
$(".polaroid").draggable({
	cursor: 'crosshair',
	start: function(event, ui) {
		dragging = true;
		zindexnr++;
		var cssObj = {
    'box-shadow' : '#888 5px 10px 10px', // added in case CSS3 is standard
    '-webkit-box-shadow' : '#888 5px 10px 10px',
    '-moz-box-shadow' : '#888 5px 10px 10px',
    '-ms-box-shadow' : '#888 5px 10px 10px',
    '-o-box-shadow' : '#888 5px 10px 10px',
    'margin-left' : '-10px',
    'margin-top' : '-10px',
    'z-index' : zindexnr };
		$(this).css(cssObj);
	},
	stop: function(event, ui) {
		var tempVal = Math.round(Math.random());
		if(tempVal == 1) {
			var rotDegrees = randomXToY(330, 360); // rotate left
		} else {
			var rotDegrees = randomXToY(0, 30); // rotate right
		}
		var cssObj = {
    'box-shadow' : '', // added in case CSS3 is standard
    '-webkit-box-shadow' : '',
    '-moz-shadow' : '',
    '-ms-shadow' : '',
    '-o-shadow' : '',
    'transform' : 'rotate('+ rotDegrees +'deg)', // added in case CSS3 is standard
    '-webkit-transform' : 'rotate('+ rotDegrees +'deg)',
    '-moz-transform' : 'rotate('+ rotDegrees +'deg)',
    '-ms-transform' : 'rotate('+ rotDegrees +'deg)',
    '-o-transform' : 'rotate('+ rotDegrees +'deg)',
    'margin-left' : '0px',
    'margin-top' : '0px' };
		$(this).css(cssObj);
		dragging = false;
	}
});

// Function to get random number upto m
// http://roshanbh.com.np/2008/09/get-random-number-range-two-numbers-javascript.html
function randomXToY(minVal,maxVal,floatVal) {
	var randVal = minVal+(Math.random()*(maxVal-minVal));
	return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}
});