fotorama add, popup add

Author: movie4

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "pyramid_pages",
-  "version": "0.0.4",
+  "version": "0.0.1",
   "homepage": "https://github.com/ITCase/pyramid_pages",
   "authors": [
     "ITCase <info@itcase.pro>"

example/.bowerrc

@@ -0,0 +1 @@
+{ "strict-ssl": false,  "https-proxy": "" }

example/bower.json

@@ -0,0 +1,29 @@
+{
+  "name": "pyramid_pages",
+  "version": "0.0.1",
+  "homepage": "https://github.com/ITCase/pyramid_sacrud_pages",
+  "authors": [
+    "Arkadiy Zamaraev <arkadiy@bk.ru>"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "fotorama": "~4.6.4"
+  },
+  "overrides": {
+    "fotorama": {
+      "main": [
+        "fotorama.css",
+        "fotorama.js",
+        "fotorama.png",
+        "fotorama@2x.png"
+      ]
+    }
+  }
+}

example/gulpfile.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var gulp = require('gulp'),
+    plugins = require('gulp-load-plugins')({ pattern: ['gulp-*', 'gulp.*'] });
+
+var map = require('vinyl-map'),
+    mainBowerFiles = require('main-bower-files');
+
+var CSS_PATH = './static/css/',
+    JS_PATH = './static/js/',
+    IMG_PATH = './static/img/';
+
+
+gulp.task('bower-js', function() {
+  return gulp.src(mainBowerFiles({ filter: (/.*\.(js|map)$/i) }),
+                 { base: 'bower_components' })
+  .pipe(plugins.rename(function (path) {
+    path.dirname = path.dirname.slice(0, path.dirname.indexOf('/') + 1);
+  }))
+  .pipe(gulp.dest(JS_PATH + 'vendor/'))
+  .pipe(map(function(code, filename) {
+    plugins.util.log('Bower JS ' +
+    plugins.util.colors.green(filename));
+  }));
+});
+
+
+gulp.task('bower-css', function() {
+  return gulp.src(mainBowerFiles({ filter: (/.*\.(css)$/i) }),
+                 { base: 'bower_components' })
+  .pipe(plugins.rename(function (path) {
+    path.dirname = path.dirname.slice(0, path.dirname.indexOf('/') + 1);
+  }))
+  .pipe(gulp.dest(CSS_PATH + 'vendor/'))
+  .pipe(map(function(code, filename) {
+    plugins.util.log('Bower CSS ' +
+    plugins.util.colors.green(filename));
+  }));
+});
+
+
+gulp.task('bower-img', function() {
+  return gulp.src(mainBowerFiles({ filter: (/.*\.(png|jpg|gif)$/i) }),
+                 { base: 'bower_components' })
+  .pipe(plugins.rename(function (path) {
+    path.dirname = path.dirname.slice(0, path.dirname.indexOf('/') + 1);
+  }))
+  .pipe(gulp.dest(IMG_PATH))
+  .pipe(map(function(code, filename) {
+    plugins.util.log('Bower Images ' +
+    plugins.util.colors.green(filename));
+  }));
+});
+
+
+gulp.task('bower', ['bower-js', 'bower-css', 'bower-img']);

example/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "pyramid_pages",
+  "title": "Pyramid Pages",
+  "description": "pyramid_pages provides a collections of pages to your Pyramid application. This is very similar to django.contrib.flatpages but with a tree structure and traversal algorithm in URL dispath.",
+  "version": "0.0.1",
+  "homepage": "https://github.com/ITCase/pyramid_pages",
+  "author": {
+    "name": "ITCase",
+    "email": "info@itcase.pro"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:ITCase/pyramid_pages.git"
+  },
+  "bugs": "https://github.com/ITCase/pyramid_pages/issues",
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "http://opensource.org/licenses/MIT"
+    }
+  ],
+  "engines": {
+    "node": ">= 0.8.0"
+  },
+  "devDependencies": {
+    "gulp": "^3.8.11",
+    "gulp-rename": "^1.2.2",
+    "gulp-util": "^3.0.5",
+    "main-bower-files": "^2.8.0",
+    "vinyl-map": "^1.0.1"
+  }
+}

example/static/css/vendor/fotorama.css

@@ -1,12 +1,29 @@
 {% extends 'pyramid_pages/base.jinja2' %}
 
 {% block content %}
+    <link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
     {{ super() }}
+
+     <div class="popup">
+        <div class="popup-background">&nbsp;</div>
+        <div class="popup-inner">
+            <div class="popup-inner__ie">
+                <div class="popup-inner__content">
+                    <a href="#" class="popup-inner__content-link">
+                        <span class="popup-inner__content-link-text">close</span>
+                    </a>
+                    <div class="popup-inner__content-gallery fotorama" data-auto="false">&nbsp;</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div class="gallery">
         <div class="gallery-list">
             {% for photo in context.node.photos %}
                 <div class="gallery-list__item">
-                    <a href="{{ photo.path }}" class="gallery-list__item-link" target="_blank">
+                    <a href="{{ photo.path }}" class="gallery-list__item-link" data-fotorama-image-id="{{ loop.index }}">
                         <img class="gallery-list__item-image" src="{{ photo.path }}" />
                     </a>
                 </div>