[+]: example for bower ...

app/views/tpl_base.twig

@@ -21,6 +21,7 @@
   {# CSS #}
   {% block head_css %}
     <link rel="stylesheet" href="/vendor/bower/font-awesome/css/font-awesome.css">
+    <link rel="stylesheet" href="/vendor/bower/magnific-popup/dist/magnific-popup.css">
     <link rel="stylesheet" href="/css-min/app.css">
   {% endblock %}
 

app/views/tpl_index.twig

@@ -161,8 +161,9 @@
 
       <hr>
 
-      <img src="images/rheinisches_industriemuseum.jpg" class="img-responsive">
-
+      <a href="/images/rheinisches_industriemuseum.jpg" class="with-caption image-link" title="Rheinisches Industriemuseum">
+        <img src="/images/rheinisches_industriemuseum.jpg" class="img-responsive">
+      </a>    
       <hr>
     </div>
     <!--/col-->

web/.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "vendor/bower/"
+}

web/Gruntfile.js

@@ -84,7 +84,8 @@ module.exports = function(grunt) {
           sourceMap: true
         },
         src: [
-          'vendor/bower/bootstrap-sass/dist/js/bootstrap.min.js'
+          'vendor/bower/bootstrap-sass/dist/js/bootstrap.min.js',
+          'vendor/bower/magnific-popup/dist/jquery.magnific-popup.min.js'
         ],
         dest: 'js/plugins.js'
       }

web/bower.json

@@ -6,6 +6,7 @@
     "normalize-scss": "3.*",
     "font-awesome": "4.0.*",
     "bootstrap-sass": "3.*",
-    "jquery": "2.*"
+    "jquery": "2.*",
+    "magnific-popup": "~0.9.9"
   }
 }

web/js/app.js

@@ -35,5 +35,37 @@ $(document).ready(function () {
     '<a target="_blank" href="http://www.openstreetmap.org/?lat=51.475675&lon=6.850315&zoom=17&layers=B000FTFTT&mlat=51.47569&mlon=6.85032">Grö&szlig;ere Karte anzeigen</a>' +
     '</small>'
   );
+
+  // image-popup
+  $('.without-caption').magnificPopup({
+    type: 'image',
+    closeOnContentClick: true,
+    closeBtnInside: false,
+    mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
+    image: {
+      verticalFit: true
+    },
+    zoom: {
+      enabled: true,
+      duration: 300 // don't foget to change the duration also in CSS
+    }
+  });
+
+  $('.with-caption').magnificPopup({
+    type: 'image',
+    closeOnContentClick: true,
+    closeBtnInside: false,
+    mainClass: 'mfp-with-zoom mfp-img-mobile',
+    image: {
+      verticalFit: true,
+      titleSrc: function(item) {
+        return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>';
+      }
+    },
+    zoom: {
+      enabled: true
+    }
+  });
+
 
 });