jQuery Draggable Droppable & Rotatable Multiple Images Polaroid Gallery into Div Specific Area Photo Viewer in Browser Using HTML5 & Javascript Full Project For Beginners

 

 

 

index.html

 

 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
		<title>Polaroid Photo Viewer with jQuery and CSS3</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript" src="js/script.js"></script>
	</head>
	<body>
		<div class="polaroid">
			<img src="images/01_colosseum.png" alt="Colloseum" />
			<p>
				Coloseum in Rome
			</p>
		</div>
		<div class="polaroid">
			<img src="images/02_vatican.png" alt="Vatican" />
			<p>
				Vatican
			</p>
		</div>
		<div class="polaroid">
			<img src="images/03_forum_romanum.png" alt="Forum Romanum" />
			<p>
				Forum Romanum
			</p>
		</div>
		<div class="polaroid">
			<img src="images/04_fiat_500.png" alt="Fiat 500" />
			<p>
				Fiat 500 - Typical Italian car
			</p>
		</div>
		<div class="polaroid">
			<img src="images/05_me_gf.png" alt="Me and my girl in Florance" />
			<p>
				My girl and me in Florance
			</p>
		</div>
		<div class="polaroid">
			<img src="images/06_venetian_gondolas.png" alt="Venetian Gondolas" />
			<p>
				Venetian Gondolas
			</p>
		</div>
		<div class="polaroid">
			<img src="images/07_pizza.png" alt="Pizza" />
			<p>
				Delicious pizza - <strong>the</strong> Italian food
			</p>
		</div>
		<div class="polaroid">
			<img src="images/08_pool.png" alt="Swimming pool" />
			<p>
				Swimming pool near our house
			</p>
		</div>
		<div class="polaroid">
			<img src="images/09_florence.png" alt="Florence" />
			<p>
				Bridge in Florence - Ponte Vecchio
			</p>
		</div>
		<div class="polaroid">
			<img src="images/10_tower_of_pisa.png" alt="Tower of Pisa" />
			<p>
				Leaning Tower of Pisa
			</p>
		</div>
	</body>
</html>

 

 

script.js

 

 

/*
Salam \m/
*/

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)',  // safari only
			'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)' };  // safari only
			$(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', // safari only
				'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' : '', // safari only
				'transform' : 'rotate('+ rotDegrees +'deg)', // added in case CSS3 is standard
				'-webkit-transform' : 'rotate('+ rotDegrees +'deg)', // safari only
				'margin-left' : '0px',
				'margin-top' : '0px' };
			$(this).css(cssObj);
			dragging = false;
		}
	});
	
	// Function to get random number upto m
	
	function randomXToY(minVal,maxVal,floatVal) {
		var randVal = minVal+(Math.random()*(maxVal-minVal));
		return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
	}
	
});

/* Keep \m/ */

 

 

style.css

 

 

/*
 * Salam super \m/
 */
body,div,img,p{padding:0;margin:0;}body{overflow:hidden;background:#393939;}.polaroid{width:368px;height:376px;background:#ddd;box-shadow:0px 0px 2px #696969;border:2px solid #fff;position:absolute;}.polaroid img{width:335px;height:275px;margin:25px 0 0 15px;}.polaroid p{text-align:center;font-family:Georgia,serif;font-size:20px;color:#2E2E2E;margin-top:15px;}

 

 

 

DOWNLOAD FULL SOURCE CODE

 

 

Leave a Reply