Bilder mit Thumbnails und Lightbox

web/contents/design.fragment

@@ -213,19 +213,24 @@
           
             <p>Zunächst haben wir die Variante ohne Raster und Verlauf getestet, die ursprünglich für den Schneidplotter entwickelt wurde. Das ging ohne Probleme.</p>
 
-            <img src="img/siebdruck_ohne_raster.jpg">
+            <a href="img/siebdruck/siebdruck_ohne_raster.jpg" data-lightbox="roadtrip"><img src="img/siebdruck/thumb_siebdruck_ohne_raster.jpg" class="imgthumb"></a>
+
 
             <p>Eine Version mit groberer Rasterung funktionierte auch erstaunlich gut.</p>
 
-            <img src="img/siebdruck_mit_raster.jpg">
+            <a href="img/siebdruck/siebdruck_mit_raster.jpg" data-lightbox="roadtrip"><img src="img/siebdruck/thumb_siebdruck_mit_raster.jpg" class="imgthumb"></a>
 
             <p>Letztlich haben wir mehrere verschiedene Farben gleichzeitig auf das Sieb aufgebracht und in einem Durchgang verstrichen, um Motive mit Farbstreifen bzw. Farbverlauf zu erzeugen. Das war etwas anspruchsvoller, aber offenbar auch für uns Anfängerinnen zu schaffen.</p>
 
-            <img src="img/siebdruck_verlauf.jpg">
+            <a href="img/siebdruck/siebdruck_verlauf_1.jpg" data-lightbox="roadtrip"><img src="img/siebdruck/thumb_siebdruck_verlauf_1.jpg" class="imgthumb"></a>
+            <a href="img/siebdruck/siebdruck_verlauf_2.jpg" data-lightbox="roadtrip"><img src="img/siebdruck/thumb_siebdruck_verlauf_2.jpg" class="imgthumb"></a>
+            <a href="img/siebdruck/siebdruck_verlauf_3.jpg" data-lightbox="roadtrip"><img src="img/siebdruck/thumb_siebdruck_verlauf_3.jpg" class="imgthumb"></a>
+            <a href="img/siebdruck/siebdruck_verlauf_4.jpg" data-lightbox="roadtrip"><img src="img/siebdruck/thumb_siebdruck_verlauf_4.jpg" class="imgthumb"></a>
 
-            <p>Siebdruck kannst du nicht nur von großen Firmen ausführen lassen - auch viele linke Gruppen, Jugendzentren, Do-it-Yourself-Werkstätten und Kollektive haben Ausrüstung für den Siebdruck. Für den Fall, dass du selbst Siebdruck ausprobieren möchtest, kannst du hier unsere <a href="">Druckvorlage</a> herunterladen.</p>
+            <p>Siebdruck kannst du nicht nur von großen Firmen ausführen lassen - auch viele linke Gruppen, Jugendzentren, Do-it-Yourself-Werkstätten und Kollektive haben Ausrüstung für den Siebdruck. Für den Fall, dass du selbst Siebdruck ausprobieren möchtest, kannst du hier unsere <a href="">Druckvorlage herunterladen</a>.</p>
+
+            <a href="img/siebdruck/siebdruck_vorlage_16x16o.png" data-lightbox="roadtrip"><img src="img/siebdruck/thumb_siebdruck_vorlage_16x16o.png" class="imgthumb"></a>
 
-            <img src="img/siebdruck_vorlage.png">
 
             <h2>Transferfolie</h2>
             <p>Es gibt Transferfolie, die du zuhause mit einem Tintenstrahl- oder Laserdrucker bedrucken kannst, um sie dann mit einem Bügeleisen auf den Stoff aufzubringen. Die Qualität ist nicht so gut wie bei den anderen Verfahren, und du kannst damit keinen Transparenzverlauf umsetzen (auch nicht mit Raster), wie er für den Schatten nötig wäre.</p>
@@ -241,3 +246,4 @@
     queer.initPreviewLogo();
     queer.initColors();
 </script>
+<script src="js/lightbox.min.js"></script>

web/contents/head.fragment

@@ -21,6 +21,7 @@
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/main.css">
   <link rel="stylesheet" href="css/fonts.css">
+  <link rel="stylesheet" href="css/lightbox.min.css"/>
 
   <meta name="theme-color" content="#fafafa">
   <script src="js/vendor/modernizr-3.7.1.min.js"></script>

web/css/lightbox.min.css

@@ -0,0 +1 @@
+.lb-loader,.lightbox{text-align:center;line-height:0;position:absolute;left:0}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{width:100%;z-index:10000;font-weight:400;outline:0}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;border:4px solid #fff}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-outerContainer:after{content:"";display:table;clear:both}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../img/lightbox/loading.gif) no-repeat}.lb-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(../img/lightbox/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../img/lightbox/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{content:"";display:table;clear:both}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../img/lightbox/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}

web/css/main.css

@@ -308,7 +308,11 @@ strong {
   }
 }
 
-
+.imgthumb {
+  width: 256px;
+  height: 256px;
+  margin: 16px;
+}
 
 #mainlogo {
   width:90%;