[Image View] added gallery plugin to display full image on image-view image click

frappe/public/build.json

@@ -193,7 +193,10 @@
 		"public/css/list.css",
 		"public/css/tag-it.css",
 		"public/css/calendar.css",
-		"public/css/gantt.css"
+		"public/css/gantt.css",
+
+		"public/js/lib/gallery/css/blueimp-gallery.css",
+		"public/js/lib/gallery/css/blueimp-gallery-indicator.css"
 	],
 	"js/list.min.js": [
 		"public/js/frappe/ui/listing.html",
@@ -219,6 +222,9 @@
 		"public/js/frappe/views/calendar_base.js",
 		"public/js/frappe/views/calendar.js",
 		"public/js/frappe/views/ganttview.js",
+
+		"public/js/frappe/list/imageview.js",
+		"public/js/frappe/list/blueimp-gallery.html",
 		"public/js/frappe/list/image_view_item_row.html",
 		"public/js/frappe/list/image_view_item_main_head.html"
 	],

frappe/public/js/frappe/list/blueimp-gallery.html

@@ -0,0 +1,9 @@
+<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
+    <div class="slides"></div>
+    <h3 class="title"></h3>
+    <a class="prev">‹</a>
+    <a class="next">›</a>
+    <a class="close">×</a>
+    <a class="play-pause"></a>
+    <ol class="indicator"></ol>
+</div>

frappe/public/js/frappe/list/imageview.js

@@ -0,0 +1,59 @@
+frappe.views.ImageView = Class.extend({
+	init: function(opts){
+		this.doctype = opts.doctype;
+		this.docname = opts.docname;
+		this.container = opts.container;
+
+		this.get_images(this.doctype, this.docname);
+	},
+
+	get_images: function(doctype, docname){
+		/*	get the list of all the Images associated with doc */
+		var me = this;
+
+		frappe.call({
+			method: "frappe.client.get_list",
+			args: {
+				doctype: "File",
+				fields: [
+					"file_name as title", "file_url as href",
+					"'image/*' as type", "ifnull(thumbnail_url, '') as thumbnail"
+				],
+				filters: [
+					["File", "attached_to_doctype", "=", this.doctype],
+					["File", "attached_to_name", "=", this.docname],
+					["File", "is_folder", "!=", 1]
+				]
+			},
+			freeze: true,
+			freeze_message: "Fetching Images ..",
+			callback: function(r){
+				if(!r.message){
+					msgprint("No Images found")
+				} else{
+					me.render(r.message);
+				}
+			}
+		});
+	},
+
+	render: function(image_list){
+		var me = this;
+
+		frappe.require(["assets/frappe/js/lib/gallery/js/blueimp-gallery.js",
+			"assets/frappe/js/lib/gallery/js/blueimp-gallery-indicator.js"], function(){
+			var gallery = blueimp.Gallery(image_list, me.get_options());
+		})
+	},
+
+	get_options: function(){
+		/* options for the gallery plugin */
+		return {
+			indicatorContainer: 'ol',
+			thumbnailIndicators: true,
+			thumbnailProperty: 'thumbnail',
+			activeIndicatorClass: 'active',
+			container: this.container.find(".blueimp-gallery")
+		}
+	}
+});

frappe/public/js/frappe/ui/listing.js

@@ -315,11 +315,28 @@ frappe.ui.Listing = Class.extend({
 			}
 		}
 		else{
-			while (values.length) {
-				row = this.add_row(values[0]);
+			var cols = values.slice();
+			while (cols.length) {
+				row = this.add_row(cols[0]);
 				$("<div class='row image-view-marker'></div>").appendTo(row)
-				this.render_image_view_row(row, values.splice(0, 4), this, i);
+				this.render_image_view_row(row, cols.splice(0, 4), this, i);
 			}
+
+			// remove previous gallery container
+			this.$w.find(".blueimp-gallery").remove();
+			// append gallery div
+			var gallery = frappe.render_template("blueimp-gallery", {});
+			$(gallery).appendTo(this.$w);
+
+			var me = this
+			this.$w.find(".image-field").click(function(event){
+				opts = {
+					doctype: me.doctype,
+					docname: $(event.target).attr('data-name'),
+					container: me.$w
+				};
+				new frappe.views.ImageView(opts);
+			})			
 		}
 	},
 	update_paging: function(values) {

frappe/public/js/lib/gallery/css/blueimp-gallery-indicator.css

@@ -0,0 +1,72 @@
+@charset "UTF-8";
+/*
+ * blueimp Gallery Indicator CSS
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+.blueimp-gallery > .indicator {
+  position: absolute;
+  top: auto;
+  right: 15px;
+  bottom: 15px;
+  left: 15px;
+  margin: 0 40px;
+  padding: 0;
+  list-style: none;
+  text-align: center;
+  line-height: 10px;
+  display: none;
+}
+.blueimp-gallery > .indicator > li {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  margin: 6px 3px 0 3px;
+  -webkit-box-sizing: content-box;
+     -moz-box-sizing: content-box;
+          box-sizing: content-box;
+  border: 1px solid transparent;
+  background: #ccc;
+  background: rgba(255, 255, 255, 0.25) center no-repeat;
+  border-radius: 5px;
+  box-shadow: 0 0 2px #000;
+  opacity: 0.5;
+  cursor: pointer;
+  background-size: 40px 40px;
+}
+.blueimp-gallery > .indicator > li:hover,
+.blueimp-gallery > .indicator > .active {
+  background-color: #fff;
+  border-color: #fff;
+  opacity: 1;
+}
+.blueimp-gallery-controls > .indicator {
+  display: block;
+  /* Fix z-index issues (controls behind slide element) on Android: */
+  -webkit-transform: translateZ(0);
+     -moz-transform: translateZ(0);
+      -ms-transform: translateZ(0);
+       -o-transform: translateZ(0);
+          transform: translateZ(0);
+}
+.blueimp-gallery-single > .indicator {
+  display: none;
+}
+.blueimp-gallery > .indicator {
+  -webkit-user-select: none;
+   -khtml-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+/* IE7 fixes */
+*+html .blueimp-gallery > .indicator > li {
+  display: inline;
+}

frappe/public/js/lib/gallery/css/blueimp-gallery-video.css

@@ -0,0 +1,87 @@
+@charset "UTF-8";
+/*
+ * blueimp Gallery Video Factory CSS
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+.blueimp-gallery > .slides > .slide > .video-content > img {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  /* Prevent artifacts in Mozilla Firefox: */
+  -moz-backface-visibility: hidden;
+}
+.blueimp-gallery > .slides > .slide > .video-content > video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.blueimp-gallery > .slides > .slide > .video-content > iframe {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+.blueimp-gallery > .slides > .slide > .video-playing > iframe {
+  top: 0;
+}
+.blueimp-gallery > .slides > .slide > .video-content > a {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  margin: -64px auto 0;
+  width: 128px;
+  height: 128px;
+  background: url(../img/video-play.png) center no-repeat;
+  opacity: 0.8;
+  cursor: pointer;
+}
+.blueimp-gallery > .slides > .slide > .video-content > a:hover {
+  opacity: 1;
+}
+.blueimp-gallery > .slides > .slide > .video-playing > a,
+.blueimp-gallery > .slides > .slide > .video-playing > img {
+  display: none;
+}
+.blueimp-gallery > .slides > .slide > .video-content > video {
+  display: none;
+}
+.blueimp-gallery > .slides > .slide > .video-playing > video {
+  display: block;
+}
+.blueimp-gallery > .slides > .slide > .video-loading > a {
+  background: url(../img/loading.gif) center no-repeat;
+  background-size: 64px 64px;
+}
+
+/* Replace PNGs with SVGs for capable browsers (excluding IE<9) */
+body:last-child .blueimp-gallery > .slides > .slide > .video-content:not(.video-loading) > a {
+  background-image: url(../img/video-play.svg);
+}
+
+/* IE7 fixes */
+*+html .blueimp-gallery > .slides > .slide > .video-content {
+  height: 100%;
+}
+*+html .blueimp-gallery > .slides > .slide > .video-content > a {
+  left: 50%;
+  margin-left: -64px;
+}

frappe/public/js/lib/gallery/css/blueimp-gallery.css

@@ -0,0 +1,226 @@
+@charset "UTF-8";
+/*
+ * blueimp Gallery CSS
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+.blueimp-gallery,
+.blueimp-gallery > .slides > .slide > .slide-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  /* Prevent artifacts in Mozilla Firefox: */
+  -moz-backface-visibility: hidden;
+}
+.blueimp-gallery > .slides > .slide > .slide-content {
+  margin: auto;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  opacity: 1;
+}
+.blueimp-gallery {
+  position: fixed;
+  z-index: 999999;
+  overflow: hidden;
+  background: #000;
+  background: rgba(0, 0, 0, 0.9);
+  opacity: 0;
+  display: none;
+  direction: ltr;
+  -ms-touch-action: none;
+  touch-action: none;
+}
+.blueimp-gallery-carousel {
+  position: relative;
+  z-index: auto;
+  margin: 1em auto;
+  /* Set the carousel width/height ratio to 16/9: */
+  padding-bottom: 56.25%;
+  box-shadow: 0 0 10px #000;
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+}
+.blueimp-gallery-display {
+  display: block;
+  opacity: 1;
+}
+.blueimp-gallery > .slides {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+}
+.blueimp-gallery-carousel > .slides {
+  position: absolute;
+}
+.blueimp-gallery > .slides > .slide {
+  position: relative;
+  float: left;
+  height: 100%;
+  text-align: center;
+  -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+     -moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+      -ms-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+       -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+          transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+}
+.blueimp-gallery,
+.blueimp-gallery > .slides > .slide > .slide-content {
+  -webkit-transition: opacity 0.2s linear;
+     -moz-transition: opacity 0.2s linear;
+      -ms-transition: opacity 0.2s linear;
+       -o-transition: opacity 0.2s linear;
+          transition: opacity 0.2s linear;
+}
+.blueimp-gallery > .slides > .slide-loading {
+  background: url(../img/loading.gif) center no-repeat;
+  background-size: 64px 64px;
+}
+.blueimp-gallery > .slides > .slide-loading > .slide-content {
+  opacity: 0;
+}
+.blueimp-gallery > .slides > .slide-error {
+  background: url(../img/error.png) center no-repeat;
+}
+.blueimp-gallery > .slides > .slide-error > .slide-content {
+  display: none;
+}
+.blueimp-gallery > .prev,
+.blueimp-gallery > .next {
+  position: absolute;
+  top: 50%;
+  left: 15px;
+  width: 40px;
+  height: 40px;
+  margin-top: -23px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 60px;
+  font-weight: 100;
+  line-height: 30px;
+  color: #fff;
+  text-decoration: none;
+  text-shadow: 0 0 2px #000;
+  text-align: center;
+  background: #222;
+  background: rgba(0, 0, 0, 0.5);
+  -webkit-box-sizing: content-box;
+     -moz-box-sizing: content-box;
+          box-sizing: content-box;
+  border: 3px solid #fff;
+  -webkit-border-radius: 23px;
+     -moz-border-radius: 23px;
+          border-radius: 23px;
+  opacity: 0.5;
+  cursor: pointer;
+  display: none;
+}
+.blueimp-gallery > .next {
+  left: auto;
+  right: 15px;
+}
+.blueimp-gallery > .close,
+.blueimp-gallery > .title {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  margin: 0 40px 0 0;
+  font-size: 20px;
+  line-height: 30px;
+  color: #fff;
+  text-shadow: 0 0 2px #000;
+  opacity: 0.8;
+  display: none;
+}
+.blueimp-gallery > .close {
+  padding: 15px;
+  right: 15px;
+  left: auto;
+  margin: -15px;
+  font-size: 30px;
+  text-decoration: none;
+  cursor: pointer;
+}
+.blueimp-gallery > .play-pause {
+  position: absolute;
+  right: 15px;
+  bottom: 15px;
+  width: 15px;
+  height: 15px;
+  background: url(../img/play-pause.png) 0 0 no-repeat;
+  cursor: pointer;
+  opacity: 0.5;
+  display: none;
+}
+.blueimp-gallery-playing > .play-pause {
+  background-position: -15px 0;
+}
+.blueimp-gallery > .prev:hover,
+.blueimp-gallery > .next:hover,
+.blueimp-gallery > .close:hover,
+.blueimp-gallery > .title:hover,
+.blueimp-gallery > .play-pause:hover {
+  color: #fff;
+  opacity: 1;
+}
+.blueimp-gallery-controls > .prev,
+.blueimp-gallery-controls > .next,
+.blueimp-gallery-controls > .close,
+.blueimp-gallery-controls > .title,
+.blueimp-gallery-controls > .play-pause {
+  display: block;
+  /* Fix z-index issues (controls behind slide element) on Android: */
+  -webkit-transform: translateZ(0);
+     -moz-transform: translateZ(0);
+      -ms-transform: translateZ(0);
+       -o-transform: translateZ(0);
+          transform: translateZ(0);
+}
+.blueimp-gallery-single > .prev,
+.blueimp-gallery-left > .prev,
+.blueimp-gallery-single > .next,
+.blueimp-gallery-right > .next,
+.blueimp-gallery-single > .play-pause {
+  display: none;
+}
+.blueimp-gallery > .slides > .slide > .slide-content,
+.blueimp-gallery > .prev,
+.blueimp-gallery > .next,
+.blueimp-gallery > .close,
+.blueimp-gallery > .play-pause {
+  -webkit-user-select: none;
+   -khtml-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+/* Replace PNGs with SVGs for capable browsers (excluding IE<9) */
+body:last-child .blueimp-gallery > .slides > .slide-error {
+  background-image: url(../img/error.svg);
+}
+body:last-child .blueimp-gallery > .play-pause {
+  width: 20px;
+  height: 20px;
+  background-size: 40px 20px;
+  background-image: url(../img/play-pause.svg);
+}
+body:last-child .blueimp-gallery-playing > .play-pause {
+  background-position: -20px 0;
+}
+
+/* IE7 fixes */
+*+html .blueimp-gallery > .slides > .slide {
+  min-height: 300px;
+}
+*+html .blueimp-gallery > .slides > .slide > .slide-content {
+  position: relative;
+}

frappe/public/js/lib/gallery/css/blueimp-gallery.less

@@ -0,0 +1,3 @@
+@import (inline) 'blueimp-gallery.css';
+@import (inline) 'blueimp-gallery-indicator.css';
+@import (inline) 'blueimp-gallery-video.css';

frappe/public/js/lib/gallery/css/blueimp-gallery.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["blueimp-gallery.css","blueimp-gallery-indicator.css","blueimp-gallery-video.css"],"names":[],"mappings":"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"}

frappe/public/js/lib/gallery/css/demo.css

@@ -0,0 +1,51 @@
+/*
+ * blueimp Gallery Demo CSS
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+body {
+  max-width: 750px;
+  margin: 0 auto;
+  padding: 1em;
+  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
+  font-size: 1em;
+  line-height: 1.4em;
+  background: #222;
+  color: #fff;
+  -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+}
+a {
+  color: orange;
+  text-decoration: none;
+}
+img {
+  border: 0;
+  vertical-align: middle;
+}
+h1 {
+  line-height: 1em;
+}
+h2,
+.links {
+  text-align: center;
+}
+
+@media (min-width: 481px) {
+  .navigation {
+    list-style: none;
+    padding: 0;
+  }
+  .navigation li {
+    display: inline-block;
+  }
+  .navigation li:not(:first-child):before {
+    content: '| ';
+  }
+}

frappe/public/js/lib/gallery/img/error.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64" height="64">
+	<circle cx="32" cy="32" r="25" stroke="red" stroke-width="7" fill="black" fill-opacity="0.2"/>
+	<rect x="28" y="7" width="8" height="50" fill="red" transform="rotate(45, 32, 32)"/>
+</svg>

frappe/public/js/lib/gallery/img/play-pause.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="15">
+	<polygon points="2,1 2,14 13,7" stroke="black" stroke-width="1" fill="white"/>
+	<rect x="17" y="2" width="4" height="11" stroke="black" stroke-width="1" fill="white"/>
+	<rect x="24" y="2" width="4" height="11" stroke="black" stroke-width="1" fill="white"/>
+</svg>

frappe/public/js/lib/gallery/img/video-play.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64" height="64">
+	<circle cx="32" cy="32" r="25" stroke="white" stroke-width="7" fill="black" fill-opacity="0.2"/>
+	<polygon points="26,22 26,42 43,32" fill="white"/>
+</svg>

frappe/public/js/lib/gallery/js/blueimp-gallery-fullscreen.js

@@ -0,0 +1,89 @@
+/*
+ * blueimp Gallery Fullscreen JS
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/* global define, window, document */
+
+;(function (factory) {
+  'use strict'
+  if (typeof define === 'function' && define.amd) {
+    // Register as an anonymous AMD module:
+    define([
+      './blueimp-helper',
+      './blueimp-gallery'
+    ], factory)
+  } else {
+    // Browser globals:
+    factory(
+      window.blueimp.helper || window.jQuery,
+      window.blueimp.Gallery
+    )
+  }
+}(function ($, Gallery) {
+  'use strict'
+
+  $.extend(Gallery.prototype.options, {
+    // Defines if the gallery should open in fullscreen mode:
+    fullScreen: false
+  })
+
+  var initialize = Gallery.prototype.initialize
+  var close = Gallery.prototype.close
+
+  $.extend(Gallery.prototype, {
+    getFullScreenElement: function () {
+      return document.fullscreenElement ||
+      document.webkitFullscreenElement ||
+      document.mozFullScreenElement ||
+      document.msFullscreenElement
+    },
+
+    requestFullScreen: function (element) {
+      if (element.requestFullscreen) {
+        element.requestFullscreen()
+      } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen()
+      } else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen()
+      } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen()
+      }
+    },
+
+    exitFullScreen: function () {
+      if (document.exitFullscreen) {
+        document.exitFullscreen()
+      } else if (document.webkitCancelFullScreen) {
+        document.webkitCancelFullScreen()
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen()
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen()
+      }
+    },
+
+    initialize: function () {
+      initialize.call(this)
+      if (this.options.fullScreen && !this.getFullScreenElement()) {
+        this.requestFullScreen(this.container[0])
+      }
+    },
+
+    close: function () {
+      if (this.getFullScreenElement() === this.container[0]) {
+        this.exitFullScreen()
+      }
+      close.call(this)
+    }
+
+  })
+
+  return Gallery
+}))

frappe/public/js/lib/gallery/js/blueimp-gallery-indicator.js

@@ -0,0 +1,155 @@
+/*
+ * blueimp Gallery Indicator JS
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/* global define, window, document */
+
+;(function (factory) {
+  'use strict'
+  if (typeof define === 'function' && define.amd) {
+    // Register as an anonymous AMD module:
+    define([
+      './blueimp-helper',
+      './blueimp-gallery'
+    ], factory)
+  } else {
+    // Browser globals:
+    factory(
+      window.blueimp.helper || window.jQuery,
+      window.blueimp.Gallery
+    )
+  }
+}(function ($, Gallery) {
+  'use strict'
+
+  $.extend(Gallery.prototype.options, {
+    // The tag name, Id, element or querySelector of the indicator container:
+    indicatorContainer: 'ol',
+    // The class for the active indicator:
+    activeIndicatorClass: 'active',
+    // The list object property (or data attribute) with the thumbnail URL,
+    // used as alternative to a thumbnail child element:
+    thumbnailProperty: 'thumbnail',
+    // Defines if the gallery indicators should display a thumbnail:
+    thumbnailIndicators: true
+  })
+
+  var initSlides = Gallery.prototype.initSlides
+  var addSlide = Gallery.prototype.addSlide
+  var resetSlides = Gallery.prototype.resetSlides
+  var handleClick = Gallery.prototype.handleClick
+  var handleSlide = Gallery.prototype.handleSlide
+  var handleClose = Gallery.prototype.handleClose
+
+  $.extend(Gallery.prototype, {
+    createIndicator: function (obj) {
+      var indicator = this.indicatorPrototype.cloneNode(false)
+      var title = this.getItemProperty(obj, this.options.titleProperty)
+      var thumbnailProperty = this.options.thumbnailProperty
+      var thumbnailUrl
+      var thumbnail
+      if (this.options.thumbnailIndicators) {
+        if (thumbnailProperty) {
+          thumbnailUrl = this.getItemProperty(obj, thumbnailProperty)
+        }
+        if (thumbnailUrl === undefined) {
+          thumbnail = obj.getElementsByTagName && $(obj).find('img')[0]
+          if (thumbnail) {
+            thumbnailUrl = thumbnail.src
+          }
+        }
+        if (thumbnailUrl) {
+          indicator.style.backgroundImage = 'url("' + thumbnailUrl + '")'
+        }
+      }
+      if (title) {
+        indicator.title = title
+      }
+      return indicator
+    },
+
+    addIndicator: function (index) {
+      if (this.indicatorContainer.length) {
+        var indicator = this.createIndicator(this.list[index])
+        indicator.setAttribute('data-index', index)
+        this.indicatorContainer[0].appendChild(indicator)
+        this.indicators.push(indicator)
+      }
+    },
+
+    setActiveIndicator: function (index) {
+      if (this.indicators) {
+        if (this.activeIndicator) {
+          this.activeIndicator
+            .removeClass(this.options.activeIndicatorClass)
+        }
+        this.activeIndicator = $(this.indicators[index])
+        this.activeIndicator
+          .addClass(this.options.activeIndicatorClass)
+      }
+    },
+
+    initSlides: function (reload) {
+      if (!reload) {
+        this.indicatorContainer = this.container.find(
+          this.options.indicatorContainer
+        )
+        if (this.indicatorContainer.length) {
+          this.indicatorPrototype = document.createElement('li')
+          this.indicators = this.indicatorContainer[0].children
+        }
+      }
+      initSlides.call(this, reload)
+    },
+
+    addSlide: function (index) {
+      addSlide.call(this, index)
+      this.addIndicator(index)
+    },
+
+    resetSlides: function () {
+      resetSlides.call(this)
+      this.indicatorContainer.empty()
+      this.indicators = []
+    },
+
+    handleClick: function (event) {
+      var target = event.target || event.srcElement
+      var parent = target.parentNode
+      if (parent === this.indicatorContainer[0]) {
+        // Click on indicator element
+        this.preventDefault(event)
+        this.slide(this.getNodeIndex(target))
+      } else if (parent.parentNode === this.indicatorContainer[0]) {
+        // Click on indicator child element
+        this.preventDefault(event)
+        this.slide(this.getNodeIndex(parent))
+      } else {
+        return handleClick.call(this, event)
+      }
+    },
+
+    handleSlide: function (index) {
+      handleSlide.call(this, index)
+      this.setActiveIndicator(index)
+    },
+
+    handleClose: function () {
+      if (this.activeIndicator) {
+        this.activeIndicator
+          .removeClass(this.options.activeIndicatorClass)
+      }
+      handleClose.call(this)
+    }
+
+  })
+
+  return Gallery
+}))

frappe/public/js/lib/gallery/js/blueimp-gallery-video.js

@@ -0,0 +1,170 @@
+/*
+ * blueimp Gallery Video Factory JS
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/* global define, window, document */
+
+;(function (factory) {
+  'use strict'
+  if (typeof define === 'function' && define.amd) {
+    // Register as an anonymous AMD module:
+    define([
+      './blueimp-helper',
+      './blueimp-gallery'
+    ], factory)
+  } else {
+    // Browser globals:
+    factory(
+      window.blueimp.helper || window.jQuery,
+      window.blueimp.Gallery
+    )
+  }
+}(function ($, Gallery) {
+  'use strict'
+
+  $.extend(Gallery.prototype.options, {
+    // The class for video content elements:
+    videoContentClass: 'video-content',
+    // The class for video when it is loading:
+    videoLoadingClass: 'video-loading',
+    // The class for video when it is playing:
+    videoPlayingClass: 'video-playing',
+    // The list object property (or data attribute) for the video poster URL:
+    videoPosterProperty: 'poster',
+    // The list object property (or data attribute) for the video sources array:
+    videoSourcesProperty: 'sources'
+  })
+
+  var handleSlide = Gallery.prototype.handleSlide
+
+  $.extend(Gallery.prototype, {
+    handleSlide: function (index) {
+      handleSlide.call(this, index)
+      if (this.playingVideo) {
+        this.playingVideo.pause()
+      }
+    },
+
+    videoFactory: function (obj, callback, videoInterface) {
+      var that = this
+      var options = this.options
+      var videoContainerNode = this.elementPrototype.cloneNode(false)
+      var videoContainer = $(videoContainerNode)
+      var errorArgs = [{
+        type: 'error',
+        target: videoContainerNode
+      }]
+      var video = videoInterface || document.createElement('video')
+      var url = this.getItemProperty(obj, options.urlProperty)
+      var type = this.getItemProperty(obj, options.typeProperty)
+      var title = this.getItemProperty(obj, options.titleProperty)
+      var posterUrl = this.getItemProperty(obj, options.videoPosterProperty)
+      var posterImage
+      var sources = this.getItemProperty(
+        obj,
+        options.videoSourcesProperty
+      )
+      var source
+      var playMediaControl
+      var isLoading
+      var hasControls
+      videoContainer.addClass(options.videoContentClass)
+      if (title) {
+        videoContainerNode.title = title
+      }
+      if (video.canPlayType) {
+        if (url && type && video.canPlayType(type)) {
+          video.src = url
+        } else {
+          while (sources && sources.length) {
+            source = sources.shift()
+            url = this.getItemProperty(source, options.urlProperty)
+            type = this.getItemProperty(source, options.typeProperty)
+            if (url && type && video.canPlayType(type)) {
+              video.src = url
+              break
+            }
+          }
+        }
+      }
+      if (posterUrl) {
+        video.poster = posterUrl
+        posterImage = this.imagePrototype.cloneNode(false)
+        $(posterImage).addClass(options.toggleClass)
+        posterImage.src = posterUrl
+        posterImage.draggable = false
+        videoContainerNode.appendChild(posterImage)
+      }
+      playMediaControl = document.createElement('a')
+      playMediaControl.setAttribute('target', '_blank')
+      if (!videoInterface) {
+        playMediaControl.setAttribute('download', title)
+      }
+      playMediaControl.href = url
+      if (video.src) {
+        video.controls = true
+        ;(videoInterface || $(video))
+          .on('error', function () {
+            that.setTimeout(callback, errorArgs)
+          })
+          .on('pause', function () {
+            isLoading = false
+            videoContainer
+              .removeClass(that.options.videoLoadingClass)
+              .removeClass(that.options.videoPlayingClass)
+            if (hasControls) {
+              that.container.addClass(that.options.controlsClass)
+            }
+            delete that.playingVideo
+            if (that.interval) {
+              that.play()
+            }
+          })
+          .on('playing', function () {
+            isLoading = false
+            videoContainer
+              .removeClass(that.options.videoLoadingClass)
+              .addClass(that.options.videoPlayingClass)
+            if (that.container.hasClass(that.options.controlsClass)) {
+              hasControls = true
+              that.container.removeClass(that.options.controlsClass)
+            } else {
+              hasControls = false
+            }
+          })
+          .on('play', function () {
+            window.clearTimeout(that.timeout)
+            isLoading = true
+            videoContainer.addClass(that.options.videoLoadingClass)
+            that.playingVideo = video
+          })
+        $(playMediaControl).on('click', function (event) {
+          that.preventDefault(event)
+          if (isLoading) {
+            video.pause()
+          } else {
+            video.play()
+          }
+        })
+        videoContainerNode.appendChild(
+          (videoInterface && videoInterface.element) || video
+        )
+      }
+      videoContainerNode.appendChild(playMediaControl)
+      this.setTimeout(callback, [{
+        type: 'load',
+        target: videoContainerNode
+      }])
+      return videoContainerNode
+    }
+  })
+
+  return Gallery
+}))

frappe/public/js/lib/gallery/js/blueimp-gallery-vimeo.js

@@ -0,0 +1,213 @@
+/*
+ * blueimp Gallery Vimeo Video Factory JS
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/* global define, window, document, $f */
+
+;(function (factory) {
+  'use strict'
+  if (typeof define === 'function' && define.amd) {
+    // Register as an anonymous AMD module:
+    define([
+      './blueimp-helper',
+      './blueimp-gallery-video'
+    ], factory)
+  } else {
+    // Browser globals:
+    factory(
+      window.blueimp.helper || window.jQuery,
+      window.blueimp.Gallery
+    )
+  }
+}(function ($, Gallery) {
+  'use strict'
+
+  if (!window.postMessage) {
+    return Gallery
+  }
+
+  $.extend(Gallery.prototype.options, {
+    // The list object property (or data attribute) with the Vimeo video id:
+    vimeoVideoIdProperty: 'vimeo',
+    // The URL for the Vimeo video player, can be extended with custom parameters:
+    // https://developer.vimeo.com/player/embedding
+    vimeoPlayerUrl: '//player.vimeo.com/video/VIDEO_ID?api=1&player_id=PLAYER_ID',
+    // The prefix for the Vimeo video player ID:
+    vimeoPlayerIdPrefix: 'vimeo-player-',
+    // Require a click on the native Vimeo player for the initial playback:
+    vimeoClickToPlay: true
+  })
+
+  var textFactory = Gallery.prototype.textFactory ||
+                      Gallery.prototype.imageFactory
+  var VimeoPlayer = function (url, videoId, playerId, clickToPlay) {
+    this.url = url
+    this.videoId = videoId
+    this.playerId = playerId
+    this.clickToPlay = clickToPlay
+    this.element = document.createElement('div')
+    this.listeners = {}
+  }
+  var counter = 0
+
+  $.extend(VimeoPlayer.prototype, {
+    canPlayType: function () {
+      return true
+    },
+
+    on: function (type, func) {
+      this.listeners[type] = func
+      return this
+    },
+
+    loadAPI: function () {
+      var that = this
+      var apiUrl = '//f.vimeocdn.com/js/froogaloop2.min.js'
+      var scriptTags = document.getElementsByTagName('script')
+      var i = scriptTags.length
+      var scriptTag
+      var called
+      function callback () {
+        if (!called && that.playOnReady) {
+          that.play()
+        }
+        called = true
+      }
+      while (i) {
+        i -= 1
+        if (scriptTags[i].src === apiUrl) {
+          scriptTag = scriptTags[i]
+          break
+        }
+      }
+      if (!scriptTag) {
+        scriptTag = document.createElement('script')
+        scriptTag.src = apiUrl
+      }
+      $(scriptTag).on('load', callback)
+      scriptTags[0].parentNode.insertBefore(scriptTag, scriptTags[0])
+      // Fix for cached scripts on IE 8:
+      if (/loaded|complete/.test(scriptTag.readyState)) {
+        callback()
+      }
+    },
+
+    onReady: function () {
+      var that = this
+      this.ready = true
+      this.player.addEvent('play', function () {
+        that.hasPlayed = true
+        that.onPlaying()
+      })
+      this.player.addEvent('pause', function () {
+        that.onPause()
+      })
+      this.player.addEvent('finish', function () {
+        that.onPause()
+      })
+      if (this.playOnReady) {
+        this.play()
+      }
+    },
+
+    onPlaying: function () {
+      if (this.playStatus < 2) {
+        this.listeners.playing()
+        this.playStatus = 2
+      }
+    },
+
+    onPause: function () {
+      this.listeners.pause()
+      delete this.playStatus
+    },
+
+    insertIframe: function () {
+      var iframe = document.createElement('iframe')
+      iframe.src = this.url
+        .replace('VIDEO_ID', this.videoId)
+        .replace('PLAYER_ID', this.playerId)
+      iframe.id = this.playerId
+      this.element.parentNode.replaceChild(iframe, this.element)
+      this.element = iframe
+    },
+
+    play: function () {
+      var that = this
+      if (!this.playStatus) {
+        this.listeners.play()
+        this.playStatus = 1
+      }
+      if (this.ready) {
+        if (!this.hasPlayed && (this.clickToPlay || (window.navigator &&
+          /iP(hone|od|ad)/.test(window.navigator.platform)))) {
+          // Manually trigger the playing callback if clickToPlay
+          // is enabled and to workaround a limitation in iOS,
+          // which requires synchronous user interaction to start
+          // the video playback:
+          this.onPlaying()
+        } else {
+          this.player.api('play')
+        }
+      } else {
+        this.playOnReady = true
+        if (!window.$f) {
+          this.loadAPI()
+        } else if (!this.player) {
+          this.insertIframe()
+          this.player = $f(this.element)
+          this.player.addEvent('ready', function () {
+            that.onReady()
+          })
+        }
+      }
+    },
+
+    pause: function () {
+      if (this.ready) {
+        this.player.api('pause')
+      } else if (this.playStatus) {
+        delete this.playOnReady
+        this.listeners.pause()
+        delete this.playStatus
+      }
+    }
+
+  })
+
+  $.extend(Gallery.prototype, {
+    VimeoPlayer: VimeoPlayer,
+
+    textFactory: function (obj, callback) {
+      var options = this.options
+      var videoId = this.getItemProperty(obj, options.vimeoVideoIdProperty)
+      if (videoId) {
+        if (this.getItemProperty(obj, options.urlProperty) === undefined) {
+          obj[options.urlProperty] = '//vimeo.com/' + videoId
+        }
+        counter += 1
+        return this.videoFactory(
+          obj,
+          callback,
+          new VimeoPlayer(
+            options.vimeoPlayerUrl,
+            videoId,
+            options.vimeoPlayerIdPrefix + counter,
+            options.vimeoClickToPlay
+          )
+        )
+      }
+      return textFactory.call(this, obj, callback)
+    }
+
+  })
+
+  return Gallery
+}))

frappe/public/js/lib/gallery/js/blueimp-gallery-youtube.js

@@ -0,0 +1,228 @@
+/*
+ * blueimp Gallery YouTube Video Factory JS
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/* global define, window, document, YT */
+
+;(function (factory) {
+  'use strict'
+  if (typeof define === 'function' && define.amd) {
+    // Register as an anonymous AMD module:
+    define([
+      './blueimp-helper',
+      './blueimp-gallery-video'
+    ], factory)
+  } else {
+    // Browser globals:
+    factory(
+      window.blueimp.helper || window.jQuery,
+      window.blueimp.Gallery
+    )
+  }
+}(function ($, Gallery) {
+  'use strict'
+
+  if (!window.postMessage) {
+    return Gallery
+  }
+
+  $.extend(Gallery.prototype.options, {
+    // The list object property (or data attribute) with the YouTube video id:
+    youTubeVideoIdProperty: 'youtube',
+    // Optional object with parameters passed to the YouTube video player:
+    // https://developers.google.com/youtube/player_parameters
+    youTubePlayerVars: {
+      wmode: 'transparent'
+    },
+    // Require a click on the native YouTube player for the initial playback:
+    youTubeClickToPlay: true
+  })
+
+  var textFactory = Gallery.prototype.textFactory ||
+                      Gallery.prototype.imageFactory
+  var YouTubePlayer = function (videoId, playerVars, clickToPlay) {
+    this.videoId = videoId
+    this.playerVars = playerVars
+    this.clickToPlay = clickToPlay
+    this.element = document.createElement('div')
+    this.listeners = {}
+  }
+
+  $.extend(YouTubePlayer.prototype, {
+    canPlayType: function () {
+      return true
+    },
+
+    on: function (type, func) {
+      this.listeners[type] = func
+      return this
+    },
+
+    loadAPI: function () {
+      var that = this
+      var onYouTubeIframeAPIReady = window.onYouTubeIframeAPIReady
+      var apiUrl = '//www.youtube.com/iframe_api'
+      var scriptTags = document.getElementsByTagName('script')
+      var i = scriptTags.length
+      var scriptTag
+      window.onYouTubeIframeAPIReady = function () {
+        if (onYouTubeIframeAPIReady) {
+          onYouTubeIframeAPIReady.apply(this)
+        }
+        if (that.playOnReady) {
+          that.play()
+        }
+      }
+      while (i) {
+        i -= 1
+        if (scriptTags[i].src === apiUrl) {
+          return
+        }
+      }
+      scriptTag = document.createElement('script')
+      scriptTag.src = apiUrl
+      scriptTags[0].parentNode.insertBefore(scriptTag, scriptTags[0])
+    },
+
+    onReady: function () {
+      this.ready = true
+      if (this.playOnReady) {
+        this.play()
+      }
+    },
+
+    onPlaying: function () {
+      if (this.playStatus < 2) {
+        this.listeners.playing()
+        this.playStatus = 2
+      }
+    },
+
+    onPause: function () {
+      Gallery.prototype.setTimeout.call(
+        this,
+        this.checkSeek,
+        null,
+        2000
+      )
+    },
+
+    checkSeek: function () {
+      if (this.stateChange === YT.PlayerState.PAUSED ||
+        this.stateChange === YT.PlayerState.ENDED) {
+        // check if current state change is actually paused
+        this.listeners.pause()
+        delete this.playStatus
+      }
+    },
+
+    onStateChange: function (event) {
+      switch (event.data) {
+        case YT.PlayerState.PLAYING:
+          this.hasPlayed = true
+          this.onPlaying()
+          break
+        case YT.PlayerState.PAUSED:
+        case YT.PlayerState.ENDED:
+          this.onPause()
+          break
+      }
+      // Save most recent state change to this.stateChange
+      this.stateChange = event.data
+    },
+
+    onError: function (event) {
+      this.listeners.error(event)
+    },
+
+    play: function () {
+      var that = this
+      if (!this.playStatus) {
+        this.listeners.play()
+        this.playStatus = 1
+      }
+      if (this.ready) {
+        if (!this.hasPlayed && (this.clickToPlay || (window.navigator &&
+          /iP(hone|od|ad)/.test(window.navigator.platform)))) {
+          // Manually trigger the playing callback if clickToPlay
+          // is enabled and to workaround a limitation in iOS,
+          // which requires synchronous user interaction to start
+          // the video playback:
+          this.onPlaying()
+        } else {
+          this.player.playVideo()
+        }
+      } else {
+        this.playOnReady = true
+        if (!(window.YT && YT.Player)) {
+          this.loadAPI()
+        } else if (!this.player) {
+          this.player = new YT.Player(this.element, {
+            videoId: this.videoId,
+            playerVars: this.playerVars,
+            events: {
+              onReady: function () {
+                that.onReady()
+              },
+              onStateChange: function (event) {
+                that.onStateChange(event)
+              },
+              onError: function (event) {
+                that.onError(event)
+              }
+            }
+          })
+        }
+      }
+    },
+
+    pause: function () {
+      if (this.ready) {
+        this.player.pauseVideo()
+      } else if (this.playStatus) {
+        delete this.playOnReady
+        this.listeners.pause()
+        delete this.playStatus
+      }
+    }
+
+  })
+
+  $.extend(Gallery.prototype, {
+    YouTubePlayer: YouTubePlayer,
+
+    textFactory: function (obj, callback) {
+      var options = this.options
+      var videoId = this.getItemProperty(obj, options.youTubeVideoIdProperty)
+      if (videoId) {
+        if (this.getItemProperty(obj, options.urlProperty) === undefined) {
+          obj[options.urlProperty] = '//www.youtube.com/watch?v=' + videoId
+        }
+        if (this.getItemProperty(obj, options.videoPosterProperty) === undefined) {
+          obj[options.videoPosterProperty] = '//img.youtube.com/vi/' + videoId +
+            '/maxresdefault.jpg'
+        }
+        return this.videoFactory(
+          obj,
+          callback,
+          new YouTubePlayer(
+            videoId,
+            options.youTubePlayerVars,
+            options.youTubeClickToPlay
+          )
+        )
+      }
+      return textFactory.call(this, obj, callback)
+    }
+
+  })
+
+  return Gallery
+}))

frappe/public/js/lib/gallery/js/blueimp-helper.js

@@ -0,0 +1,190 @@
+/*
+ * blueimp helper JS
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/* global define, window, document */
+
+;(function () {
+  'use strict'
+
+  function extend (obj1, obj2) {
+    var prop
+    for (prop in obj2) {
+      if (obj2.hasOwnProperty(prop)) {
+        obj1[prop] = obj2[prop]
+      }
+    }
+    return obj1
+  }
+
+  function Helper (query) {
+    if (!this || this.find !== Helper.prototype.find) {
+      // Called as function instead of as constructor,
+      // so we simply return a new instance:
+      return new Helper(query)
+    }
+    this.length = 0
+    if (query) {
+      if (typeof query === 'string') {
+        query = this.find(query)
+      }
+      if (query.nodeType || query === query.window) {
+        // Single HTML element
+        this.length = 1
+        this[0] = query
+      } else {
+        // HTML element collection
+        var i = query.length
+        this.length = i
+        while (i) {
+          i -= 1
+          this[i] = query[i]
+        }
+      }
+    }
+  }
+
+  Helper.extend = extend
+
+  Helper.contains = function (container, element) {
+    do {
+      element = element.parentNode
+      if (element === container) {
+        return true
+      }
+    } while (element)
+    return false
+  }
+
+  Helper.parseJSON = function (string) {
+    return window.JSON && JSON.parse(string)
+  }
+
+  extend(Helper.prototype, {
+    find: function (query) {
+      var container = this[0] || document
+      if (typeof query === 'string') {
+        if (container.querySelectorAll) {
+          query = container.querySelectorAll(query)
+        } else if (query.charAt(0) === '#') {
+          query = container.getElementById(query.slice(1))
+        } else {
+          query = container.getElementsByTagName(query)
+        }
+      }
+      return new Helper(query)
+    },
+
+    hasClass: function (className) {
+      if (!this[0]) {
+        return false
+      }
+      return new RegExp('(^|\\s+)' + className +
+        '(\\s+|$)').test(this[0].className)
+    },
+
+    addClass: function (className) {
+      var i = this.length
+      var element
+      while (i) {
+        i -= 1
+        element = this[i]
+        if (!element.className) {
+          element.className = className
+          return this
+        }
+        if (this.hasClass(className)) {
+          return this
+        }
+        element.className += ' ' + className
+      }
+      return this
+    },
+
+    removeClass: function (className) {
+      var regexp = new RegExp('(^|\\s+)' + className + '(\\s+|$)')
+      var i = this.length
+      var element
+      while (i) {
+        i -= 1
+        element = this[i]
+        element.className = element.className.replace(regexp, ' ')
+      }
+      return this
+    },
+
+    on: function (eventName, handler) {
+      var eventNames = eventName.split(/\s+/)
+      var i
+      var element
+      while (eventNames.length) {
+        eventName = eventNames.shift()
+        i = this.length
+        while (i) {
+          i -= 1
+          element = this[i]
+          if (element.addEventListener) {
+            element.addEventListener(eventName, handler, false)
+          } else if (element.attachEvent) {
+            element.attachEvent('on' + eventName, handler)
+          }
+        }
+      }
+      return this
+    },
+
+    off: function (eventName, handler) {
+      var eventNames = eventName.split(/\s+/)
+      var i
+      var element
+      while (eventNames.length) {
+        eventName = eventNames.shift()
+        i = this.length
+        while (i) {
+          i -= 1
+          element = this[i]
+          if (element.removeEventListener) {
+            element.removeEventListener(eventName, handler, false)
+          } else if (element.detachEvent) {
+            element.detachEvent('on' + eventName, handler)
+          }
+        }
+      }
+      return this
+    },
+
+    empty: function () {
+      var i = this.length
+      var element
+      while (i) {
+        i -= 1
+        element = this[i]
+        while (element.hasChildNodes()) {
+          element.removeChild(element.lastChild)
+        }
+      }
+      return this
+    },
+
+    first: function () {
+      return new Helper(this[0])
+    }
+
+  })
+
+  if (typeof define === 'function' && define.amd) {
+    define(function () {
+      return Helper
+    })
+  } else {
+    window.blueimp = window.blueimp || {}
+    window.blueimp.helper = Helper
+  }
+}())

frappe/public/js/lib/gallery/js/demo.js

@@ -0,0 +1,96 @@
+/*
+ * blueimp Gallery Demo JS
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/* global blueimp, $ */
+
+$(function () {
+  'use strict'
+
+  // Load demo images from flickr:
+  $.ajax({
+    // Flickr API is SSL only:
+    // https://code.flickr.net/2014/04/30/flickr-api-going-ssl-only-on-june-27th-2014/
+    url: 'https://api.flickr.com/services/rest/',
+    data: {
+      format: 'json',
+      method: 'flickr.interestingness.getList',
+      api_key: '7617adae70159d09ba78cfec73c13be3' // jshint ignore:line
+    },
+    dataType: 'jsonp',
+    jsonp: 'jsoncallback'
+  }).done(function (result) {
+    var carouselLinks = []
+    var linksContainer = $('#links')
+    var baseUrl
+    // Add the demo images as links with thumbnails to the page:
+    $.each(result.photos.photo, function (index, photo) {
+      baseUrl = 'https://farm' + photo.farm + '.static.flickr.com/' +
+      photo.server + '/' + photo.id + '_' + photo.secret
+      $('<a/>')
+        .append($('<img>').prop('src', baseUrl + '_s.jpg'))
+        .prop('href', baseUrl + '_b.jpg')
+        .prop('title', photo.title)
+        .attr('data-gallery', '')
+        .appendTo(linksContainer)
+      carouselLinks.push({
+        href: baseUrl + '_c.jpg',
+        title: photo.title
+      })
+    })
+    // Initialize the Gallery as image carousel:
+    blueimp.Gallery(carouselLinks, {
+      container: '#blueimp-image-carousel',
+      carousel: true
+    })
+  })
+
+  // Initialize the Gallery as video carousel:
+  blueimp.Gallery([
+    {
+      title: 'Sintel',
+      href: 'https://archive.org/download/Sintel/sintel-2048-surround_512kb.mp4',
+      type: 'video/mp4',
+      poster: 'https://i.imgur.com/MUSw4Zu.jpg'
+    },
+    {
+      title: 'Big Buck Bunny',
+      href: 'https://upload.wikimedia.org/wikipedia/commons/7/75/' +
+        'Big_Buck_Bunny_Trailer_400p.ogg',
+      type: 'video/ogg',
+      poster: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/' +
+        'Big.Buck.Bunny.-.Opening.Screen.png/' +
+        '800px-Big.Buck.Bunny.-.Opening.Screen.png'
+    },
+    {
+      title: 'Elephants Dream',
+      href: 'https://upload.wikimedia.org/wikipedia/commons/transcoded/8/83/' +
+        'Elephants_Dream_%28high_quality%29.ogv/' +
+        'Elephants_Dream_%28high_quality%29.ogv.360p.webm',
+      type: 'video/webm',
+      poster: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/' +
+        'Elephants_Dream_s1_proog.jpg/800px-Elephants_Dream_s1_proog.jpg'
+    },
+    {
+      title: 'LES TWINS - An Industry Ahead',
+      type: 'text/html',
+      youtube: 'zi4CIXpx7Bg'
+    },
+    {
+      title: 'KN1GHT - Last Moon',
+      type: 'text/html',
+      vimeo: '73686146',
+      poster: 'https://secure-a.vimeocdn.com/ts/448/835/448835699_960.jpg'
+    }
+  ], {
+    container: '#blueimp-video-carousel',
+    carousel: true
+  })
+})

frappe/public/js/lib/gallery/js/jquery.blueimp-gallery.js

@@ -0,0 +1,83 @@
+/*
+ * blueimp Gallery jQuery plugin
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/* global define, window, document */
+
+;(function (factory) {
+  'use strict'
+  if (typeof define === 'function' && define.amd) {
+    define([
+      'jquery',
+      './blueimp-gallery'
+    ], factory)
+  } else {
+    factory(
+      window.jQuery,
+      window.blueimp.Gallery
+    )
+  }
+}(function ($, Gallery) {
+  'use strict'
+
+  // Global click handler to open links with data-gallery attribute
+  // in the Gallery lightbox:
+  $(document).on('click', '[data-gallery]', function (event) {
+    // Get the container id from the data-gallery attribute:
+    var id = $(this).data('gallery')
+    var widget = $(id)
+    var container = (widget.length && widget) ||
+          $(Gallery.prototype.options.container)
+    var callbacks = {
+      onopen: function () {
+        container
+          .data('gallery', this)
+          .trigger('open')
+      },
+      onopened: function () {
+        container.trigger('opened')
+      },
+      onslide: function () {
+        container.trigger('slide', arguments)
+      },
+      onslideend: function () {
+        container.trigger('slideend', arguments)
+      },
+      onslidecomplete: function () {
+        container.trigger('slidecomplete', arguments)
+      },
+      onclose: function () {
+        container.trigger('close')
+      },
+      onclosed: function () {
+        container
+          .trigger('closed')
+          .removeData('gallery')
+      }
+    }
+    var options = $.extend(
+      // Retrieve custom options from data-attributes
+      // on the Gallery widget:
+      container.data(),
+      {
+        container: container[0],
+        index: this,
+        event: event
+      },
+      callbacks
+    )
+    // Select all links with the same data-gallery attribute:
+    var links = $('[data-gallery="' + id + '"]')
+    if (options.filter) {
+      links = links.filter(options.filter)
+    }
+    return new Gallery(links, options)
+  })
+}))