ウェブ学のすすめ

Study of Web Design & Programing

jQueryでポラロイド風写真ギャラリーを作る「polaroid photo viewer with CSS3 and jQuery」

jQuery

Creating a polaroid photo viewer with CSS3 and jQuery

ポイント

↓書き方例

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("search", "1");
  google.load("jquery", "1.4.2");
  google.load("jqueryui", "1.7.2");
</script>
  • 読み込むjQueryのバージョンによって正しく動作しないときがある
  • divのclassに「polaroid」を指定
<div class="polaroid">   
    <img src="画像パス" alt="代替テキスト">   
    <p>写真の下に表示されるコメント</p>   
</div>

プレビュー

↓別ウィンドウを開いて見る
ポラロイド風ギャラリー

コード

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ポラロイド風ギャラリー</title>
<link href="style.css" rel="stylesheet">
<script src="http://www.google.com/jsapi"></script>
<script src="index.js"></script>
</head>
<body>
<div class="polaroid">
	<img src="http://webgaku.hotcom-web.com/image/01.jpg" alt="">
	<p>ゴール地点</p>
</div>
<div class="polaroid">
	<img src="http://webgaku.hotcom-web.com/image/02.jpg" alt="">
	<p>折り返し地点</p>
</div>
<div class="polaroid">
	<img src="http://webgaku.hotcom-web.com/image/03.jpg" alt="">
	<p>給水地点</p>
</div>
<div class="polaroid">
	<img src="http://webgaku.hotcom-web.com/image/04.jpg" alt="">
	<p>仮装して走っている方も！</p>
</div>
<div class="polaroid">
	<img src="http://webgaku.hotcom-web.com/image/05.jpg" alt="">
	<p>新宿駅周辺</p>
</div>
<div class="polaroid">
	<img src="http://webgaku.hotcom-web.com/image/06.jpg" alt="">
	<p>スタート地点</p>
</div>
<div class="polaroid">
	<img src="http://webgaku.hotcom-web.com/image/07.jpg" alt="">
	<p>大会当日集合場所の様子</p>
</div>
<div class="polaroid">
	<img src="http://webgaku.hotcom-web.com/image/08.jpg" alt="">
	<p>東京マラソンEXPO2012</p>
</div>
<div class="polaroid">
	<img src="http://webgaku.hotcom-web.com/image/09.jpg" alt="">
	<p>事前受付会場。</p>
</div>
<div class="polaroid">
	<img src="http://webgaku.hotcom-web.com/image/10.jpg" alt="">
	<p>東京ビッグサイト</p>
</div>
</body>
</html>
CSS
@charset "utf-8";

body, div, img, p {
    margin:0;
    padding:0;   
}
body {
    background-image:url(http://jsrun.it/assets/c/K/b/k/cKbkT.jpg);
    overflow:hidden;
}
.polaroid {
    width:368px; 
    height:376px; 
    background-image:url(http://jsrun.it/assets/v/9/f/g/v9fgb.jpg); 
    position:absolute;
}
.polaroid img {
    width:335px; 
    height:275px; 
    margin:25px 0 0 15px;
}
.polaroid p {
    color:#2E2E2E;
    font-size:20px;
    text-align:center;
    margin:30px 0 0;
    font-family:
        "ヒラギノ角ゴ Pro W3", 
        "Hiragino Kaku Gothic Pro", 
        "メイリオ", 
        Meiryo, 
        Osaka, 
        "ＭＳ Ｐゴシック", 
        "MS PGothic", 
        sans-serif;
}
JavaScript
/*
* Author:      Marco Kuiper (http://www.marcofolio.net/)
*/
google.load("jquery", "1.3.1");
google.load("jqueryui", "1.8.2");
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);
}
});