Layout: show embedded images in lightbox [closes #49]

Author: f3l1x

gulp.front.js

@@ -17,7 +17,8 @@ module.exports = function () {
 
     gulp.task('front-css-remote', function () {
         remoteSrc([
-            'twitter-bootstrap/3.3.6/css/bootstrap.min.css'
+            'twitter-bootstrap/3.3.6/css/bootstrap.min.css',
+            'magnific-popup.js/1.1.0/magnific-popup.min.css'
         ], {
             base: 'https://cdnjs.cloudflare.com/ajax/libs/'
         })
@@ -49,7 +50,8 @@ module.exports = function () {
             'handlebars.js/4.0.3/handlebars.min.js',
             'chosen/1.4.2/chosen.jquery.min.js',
             'canvasjs/1.7.0/canvasjs.min.js',
-            'clipboard.js/1.5.5/clipboard.min.js'
+            'clipboard.js/1.5.5/clipboard.min.js',
+            'magnific-popup.js/1.1.0/jquery.magnific-popup.min.js'
         ], {
             base: 'https://cdnjs.cloudflare.com/ajax/libs/'
         })

www/assets/front/js/main.js

@@ -93,6 +93,16 @@ $(function () {
         Componette.selectable($(this));
     });
 
+    // Embedded images in README
+    $('.readme').find('img').each(function (i, e) {
+        var $img = $(e).closest('a');
+        if ($img.attr('href').match(/\.(jpeg|jpg|gif|png)$/) != null) {
+            $img.magnificPopup({
+                type: 'image'
+            });
+        }
+    });
+
     // Stats
     (function () {
         var $addon = $('#addon-stats');