迁移仓库

.gitignore

@@ -0,0 +1,108 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Python template
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+.hypothesis/
+.pytest_cache/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# pyenv
+.python-version
+
+# celery beat schedule file
+celerybeat-schedule
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+
+.idea
+status/img

README.md

@@ -0,0 +1,34 @@
+#  个人相册
+简单个人相册
+
+[相册demo](http://www.zeekling.cn/allPhotos/)
+
+
+## 配置
+
+### photo.properties 文件
+
+主要是配置相册中图片的位置
+```
+img.url=/home/zeek/project/photo/static/img
+```
+
+### 相册配置
+
+相册是按照配置相册的目录分类的,一个子文件夹就是一个相册.每个子文件夹都需要一个`info.json`
+
+```json
+{
+	"name":"小令童鞋",
+	"des":"小令童鞋个人相册"
+}
+```
+
+## 启动
+
+执行下面脚本
+
+```sh
+bash startup.sh
+```
+

manage.py

@@ -0,0 +1,15 @@
+#!/usr/bin/env python
+import os
+import sys
+
+if __name__ == '__main__':
+    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'photo.settings')
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            "available on your PYTHONPATH environment variable? Did you "
+            "forget to activate a virtual environment?"
+        ) from exc
+    execute_from_command_line(sys.argv)

photo.properties

@@ -0,0 +1 @@
+img.url=/home/pi/bigdisk/data/opt/photo/static/img

photo/settings.py

@@ -0,0 +1,134 @@
+"""
+Django settings for photo project.
+
+Generated by 'django-admin startproject' using Django 2.1.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/2.1/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/2.1/ref/settings/
+"""
+
+import os
+
+# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/2.1/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = 'wtbz+o+$z3qd^7yqqu=fxr218s_i0hftkwlbpjtu79^l9xsfkw'
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = True
+
+ALLOWED_HOSTS = []
+
+
+# Application definition
+
+INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+]
+
+MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+ROOT_URLCONF = 'photo.urls'
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [os.path.join(BASE_DIR, 'templates')]
+        ,
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = 'photo.wsgi.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/2.1/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
+    }
+}
+
+
+# Password validation
+# https://docs.djangoproject.com/en/2.1/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
+    },
+]
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/2.1/topics/i18n/
+
+LANGUAGE_CODE = 'en-us'
+
+TIME_ZONE = 'UTC'
+
+USE_I18N = True
+
+USE_L10N = True
+
+USE_TZ = True
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/2.1/howto/static-files/
+
+STATIC_URL = '/static/'
+
+## add
+
+
+STATICFILES_DIRS = (
+    os.path.join(BASE_DIR, "static"),
+    # os.path.join(BASE_DIR, 'static').replace('\\', '/'),
+)
+
+STATICFILES_FINDERS = (
+    "django.contrib.staticfiles.finders.FileSystemFinder",
+    "django.contrib.staticfiles.finders.AppDirectoriesFinder",
+)

photo/urls.py

@@ -0,0 +1,25 @@
+"""photo2 URL Configuration
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/2.1/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
+from django.contrib import admin
+from django.urls import path
+from . import view
+
+urlpatterns = [
+    path(r'admin/', admin.site.urls, name='admin'),
+    path(r'photo/data/data.json', view.photo_qry, name='data'),
+    path(r'photo/', view.photo, name='photo'),
+    path(r'allPhotos/', view.photo_all, name='allPhotos')
+]

photo/util/fileUtil.py

@@ -0,0 +1,48 @@
+#!/usr/bin/env python3
+# -*- coding: UTF-8 -*-
+import os
+import json
+
+allow_pics = ['png', 'jpg', 'jpeg']
+
+
+def get_all_pics(path):
+    pics = []
+    for file in os.listdir(path):
+        file_path = os.path.join(path, file)
+        if os.path.isdir(file_path):
+            continue
+        allow_type = False
+        for pic_type in allow_pics:
+            if str(file).lower().endswith(pic_type):
+                allow_type = True
+                break
+        if allow_type:
+            pics.append(file)
+    return pics
+
+
+def get_all_folds(path):
+    folds = []
+    for fold in os.listdir(path):
+        fold_path = os.path.join(path, fold)
+        if os.path.isdir(fold_path):
+            entity = {'fold': fold, 'fold_path': fold_path}
+            folds.append(entity)
+
+    return folds
+
+
+def read_file_json(path):
+    if not os.path.exists(path) or not os.path.isfile(path):
+        return json.loads('{"name": "default", "des":"默认描述"}')
+    f = open(path, 'r')
+    lines = f.readlines()
+    json_str = ""
+    for line in lines:
+        json_str += line
+    return json.loads(json_str)
+
+# path = "/home/zeek/project/photo/static/img"
+# pics = get_all_pics(path)
+# print(pics)

photo/util/properties.py

@@ -0,0 +1,28 @@
+# -*- coding: UTF-8 -*-
+
+
+class properties(object):
+
+    def __init__(self, filename):
+        self.filename = filename
+        self.properties = {}
+
+    def get_properties(self):
+        try:
+            pro_file = open(self.filename)
+            for line in pro_file.readlines():
+                line = line.strip().replace('\n', '')
+                if line.find('=') > 0:
+                    s = line.split('=')
+                    self.properties[s[0].strip()] = s[1]
+                else:
+                    self.properties[line] = ''
+        except Exception as e:
+            raise e
+        else:
+            pro_file.close()
+        return self.properties
+
+
+# tmp = properties('../photo.properties').get_properties()
+# print(tmp)

photo/view.py

@@ -0,0 +1,89 @@
+# -*- coding: UTF-8 -*-
+
+import json
+from django.shortcuts import render
+from django.http import HttpResponse
+from photo.util import fileUtil, properties
+import os
+
+
+prop = properties.properties(os.path.abspath("photo.properties")).get_properties()
+
+
+def photo(request):
+    path = prop['img.url']
+    fold = ""
+    if request.method == "GET":
+        fold = request.GET.get("name", "")
+
+    if request.method == "POST":
+        fold = request.POST.get("name", "")
+    new_path = path + "/" + fold
+    context = {'index': 'Hello World!', 'name': fold}
+    info = fileUtil.read_file_json(new_path + '/info.json')
+    if 'name' in info:
+        context['title'] = info['name']
+    return render(request, 'photo/index.html', context)
+
+
+def get_pics(path, fold=""):
+    pics = fileUtil.get_all_pics(path)
+    data = []
+    for pic in pics:
+        if fold != "":
+            tmp_pic = {'name': 'img/' + fold + "/" + pic, 'caption': ''}
+        else:
+            tmp_pic = {'name': 'img/' + pic, 'caption': ''}
+        data.append(tmp_pic)
+
+    if len(data) >= 2:
+        data.append(data[1])
+
+    return data
+
+
+def photo_all(request):
+    path = prop['img.url']
+    data = []
+    folds = fileUtil.get_all_folds(path)
+    folds.append({'fold': '', 'fold_path': path})
+    for fold in folds:
+        pics = fileUtil.get_all_pics(fold['fold_path'])
+        if len(pics) == 0:
+            continue
+        info = fileUtil.read_file_json(fold['fold_path'] + '/info.json')
+        entity = {'name': info['name'], 'des': info['des'],
+                  'fold': fold['fold']}
+        if fold['fold'] == '':
+            entity['pic'] = 'img/' + pics[0]
+        else:
+            entity['pic'] = 'img/' + fold['fold'] + '/' + pics[0]
+        data.append(entity)
+    context = {'data': data, 'success': 'true'}
+    print(context)
+    # return HttpResponse(json.dumps(data), content_type="application/json")
+    return render(request, 'photo/photos.html', context)
+
+
+def photo_qry(request):
+    path = prop['img.url']
+    fold = ""
+    if request.method == "GET":
+        fold = request.GET.get("name", "")
+
+    if request.method == "POST":
+        fold = request.POST.get("name", "")
+
+    new_path = ""
+    data = []
+    if fold != "":
+        new_path = path + "/" + fold
+        data = get_pics(new_path, fold=fold)
+
+    if len(data) == 0:
+        if fold != "":
+            print("fold %s has none pics" % fold)
+        data = get_pics(path)
+    # print(data)
+    return HttpResponse(json.dumps(data), content_type="application/json")
+

photo/wsgi.py

@@ -0,0 +1,16 @@
+"""
+WSGI config for photo2 project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/2.1/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'photo.settings')
+
+application = get_wsgi_application()

startup.sh

@@ -0,0 +1,2 @@
+#/usr/bin/python3 manage.py runserver 127.0.0.1:8008 >/tmp/photo.log 2>&1 &
+/usr/bin/python3 manage.py runserver 127.0.0.1:8008 >/dev/null &

static/.gitignore

@@ -0,0 +1 @@
+img/

static/css/polaroid-gallery.css

@@ -0,0 +1,61 @@
+body {
+    background-color: #F2EBE2;
+}
+
+.fullscreen {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+}
+
+figure {
+    width: 200px;
+    position: absolute;
+    padding: 10px;
+    margin: 0 auto;
+    text-align: center;
+    background-color: white;
+    -webkit-transition: all 0.6s;
+    -moz-transition: all 0.6s;
+    transition: all 0.6s;
+    cursor: pointer;
+}
+
+figure img {
+    height: auto;
+    max-width: 100%;
+    margin: 0 auto;
+    margin-bottom: 15px;
+}
+
+figure figcaption {
+    font-family: Comic Sans, Comic Sans MS, cursive;
+    color: #8F8476;
+}
+
+.navbar {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    padding: 10px;
+    text-align: center;
+    background-color: black;
+    z-index: 999;
+}
+
+button {
+    background-color: transparent;
+    padding: 10px 24px;
+    color: #ffffff;
+    border: 2px solid black;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    transition: 0.4s;
+}
+
+button:hover {
+    background-color: #f44336;
+    color: white;
+}

static/css/reset.css

@@ -0,0 +1 @@
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

static/css/style.css

@@ -0,0 +1,108 @@
+
+@import url(http://weloveiconfonts.com/api/?family=entypo);
+[class*="entypo-"]:before {
+  font-family: 'entypo', sans-serif;
+}
+
+body {
+  background-color: #eaeaea;
+  font-family: 'Roboto';
+}
+
+.center-block, .carrousel, .carrousel .wrapper {
+  margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.gallery {
+  list-style: none;
+}
+
+.portrait {
+  width: 150px;
+  box-shadow: 0 0 3px #555;
+  background-color: #FFF;
+  padding: 5px;
+  margin: 7px 0px 0px 7px;
+  text-align: center;
+  cursor: pointer;
+  float: left;
+  -moz-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+.portrait:hover {
+  -moz-transform: scale(1.04, 1.04);
+  -ms-transform: scale(1.04, 1.04);
+  -webkit-transform: scale(1.04, 1.04);
+  transform: scale(1.04, 1.04);
+  box-shadow: 0 0 5px #555;
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
+}
+.portrait .pic {
+  width: 150px;
+  height: 210px;
+  margin: 5px 0;
+}
+.portrait .date {
+  font-size: 10px;
+  font-weight: bold;
+}
+.portrait .foot {
+  font-size: 11px;
+}
+.portrait .foot .heart {
+  margin-left: 4px;
+}
+
+.carrousel {
+  position: fixed;
+  background-color: rgba(10, 10, 10, 0.8);
+  display: none;
+}
+.carrousel .wrapper {
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+  /*.loading{
+    color: #FFF;
+    font-size: 24px;
+    margin: 40% 40%;
+    display: none;
+  }*/
+}
+.carrousel .wrapper > img {
+  width: 100%;
+}
+
+.close {
+  cursor: pointer;
+  color: #FFF;
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  font-size: 18px;
+}
+.close:hover {
+  font-size: 20px;
+  color: #DDD;
+}
+
+.content{
+	width: 85%;
+	margin: auto;
+}
+.brief{
+   width:85%;
+   margin: auto;
+   margin-top:20px;
+   margin-bottom:20px;
+}

static/css/style.scss

@@ -0,0 +1,101 @@
+@import "compass/css3";
+
+@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
+@import url(http://weloveiconfonts.com/api/?family=entypo);
+
+[class*="entypo-"]:before {
+  font-family: 'entypo', sans-serif;
+}
+
+body{
+  background-color: #eaeaea;
+  font-family: 'Roboto';
+}
+
+.center-block{
+  margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.gallery{
+  list-style: none;
+}
+
+//gallery items width
+$width: 150px;
+//preview image size
+$width-wide: 600px;
+$height-wide: 600px;
+
+.portrait{
+  width: $width;
+  box-shadow: 0 0 3px #555;
+  background-color: #FFF;
+  padding: 5px;
+  margin: 7px 0px 0px 7px;
+  text-align: center;
+  cursor: pointer;
+  float: left;
+  @include transition( all 0.3s ease );
+  @include filter(grayscale(100%));
+  
+  &:hover{
+    @include scale(1.04);
+    box-shadow: 0 0 5px #555;
+    @include filter(grayscale(0%));
+  }
+  .pic{
+    width: 100%;
+    margin: 5px 0;
+  }
+  .date{
+    font-size: 10px;
+    font-weight: bold;
+  }
+  .foot{
+    font-size: 11px;
+    .comment{}
+    .heart{
+      margin-left: 4px;
+    }
+  }
+}//.portrait
+
+.carrousel{
+  @extend .center-block;
+  position: fixed;
+  background-color: rgba(10, 10, 10, 0.8);
+  display: none;
+  .wrapper{
+    @extend .center-block;
+    width: $width-wide;
+    height: $height-wide;
+    overflow: hidden;
+    /*.loading{
+      color: #FFF;
+      font-size: 24px;
+      margin: 40% 40%;
+      display: none;
+    }*/
+    >img{
+      width: 100%;
+    }
+  }
+}
+
+.close{
+  cursor: pointer;
+  color: #FFF;
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  font-size: 18px;
+  &:hover{
+    font-size: 20px;
+    color: #DDD;
+  }
+}

static/data/data.json

@@ -0,0 +1,62 @@
+[
+{
+"name": "../img/1.jpg", 
+"caption": "girl-1"
+},
+{
+"name": "../img/2.jpg",
+"caption": "girl-2"
+},
+{
+"name": "../img/3.jpg",
+"caption": "girl-3"
+},
+{
+"name": "../img/4.jpg",
+"caption": "girl-4"
+},
+{
+"name": "../img/5.jpg", 
+"caption": "girl-5"
+},
+{
+"name": "../img/6.jpg", 
+"caption": "girl-6"
+},
+{
+"name": "../img/7.jpg", 
+"caption": "girl-7"
+},
+{
+"name": "../img/8.jpg", 
+"caption": "girl-8"
+},
+{
+"name": "../img/9.jpg",
+"caption": "girl-9"
+},
+{
+"name": "../img/10.jpg",
+"caption": "girl-10"
+},
+{
+"name": "../img/11.jpg",
+"caption": "girl-11"
+},
+{
+"name": "../img/12.jpg",
+"caption": "girl-12"
+},
+{
+"name": "../img/13.jpg",
+"caption": "girl-13"
+},
+{
+"name": "../img/14.jpg",
+"caption": "girl-14"
+},
+{
+"name": "../img/15.jpg",
+"caption": "girl-15"
+}
+]

static/js/index.js

@@ -0,0 +1,12 @@
+var carrousel = $( ".carrousel" );
+
+$( ".portrait" ).click( function(e){
+  var src = $(this).find(".pic").attr( "data-src-wide" );
+  carrousel.find("img").attr( "src", src );
+  carrousel.fadeIn( 200 );
+});
+
+carrousel.find( ".close" ).click( function(e){
+  carrousel.find( "img" ).attr( "src", '' );
+  carrousel.fadeOut( 200 );
+} );

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 += '<figure id="' + i + '">' +
+                '<img src="/static/' + arr[i].name + '" alt="' + arr[i].name + '"/>' +
+                '<figcaption>' + arr[i].caption + '</figcaption>' +
+                '</figure>';
+        }
+        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;
+})();

templates/photo/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+{% load static %}
+<html lang="zh">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>{{ title }}</title>
+	<link rel="stylesheet" type="text/css" href="{% static 'css/polaroid-gallery.css'%}"/>
+	<!--[if IE]>
+		<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
+	<![endif]-->
+</head>
+<body class="fullscreen">
+	<div id="gallery" class="fullscreen"></div>
+	<div id="nav" class="navbar">
+	    <button id="preview">&lt; 前一张</button>
+	    <button id="next">下一张 &gt;</button>
+	</div>
+
+
+	<script type="text/javascript" src="{% static 'js/polaroid-gallery.js' %}"></script>
+	<script>
+	    window.onload = function () {
+		    new polaroidGallery("/photo/data/data.json?name={{ name }}");
+	    }
+	</script>
+</body>
+</html>

templates/photo/photos.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+{% load static %}
+<html lang="zh">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+  <title>小令童鞋相册</title>
+  <link rel="stylesheet" href="{% static 'css/reset.css' %}">
+  <link rel="stylesheet" href="{% static 'css/style.css' %}" media="screen" type="text/css" />
+
+</head>
+
+<body>
+<div class="content">
+	<div class="brief"> </div>
+{% for photo in data %}
+  <ul class="gallery">
+  <li class="portrait">
+	  <span class="date">{{ photo.name }}</span>
+	  <a href="{% url 'photo' %}?name={{ photo.fold }}">
+		 <img class="pic"  src="{% static '/' %}{{ photo.pic }}" alt="BINGOO" />
+	 </a>
+    <div class="foot">
+		<span class="entypo-comment comment">{{ photo.des }}</span>
+    </div>
+  </li>
+{% endfor %}
+
+</div>
+<div class="carrousel">
+  <span class="close entypo-cancel"></span>
+  <span class="entypo-arrows-ccw loanding"> Loading large photo</span>
+  <div class="wrapper">
+    <img src="" alt="BINGOO" />
+  </div>
+</div>
+
+  <script src="{% static 'js/jquery.js' %}"></script>
+<!--
+  <script src="{% static 'js/index.js' %}"></script>
+	-->
+<div style="text-align:center;clear:both;">
+<!--
+	<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
+    <script src="/follow.js" type="text/javascript"></script>
+	-->
+</div>
+</body>
+
+</html>