Replaced Bootstrap Image Gallery with the new blueimp Gallery.

https://github.com/blueimp/Gallery
blueimp · Jun 26, 2013 · c3cbd35 · c3cbd35
1 parent fcc36ad
commit c3cbd35
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -56,16 +56,16 @@ Please read the [issue guidelines](https://github.com/blueimp/jQuery-File-Upload
 * [jQuery](http://jquery.com/) v. 1.6+
 * [jQuery UI widget factory](http://api.jqueryui.com/jQuery.widget/) v. 1.9+ (included)
 * [jQuery Iframe Transport plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.iframe-transport.js) (included)
-* [JavaScript Templates engine](https://github.com/blueimp/JavaScript-Templates) v. 2.1.0+ (optional)
-* [JavaScript Load Image function](https://github.com/blueimp/JavaScript-Load-Image) v. 1.7.0+ (optional)
+* [JavaScript Templates engine](https://github.com/blueimp/JavaScript-Templates) v. 2.2.0+ (optional)
+* [JavaScript Load Image function](https://github.com/blueimp/JavaScript-Load-Image) v. 1.7.2+ (optional)
 * [JavaScript Canvas to Blob function](https://github.com/blueimp/JavaScript-Canvas-to-Blob) v. 2.0.5+ (optional)
 * [Bootstrap CSS Toolkit](https://github.com/twitter/bootstrap/) v. 2.3+ (optional)
 
 The jQuery UI widget factory is a requirement for the basic File Upload plugin, but very lightweight without any other dependencies.  
 The jQuery Iframe Transport is required for [browsers without XHR file upload support](https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support).  
 The UI version of the File Upload plugin also requires the JavaScript Templates engine as well as the JavaScript Load Image and JavaScript Canvas to Blob functions (for the image previews and resizing functionality). These dependencies are marked as optional, as the basic File Upload plugin can be used without them and the UI version of the plugin can be extended to override these dependencies with alternative solutions.
 
-The User Interface is built with Twitter's [Bootstrap](https://github.com/twitter/bootstrap/) Toolkit. This enables a CSS based, responsive layout and fancy transition effects on modern browsers. The demo also includes the [Bootstrap Image Gallery Plugin](https://github.com/blueimp/Bootstrap-Image-Gallery). Both of these components are optional and not required.
+The User Interface is built with Twitter's [Bootstrap](https://github.com/twitter/bootstrap/) Toolkit. This enables a CSS based, responsive layout and fancy transition effects on modern browsers. The demo also includes the [blueimp Gallery](https://github.com/blueimp/Gallery). Both of these components are optional and not required.
 
 The repository also includes the [jQuery XDomainRequest Transport plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/cors/jquery.xdr-transport.js), which enables Cross-domain AJAX requests (GET and POST only) in Microsoft Internet Explorer >= 8. However, the XDomainRequest object doesn't support file uploads and the plugin is only used by the [Demo](http://blueimp.github.io/jQuery-File-Upload/) for Cross-domain requests to delete uploaded files from the demo file upload service.
 

diff --git a/angularjs.html b/angularjs.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!--
 /*
- * jQuery File Upload Plugin AngularJS Demo 1.2
+ * jQuery File Upload Plugin AngularJS Demo 1.3
  * https://github.com/blueimp/jQuery-File-Upload
  *
  * Copyright 2013, Sebastian Tschan
@@ -14,7 +14,9 @@
 <html lang="en">
 <head>
 <!-- Force latest IE rendering engine or ChromeFrame if installed -->
-<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
+<!--[if IE]>
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<![endif]-->
 <meta charset="utf-8">
 <title>jQuery File Upload Demo - AngularJS version</title>
 <meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for AngularJS. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.">
@@ -26,9 +28,11 @@
 <!-- Bootstrap styles for responsive website layout, supporting different screen sizes -->
 <link rel="stylesheet" href="http://blueimp.github.io/cdn/css/bootstrap-responsive.min.css">
 <!-- Bootstrap CSS fixes for IE6 -->
-<!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.io/cdn/css/bootstrap-ie6.min.css"><![endif]-->
-<!-- Bootstrap Image Gallery styles -->
-<link rel="stylesheet" href="http://blueimp.github.io/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css">
+<!--[if lt IE 7]>
+<link rel="stylesheet" href="http://blueimp.github.io/cdn/css/bootstrap-ie6.min.css">
+<![endif]-->
+<!-- blueimp Gallery styles -->
+<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
 <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
 <link rel="stylesheet" href="css/jquery.fileupload-ui.css">
 <!-- CSS adjustments for browsers with JavaScript disabled -->
@@ -106,17 +110,17 @@ <h2 class="lead">AngularJS version</h2>
             </div>
         </div>
         <!-- The table listing the files available for upload/download -->
-        <table class="table table-striped files ng-cloak" data-toggle="modal-gallery" data-target="#modal-gallery">
+        <table class="table table-striped files ng-cloak">
             <tr data-ng-repeat="file in queue">
                 <td data-ng-switch data-on="!!file.thumbnail_url">
                     <div class="preview" data-ng-switch-when="true">
-                        <a data-ng-href="{{file.url}}" title="{{file.name}}" data-gallery="gallery" download="{{file.name}}"><img data-ng-src="{{file.thumbnail_url}}" alt=""></a>
+                        <a data-ng-href="{{file.url}}" title="{{file.name}}" class="gallery" download="{{file.name}}" ng-click="display($event, file)"><img data-ng-src="{{file.thumbnail_url}}" alt=""></a>
                     </div>
                     <div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
                 </td>
                 <td>
                     <p class="name" data-ng-switch data-on="!!file.url">
-                        <a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" data-gallery="gallery" download="{{file.name}}">{{file.name}}</a>
+                        <a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" class="gallery" download="{{file.name}}" ng-click="display($event, file)">{{file.name}}</a>
                         <span data-ng-switch-default>{{file.name}}</span>
                     </p>
                     <div data-ng-show="file.error"><span class="label label-important">Error</span> {{file.error}}</div>
@@ -155,31 +159,14 @@ <h3>Demo Notes</h3>
         </ul>
     </div>
 </div>
-<!-- modal-gallery is the modal dialog used for the image gallery -->
-<div id="modal-gallery" class="modal modal-gallery hide fade" data-filter=":odd" tabindex="-1">
-    <div class="modal-header">
-        <a class="close" data-dismiss="modal">&times;</a>
-        <h3 class="modal-title"></h3>
-    </div>
-    <div class="modal-body"><div class="modal-image"></div></div>
-    <div class="modal-footer">
-        <a class="btn modal-download" target="_blank">
-            <i class="icon-download"></i>
-            <span>Download</span>
-        </a>
-        <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">
-            <i class="icon-play icon-white"></i>
-            <span>Slideshow</span>
-        </a>
-        <a class="btn btn-info modal-prev">
-            <i class="icon-arrow-left icon-white"></i>
-            <span>Previous</span>
-        </a>
-        <a class="btn btn-primary modal-next">
-            <span>Next</span>
-            <i class="icon-arrow-right icon-white"></i>
-        </a>
-    </div>
+<!-- The blueimp Gallery widget -->
+<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>
+    <ol class="indicator"></ol>
 </div>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
@@ -189,9 +176,10 @@ <h3 class="modal-title"></h3>
 <script src="http://blueimp.github.io/JavaScript-Load-Image/load-image.min.js"></script>
 <!-- The Canvas to Blob plugin is included for image resizing functionality -->
 <script src="http://blueimp.github.io/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>
-<!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo -->
+<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
 <script src="http://blueimp.github.io/cdn/js/bootstrap.min.js"></script>
-<script src="http://blueimp.github.io/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></script>
+<!-- blueimp Gallery script -->
+<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery.min.js"></script>
 <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
 <script src="js/jquery.iframe-transport.js"></script>
 <!-- The basic File Upload plugin -->

diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!--
 /*
- * jQuery File Upload Plugin Demo 8.1.1
+ * jQuery File Upload Plugin Demo 8.2
  * https://github.com/blueimp/jQuery-File-Upload
  *
  * Copyright 2010, Sebastian Tschan
@@ -14,7 +14,9 @@
 <html lang="en">
 <head>
 <!-- Force latest IE rendering engine or ChromeFrame if installed -->
-<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
+<!--[if IE]>
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<![endif]-->
 <meta charset="utf-8">
 <title>jQuery File Upload Demo</title>
 <meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.">
@@ -26,9 +28,11 @@
 <!-- Bootstrap styles for responsive website layout, supporting different screen sizes -->
 <link rel="stylesheet" href="http://blueimp.github.io/cdn/css/bootstrap-responsive.min.css">
 <!-- Bootstrap CSS fixes for IE6 -->
-<!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.io/cdn/css/bootstrap-ie6.min.css"><![endif]-->
-<!-- Bootstrap Image Gallery styles -->
-<link rel="stylesheet" href="http://blueimp.github.io/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css">
+<!--[if lt IE 7]>
+<link rel="stylesheet" href="http://blueimp.github.io/cdn/css/bootstrap-ie6.min.css">
+<![endif]-->
+<!-- blueimp Gallery styles -->
+<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
 <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
 <link rel="stylesheet" href="css/jquery.fileupload-ui.css">
 <!-- CSS adjustments for browsers with JavaScript disabled -->
@@ -113,7 +117,7 @@ <h2 class="lead">Basic Plus UI version</h2>
             </div>
         </div>
         <!-- The table listing the files available for upload/download -->
-        <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
+        <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
     </form>
     <br>
     <div class="well">
@@ -128,31 +132,14 @@ <h3>Demo Notes</h3>
         </ul>
     </div>
 </div>
-<!-- modal-gallery is the modal dialog used for the image gallery -->
-<div id="modal-gallery" class="modal modal-gallery hide fade" data-filter=":odd" tabindex="-1">
-    <div class="modal-header">
-        <a class="close" data-dismiss="modal">&times;</a>
-        <h3 class="modal-title"></h3>
-    </div>
-    <div class="modal-body"><div class="modal-image"></div></div>
-    <div class="modal-footer">
-        <a class="btn modal-download" target="_blank">
-            <i class="icon-download"></i>
-            <span>Download</span>
-        </a>
-        <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">
-            <i class="icon-play icon-white"></i>
-            <span>Slideshow</span>
-        </a>
-        <a class="btn btn-info modal-prev">
-            <i class="icon-arrow-left icon-white"></i>
-            <span>Previous</span>
-        </a>
-        <a class="btn btn-primary modal-next">
-            <span>Next</span>
-            <i class="icon-arrow-right icon-white"></i>
-        </a>
-    </div>
+<!-- The blueimp Gallery widget -->
+<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>
+    <ol class="indicator"></ol>
 </div>
 <!-- The template to display files available for upload -->
 <script id="template-upload" type="text/x-tmpl">
@@ -197,13 +184,13 @@ <h3 class="modal-title"></h3>
         <td>
             <span class="preview">
                 {% if (file.thumbnail_url) { %}
-                    <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
+                    <a href="{%=file.url%}" title="{%=file.name%}" class="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
                 {% } %}
             </span>
         </td>
         <td>
             <p class="name">
-                <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
+                <a href="{%=file.url%}" title="{%=file.name%}" class="{%=file.thumbnail_url?'gallery':''%}" download="{%=file.name%}">{%=file.name%}</a>
             </p>
             {% if (file.error) { %}
                 <div><span class="label label-important">Error</span> {%=file.error%}</div>
@@ -231,9 +218,10 @@ <h3 class="modal-title"></h3>
 <script src="http://blueimp.github.io/JavaScript-Load-Image/load-image.min.js"></script>
 <!-- The Canvas to Blob plugin is included for image resizing functionality -->
 <script src="http://blueimp.github.io/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>
-<!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo -->
+<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
 <script src="http://blueimp.github.io/cdn/js/bootstrap.min.js"></script>
-<script src="http://blueimp.github.io/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></script>
+<!-- blueimp Gallery script -->
+<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery.min.js"></script>
 <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
 <script src="js/jquery.iframe-transport.js"></script>
 <!-- The basic File Upload plugin -->
@@ -253,6 +241,8 @@ <h3 class="modal-title"></h3>
 <!-- The main application script -->
 <script src="js/main.js"></script>
 <!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
-<!--[if gte IE 8]><script src="js/cors/jquery.xdr-transport.js"></script><![endif]-->
+<!--[if gte IE 8]>
+<script src="js/cors/jquery.xdr-transport.js"></script>
+<![endif]-->
 </body> 
 </html>
diff --git a/js/app.js b/js/app.js
@@ -1,5 +1,5 @@
 /*
- * jQuery File Upload Plugin Angular JS Example 1.0.3
+ * jQuery File Upload Plugin Angular JS Example 1.1
  * https://github.com/blueimp/jQuery-File-Upload
  *
  * Copyright 2013, Sebastian Tschan
@@ -41,13 +41,29 @@
         ])
 
         .controller('DemoFileUploadController', [
-            '$scope', '$http',
-            function ($scope, $http) {
+            '$scope', '$http', '$filter', '$window',
+            function ($scope, $http, $filter, $window) {
                 if (!isOnGitHub) {
                     $scope.loadingFiles = true;
                     $scope.options = {
                         url: url
                     };
+                    $scope.display = function ($event, file) {
+                        var images = $filter('filter')($scope.queue, function (file) {
+                            if (file.thumbnail_url) {
+                                return true;
+                            }
+                        });
+                        if ($window.blueimp.Gallery(images, {
+                                index: file,
+                                urlProperty: 'url',
+                                thumbnailProperty: 'thumbnail_url'
+                            })) {
+                            // Prevent the default link action on
+                            // successful Gallery initialization:
+                            $event.preventDefault();
+                        }
+                    };
                     $http.get(url)
                         .then(
                             function (response) {

diff --git a/js/main.js b/js/main.js
@@ -1,5 +1,5 @@
 /*
- * jQuery File Upload Plugin JS Example 8.0.1
+ * jQuery File Upload Plugin JS Example 8.2
  * https://github.com/blueimp/jQuery-File-Upload
  *
  * Copyright 2010, Sebastian Tschan
@@ -10,7 +10,7 @@
  */
 
 /*jslint nomen: true, regexp: true */
-/*global $, window, navigator */
+/*global $, window, navigator, blueimp */
 
 $(function () {
     'use strict';
@@ -73,4 +73,16 @@ $(function () {
         });
     }
 
+    // Show the blueimp Gallery as lightbox when clicking on image links:
+    $('#fileupload .files').on('click', '.gallery', function (event) {
+        // The :even filter removes duplicate links (thumbnail and file name links):
+        if (blueimp.Gallery($('#fileupload .gallery').filter(':even'), {
+                index: this
+            })) {
+            // Prevent the default link action on
+            // successful Gallery initialization:
+            event.preventDefault();
+        }
+    });
+
 });
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "blueimp-file-upload",
-    "version": "8.3.2",
+    "version": "8.4.0",
     "title": "jQuery File Upload",
     "description": "File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.",
     "keywords": [
@@ -49,8 +49,8 @@
     "dependencies": {
         "jquery": ">=1.6",
         "jquery.ui.widget": ">=1.9",
-        "blueimp-tmpl": ">=2.1.0",
-        "blueimp-load-image": ">=1.7.0",
+        "blueimp-tmpl": ">=2.2.0",
+        "blueimp-load-image": ">=1.7.2",
         "blueimp-canvas-to-blob": ">=2.0.5"
     }
 }