Issue 4685 - Update images on eyeo.com

includes/jobs/office.md

 Our Cologne office is part of the [Leitrad Lofts](http://www.leitrad.koeln/lage/), a brand new building that we and other startups call home. We created our office rooms with our own ideas and love spending time on our terrace enjoying a BBQ or cooking in our huge kitchen. The Leitrad Lofts are located in Cologne-Ehrenfeld, a district that was once connected to production and manufacturing and is today a place of refined services, as well as a major center for innovative and creative companies. Being near the motorway, three lines of public transportation and the city train offers quick access to all the go-to spots downtown. Happy hour anyone?
 
-[![Our view](/images/office/Cologne_1_150.png)](/images/office/Cologne_1_big.png)
-[![Our neighborhood](/images/office/christmas_150.png)](/images/office/christmas_big.png)
-[![After hours](/images/office/dinner_150.png)](/images/office/dinner_big.png)
-{#office-gallery}
-
-<script src="/js/jquery.lightbox.min.js"></script>
-<link rel="stylesheet" href="/css/jquery.lightbox.css" type="text/css" media="screen">
-<script>
-  jQuery(function()
-  {
-    jQuery("#office-gallery a").lightBox({
-      imageBtnPrev: "/images/lightbox/btn-prev.gif",
-      imageBtnNext: "/images/lightbox/btn-next.gif",
-      imageBtnClose: "/images/lightbox/btn-close.gif",
-      imageLoading: "/images/lightbox/ico-loading.gif",
-      imageBlank: "/images/lightbox/blank.gif"
-    });
-  });
-</script>
+<p class="image-gallery">

[juliandoucette, 2017/01/11 17:44:02]

NIT: Do you think I should separate this HTML and markdown into two separate
files? (The same applies to includes/jobs/why.md)

[juliandoucette, 2017/01/12 15:32:37]

Done.

+  <a href="/images/jobs/office/office-1.png" data-lightbox="office-2">
+    <img alt="eyeo office preview 1" src="/images/jobs/office/office-1-thumb-1x.png" srcset="/images/jobs/office/office-1-thumb-1x.png 1x, /images/jobs/office/office-1-thumb-2x.png 2x" />
+  </a>
+  <a href="/images/jobs/office/office-2.png" data-lightbox="office-2">
+    <img alt="eyeo office preview 2" src="/images/jobs/office/office-1-thumb-1x.png" srcset="/images/jobs/office/office-2-thumb-1x.png 1x, /images/jobs/office/office-2-thumb-2x.png 2x" />
+  </a>
+  <a href="/images/jobs/office/office-3.png" data-lightbox="office-2">
+    <img alt="eyeo office preview 3" src="/images/jobs/office/office-3-thumb-1x.png" srcset="/images/jobs/office/office-3-thumb-1x.png 1x, /images/jobs/office/office-3-thumb-2x.png 2x" />
+  </a>
+  <a href="/images/jobs/office/office-4.png" data-lightbox="office-2">
+    <img alt="eyeo office preview 4" src="/images/jobs/office/office-4-thumb-1x.png" srcset="/images/jobs/office/office-4-thumb-1x.png 1x, /images/jobs/office/office-4-thumb-2x.png 2x" />
+  </a>
+</p>