Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

polaroid paranoid solenoid

  • Loading branch information...
commit ac43a9eadb752649fb297396aeaa8558f9f64c54 1 parent 43a4db5
@MaxSchultz authored
View
14 css/style.css
@@ -0,0 +1,14 @@
+/*
+ __ _ _ _
+ / _| | (_) | |
+ _ __ ___ __ _ _ __ ___ ___ | |_ ___ | |_ ___ _ __ ___| |_
+| '_ ` _ \ / _` | '__/ __/ _ \| _/ _ \| | |/ _ \ | '_ \ / _ \ __|
+| | | | | | (_| | | | (_| (_) | || (_) | | | (_) || | | | __/ |_
+|_| |_| |_|\__,_|_| \___\___/|_| \___/|_|_|\___(_)_| |_|\___|\__|
+
+*/
+body, div, img, p { padding:0; margin:0; }
+body { overflow:hidden; background-color: #000;); }
+.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 { text-align:center; font-family:Georgia,serif; font-size:20px; color:#2E2E2E; margin-top:15px; }
View
BIN  images/01_colosseum.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/02_vatican.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/03_forum_romanum.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/04_fiat_500.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/05_me_gf.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/06_venetian_gondolas.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/07_pizza.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/08_pool.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/09_florence.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/10_tower_of_pisa.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/bg.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/polaroid-bg.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
44 index.html 100755 → 100644
@@ -1,24 +1,36 @@
-<!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">
-
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<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://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+<script type="text/javascript" src="http://www.google.com/jsapi"></script>
+
+<script type="text/javascript" src="js/lockerscript.js"></script>
+
+
+<script type="text/javascript" src="js/config.js"></script>
+
+
+
+<script type="text/javascript" src="js/script.js"></script>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>Test Viewer</title>
- <style type="text/css">
- @import url("css/reset.css");
- </style>
-</head>
+</head>
<body>
- <h1>Test Viewer</h1>
- <div id="test"></div>
+
+<div class="polaroidcontainer">
+
+
+</div>
+
+
+
+
</body>
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
-<script src="js/script.js"></script>
-<script src='js/config.js'></script> <!-- optional, used for file:/// desktop development convenience -->
-<script src='/static/js/viewer.js'></script> <!-- common locker viewer utilities -->
-</html>
+</html>
View
1  js/config.js
@@ -0,0 +1 @@
+baseUrl = 'https://api.singly.com/fbfc5ed42eb3ae620e27e19b857f4dbd9fd325d5';
View
22 js/lockerscript.js
@@ -0,0 +1,22 @@
+var baseUrl = false;
+
+$(document).ready(function() {
+ if(baseUrl === false) window.alert("Couldn't find your locker, you might need to add a config.js (see https://me.singly.com/Me/devdocs/)");
+});
+
+$(function() {
+ // be careful with the limit, some people have large datasets ;)
+ $.getJSON(baseUrl + '/Me/photos/', {'limit':10}, function(data) {
+
+ if(!data || !data.length) return;
+ var html = "";
+ console.log()
+ for(var i in data)
+ {
+ $("<div class=\"polaroid\"><img src='"+data[i].url+"' /></div> ").appendTo(".polaroidcontainer");
+ }
+
+ setuppolaroids ();
+ });
+});
+
View
105 js/script.js 100755 → 100644
@@ -1,20 +1,87 @@
-var baseUrl = false;
-
-$(document).ready(function() {
- if(baseUrl === false) window.alert("Couldn't find your locker, you might need to add a config.js (see https://me.singly.com/Me/devdocs/)");
-});
-
-$(function() {
- // be careful with the limit, some people have large datasets ;)
- $.getJSON(baseUrl + '/Me/photos/', {'limit':10}, function(data) {
- console.log(data);
- if(!data || !data.length) return;
- var html = "";
- for(var i in data)
- {
- html += "<img src='"+data[i].url+"' width='200' /> ";
- }
- $("#test").html(html);
- });
-});
+/*
+* Author: Marco Kuiper (http://www.marcofolio.net/)
+*/
+function setuppolaroids () {
+ // 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
+ // 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);
+ }
+
+}
Please sign in to comment.
Something went wrong with that request. Please try again.