").append(p.parseHTML(e)).find(r):e)}).complete(n&&function(e,t){o.each(n,i||[e.responseText,t,e])}),this},p.expr.filters.animated=function(e){return p.grep(p.timers,function(t){return e===t.elem}).length};var ir=e.document.documentElement;p.offset={setOffset:function(e,t,n){var r,i,s,o,u,a,f,l=p.css(e,"position"),c=p(e),h={};l==="static"&&(e.style.position="relative"),u=c.offset(),s=p.css(e,"top"),a=p.css(e,"left"),f=(l==="absolute"||l==="fixed")&&p.inArray("auto",[s,a])>-1,f?(r=c.position(),o=r.top,i=r.left):(o=parseFloat(s)||0,i=parseFloat(a)||0),p.isFunction(t)&&(t=t.call(e,n,u)),t.top!=null&&(h.top=t.top-u.top+o),t.left!=null&&(h.left=t.left-u.left+i),"using"in t?t.using.call(e,h):c.css(h)}},p.fn.extend({offset:function(e){if(arguments.length)return e===undefined?this:this.each(function(t){p.offset.setOffset(this,e,t)});var t,n,r={top:0,left:0},i=this[0],s=i&&i.ownerDocument;if(!s)return;return t=s.documentElement,p.contains(t,i)?(typeof i.getBoundingClientRect!==j&&(r=i.getBoundingClientRect()),n=sr(s),{top:r.top+(n.pageYOffset||t.scrollTop)-(t.clientTop||0),left:r.left+(n.pageXOffset||t.scrollLeft)-(t.clientLeft||0)}):r},position:function(){if(!this[0])return;var e,t,n={top:0,left:0},r=this[0];return p.css(r,"position")==="fixed"?t=r.getBoundingClientRect():(e=this.offsetParent(),t=this.offset(),p.nodeName(e[0],"html")||(n=e.offset()),n.top+=p.css(e[0],"borderTopWidth",!0),n.left+=p.css(e[0],"borderLeftWidth",!0)),{top:t.top-n.top-p.css(r,"marginTop",!0),left:t.left-n.left-p.css(r,"marginLeft",!0)}},offsetParent:function(){return this.map(function(){var e=this.offsetParent||ir;while(e&&!p.nodeName(e,"html")&&p.css(e,"position")==="static")e=e.offsetParent;return e||ir})}}),p.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(e,t){var n=/Y/.test(t);p.fn[e]=function(r){return J(this,function(e,r,i){var s=sr(e);if(i===undefined)return s?t in s?s[t]:s.document.documentElement[r]:e[r];s?s.scrollTo(n?p(s).scrollLeft():i,n?i:p(s).scrollTop()):e[r]=i},e,r,arguments.length,null)}}),p.each(["top","left"],function(e,t){p.cssHooks[t]=Ft(c.pixelPosition,function(e,n){if(n)return n=Bt(e,t),Pt.test(n)?p(e).position()[t]+"px":n})}),p.each({Height:"height",Width:"width"},function(e,t){p.each({padding:"inner"+e,content:t,"":"outer"+e},function(n,r){p.fn[r]=function(r,i){var s=arguments.length&&(n||typeof r!="boolean"),o=n||(r===!0||i===!0?"margin":"border");return J(this,function(t,n,r){var i;return p.isWindow(t)?t.document.documentElement["client"+e]:t.nodeType===9?(i=t.documentElement,Math.max(t.body["scroll"+e],i["scroll"+e],t.body["offset"+e],i["offset"+e],i["client"+e])):r===undefined?p.css(t,n,o):p.style(t,n,r,o)},t,s?r:undefined,s,null)}})}),p.fn.size=function(){return this.length},p.fn.andSelf=p.fn.addBack,typeof define=="function"&&define.amd&&define("jquery",[],function(){return p});var or=e.jQuery,ur=e.$;return p.noConflict=function(t){return e.$===p&&(e.$=ur),t&&e.jQuery===p&&(e.jQuery=or),p},typeof t===j&&(e.jQuery=e.$=p),p});
\ No newline at end of file
diff --git a/static/js/polaroid-gallery.js b/static/js/polaroid-gallery.js
new file mode 100644
index 0000000..a8a1965
--- /dev/null
+++ b/static/js/polaroid-gallery.js
@@ -0,0 +1,175 @@
+var polaroidGallery = (function () {
+ var dataSize = {};
+ var dataLength = 0;
+ var currentItem = null;
+ var navbarHeight = 60;
+ var resizeTimeout = null;
+ var xmlhttp = new XMLHttpRequest();
+ var url = "data/data.json";
+
+ function polaroidGallery(url) {
+ observe();
+ xmlhttp.onreadystatechange = function () {
+ if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+ var myArr = JSON.parse(xmlhttp.responseText);
+ setGallery(myArr);
+
+ init();
+ }
+ };
+ xmlhttp.open("GET", url, true);
+ xmlhttp.send();
+ }
+
+ function setGallery(arr) {
+ var out = "";
+ var i;
+ for (i = 0; i < arr.length; i++) {
+ out += '
';
+ }
+ document.getElementById("gallery").innerHTML = out;
+ }
+
+ function observe() {
+ var observeDOM = (function () {
+ var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
+ eventListenerSupported = window.addEventListener;
+
+ return function (obj, callback) {
+ if (MutationObserver) {
+ var obs = new MutationObserver(function (mutations, observer) {
+ if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
+ callback(mutations);
+ });
+
+ obs.observe(obj, { childList: true, subtree: false });
+ }
+ else if (eventListenerSupported) {
+ obj.addEventListener('DOMNodeInserted', callback, false);
+ }
+ }
+ })();
+
+ observeDOM(document.getElementById('gallery'), function (mutations) {
+ var gallery = [].slice.call(mutations[0].addedNodes);
+ var zIndex = 1;
+ gallery.forEach(function (item) {
+ var img = item.getElementsByTagName('img')[0];
+ var first = true;
+ img.addEventListener('load', function () {
+ if (first) {
+ currentItem = item;
+ first = false;
+ }
+ dataSize[item.id] = {item: item, width: item.offsetWidth, height: item.offsetHeight};
+
+ dataLength++;
+
+ item.addEventListener('click', function () {
+ select(item);
+ shuffleAll();
+ });
+
+ shuffle(item, zIndex++);
+ })
+ });
+ });
+ }
+
+ function init() {
+ navbarHeight = document.getElementById("nav").offsetHeight;
+ navigation();
+
+ window.addEventListener('resize', function () {
+ if (resizeTimeout) {
+ clearTimeout(resizeTimeout);
+ }
+ resizeTimeout = setTimeout(function () {
+ shuffleAll();
+ if (currentItem) {
+ select(currentItem);
+ }
+ }, 100);
+ });
+ }
+
+ function select(item) {
+ var scale = 1.8;
+ var rotRandomD = 0;
+
+ var initWidth = dataSize[item.id].width;
+ var initHeight = dataSize[item.id].height;
+
+ var newWidth = (initWidth * scale);
+ var newHeight = initHeight * (newWidth / initWidth);
+
+ var x = (window.innerWidth - newWidth) / 2;
+ var y = (window.innerHeight - navbarHeight - newHeight) / 2;
+
+ item.style.transformOrigin = '0 0';
+ item.style.WebkitTransform = 'translate(' + x + 'px,' + y + 'px) rotate(' + rotRandomD + 'deg) scale(' + scale + ',' + scale + ')';
+ item.style.msTransform = 'translate(' + x + 'px,' + y + 'px) rotate(' + rotRandomD + 'deg) scale(' + scale + ',' + scale + ')';
+ item.style.transform = 'translate(' + x + 'px,' + y + 'px) rotate(' + rotRandomD + 'deg) scale(' + scale + ',' + scale + ')';
+ item.style.zIndex = 999;
+
+ currentItem = item;
+ }
+
+ function shuffle(item, zIndex) {
+ var randomX = Math.random();
+ var randomY = Math.random();
+ var maxR = 45;
+ var minR = -45;
+ var rotRandomD = Math.random() * (maxR - minR) + minR;
+ var rotRandomR = rotRandomD * Math.PI / 180;
+
+ var rotatedW = Math.abs(item.offsetWidth * Math.cos(rotRandomR)) + Math.abs(item.offsetHeight * Math.sin(rotRandomR));
+ var rotatedH = Math.abs(item.offsetWidth * Math.sin(rotRandomR)) + Math.abs(item.offsetHeight * Math.cos(rotRandomR));
+
+ var x = Math.floor((window.innerWidth - rotatedW) * randomX);
+ var y = Math.floor((window.innerHeight - rotatedH) * randomY);
+
+ item.style.transformOrigin = '0 0';
+ item.style.WebkitTransform = 'translate(' + x + 'px,' + y + 'px) rotate(' + rotRandomD + 'deg) scale(1)';
+ item.style.msTransform = 'translate(' + x + 'px,' + y + 'px) rotate(' + rotRandomD + 'deg) scale(1)';
+ item.style.transform = 'translate(' + x + 'px,' + y + 'px) rotate(' + rotRandomD + 'deg) scale(1)';
+ item.style.zIndex = zIndex;
+ }
+
+ function shuffleAll() {
+ var zIndex = 0;
+ for (var id in dataSize) {
+ if (id != currentItem.id) {
+ shuffle(dataSize[id].item, zIndex++);
+ }
+ }
+ }
+
+ function navigation() {
+ var next = document.getElementById('next');
+ var preview = document.getElementById('preview');
+
+ next.addEventListener('click', function () {
+ var currentIndex = Number(currentItem.id) + 1;
+ if (currentIndex >= dataLength) {
+ currentIndex = 0
+ }
+ select(dataSize[currentIndex].item);
+ shuffleAll();
+ });
+
+ preview.addEventListener('click', function () {
+ var currentIndex = Number(currentItem.id) - 1;
+ if (currentIndex < 0) {
+ currentIndex = dataLength - 1
+ }
+ select(dataSize[currentIndex].item);
+ shuffleAll();
+ })
+ }
+
+ return polaroidGallery;
+})();
diff --git a/templates/photo/index.html b/templates/photo/index.html
new file mode 100644
index 0000000..1db0fa4
--- /dev/null
+++ b/templates/photo/index.html
@@ -0,0 +1,29 @@
+
+{% load static %}
+
+
+
+
+
+
{{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/templates/photo/photos.html b/templates/photo/photos.html
new file mode 100644
index 0000000..720d6d7
--- /dev/null
+++ b/templates/photo/photos.html
@@ -0,0 +1,50 @@
+
+{% load static %}
+
+
+
+
+
小令童鞋相册
+
+
+
+
+
+
+
+
+{% for photo in data %}
+
+ -
+ {{ photo.name }}
+
+
+
+
+
+{% endfor %}
+
+
+
+
+
Loading large photo
+
+
+
+
+
+
+
+
+
+
+
+
+