Skip to content

Commit ef90abe

Browse files
mk1012mk1012
committed
Bilder eingefügt mit Lightbox Image Viewer.
1 parent d02e8fc commit ef90abe

File tree

11 files changed

+274
-2
lines changed

11 files changed

+274
-2
lines changed

‎css/coderdojoka.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -669,4 +669,20 @@ body {
669669
border-bottom-right-radius: 4px;
670670
border-bottom-left-radius: 4px;
671671

672+
}
673+
674+
/* Um Bilder rechtsbündig anzuzeigen */
675+
676+
.rechts_400 {
677+
max-width: 400px;
678+
float: none;
679+
margin-left: 0;
680+
}
681+
682+
@media (min-width: 768px) {
683+
684+
.rechts_400 {
685+
float: right;
686+
margin-left: 5px;
687+
}
672688
}

‎css/lightbox.css‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
/* Preload images */
2+
body:after {
3+
content: url(../img/lightbox/close.png) url(../img/lightbox/loading.gif) url(../img/lightbox/prev.png) url(../img/lightbox/next.png);
4+
display: none;
5+
}
6+
7+
.lightboxOverlay {
8+
position: absolute;
9+
top: 0;
10+
left: 0;
11+
z-index: 9999;
12+
background-color: black;
13+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
14+
opacity: 0.8;
15+
display: none;
16+
}
17+
18+
.lightbox {
19+
position: absolute;
20+
left: 0;
21+
width: 100%;
22+
z-index: 10000;
23+
text-align: center;
24+
line-height: 0;
25+
font-weight: normal;
26+
}
27+
28+
.lightbox .lb-image {
29+
display: block;
30+
height: auto;
31+
max-width: inherit;
32+
-webkit-border-radius: 3px;
33+
-moz-border-radius: 3px;
34+
-ms-border-radius: 3px;
35+
-o-border-radius: 3px;
36+
border-radius: 3px;
37+
}
38+
39+
.lightbox a img {
40+
border: none;
41+
}
42+
43+
.lb-outerContainer {
44+
position: relative;
45+
background-color: white;
46+
*zoom: 1;
47+
width: 250px;
48+
height: 250px;
49+
margin: 0 auto;
50+
-webkit-border-radius: 4px;
51+
-moz-border-radius: 4px;
52+
-ms-border-radius: 4px;
53+
-o-border-radius: 4px;
54+
border-radius: 4px;
55+
}
56+
57+
.lb-outerContainer:after {
58+
content: "";
59+
display: table;
60+
clear: both;
61+
}
62+
63+
.lb-container {
64+
padding: 4px;
65+
}
66+
67+
.lb-loader {
68+
position: absolute;
69+
top: 43%;
70+
left: 0;
71+
height: 25%;
72+
width: 100%;
73+
text-align: center;
74+
line-height: 0;
75+
}
76+
77+
.lb-cancel {
78+
display: block;
79+
width: 32px;
80+
height: 32px;
81+
margin: 0 auto;
82+
background: url(../img/lightbox/loading.gif) no-repeat;
83+
}
84+
85+
.lb-nav {
86+
position: absolute;
87+
top: 0;
88+
left: 0;
89+
height: 100%;
90+
width: 100%;
91+
z-index: 10;
92+
}
93+
94+
.lb-container > .nav {
95+
left: 0;
96+
}
97+
98+
.lb-nav a {
99+
outline: none;
100+
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
101+
}
102+
103+
.lb-prev, .lb-next {
104+
height: 100%;
105+
cursor: pointer;
106+
display: block;
107+
}
108+
109+
.lb-nav a.lb-prev {
110+
width: 34%;
111+
left: 0;
112+
float: left;
113+
background: url(../img/lightbox/prev.png) left 48% no-repeat;
114+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
115+
opacity: 0;
116+
-webkit-transition: opacity 0.6s;
117+
-moz-transition: opacity 0.6s;
118+
-o-transition: opacity 0.6s;
119+
transition: opacity 0.6s;
120+
}
121+
122+
.lb-nav a.lb-prev:hover {
123+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
124+
opacity: 1;
125+
}
126+
127+
.lb-nav a.lb-next {
128+
width: 64%;
129+
right: 0;
130+
float: right;
131+
background: url(../img/lightbox/next.png) right 48% no-repeat;
132+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
133+
opacity: 0;
134+
-webkit-transition: opacity 0.6s;
135+
-moz-transition: opacity 0.6s;
136+
-o-transition: opacity 0.6s;
137+
transition: opacity 0.6s;
138+
}
139+
140+
.lb-nav a.lb-next:hover {
141+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
142+
opacity: 1;
143+
}
144+
145+
.lb-dataContainer {
146+
margin: 0 auto;
147+
padding-top: 5px;
148+
*zoom: 1;
149+
width: 100%;
150+
-moz-border-radius-bottomleft: 4px;
151+
-webkit-border-bottom-left-radius: 4px;
152+
border-bottom-left-radius: 4px;
153+
-moz-border-radius-bottomright: 4px;
154+
-webkit-border-bottom-right-radius: 4px;
155+
border-bottom-right-radius: 4px;
156+
}
157+
158+
.lb-dataContainer:after {
159+
content: "";
160+
display: table;
161+
clear: both;
162+
}
163+
164+
.lb-data {
165+
padding: 0 4px;
166+
color: #ccc;
167+
}
168+
169+
.lb-data .lb-details {
170+
width: 85%;
171+
float: left;
172+
text-align: left;
173+
line-height: 1.1em;
174+
}
175+
176+
.lb-data .lb-caption {
177+
font-size: 13px;
178+
font-weight: bold;
179+
line-height: 1em;
180+
}
181+
182+
.lb-data .lb-number {
183+
display: block;
184+
clear: left;
185+
padding-bottom: 1em;
186+
font-size: 12px;
187+
color: #999999;
188+
}
189+
190+
.lb-data .lb-close {
191+
display: block;
192+
float: right;
193+
width: 30px;
194+
height: 30px;
195+
background: url(../img/lightbox/close.png) top right no-repeat;
196+
text-align: right;
197+
outline: none;
198+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
199+
opacity: 0.7;
200+
-webkit-transition: opacity 0.2s;
201+
-moz-transition: opacity 0.2s;
202+
-o-transition: opacity 0.2s;
203+
transition: opacity 0.2s;
204+
}
205+
206+
.lb-data .lb-close:hover {
207+
cursor: pointer;
208+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
209+
opacity: 1;
210+
}

‎img/codo/bild_1.jpg‎

2.46 MB
Loading

‎img/codo/bild_2.jpg‎

2.23 MB
Loading

‎img/codo/bild_3.jpg‎

2.4 MB
Loading

‎img/lightbox/close.png‎

280 Bytes
Loading

‎img/lightbox/loading.gif‎

8.28 KB
Loading

‎img/lightbox/next.png‎

1.32 KB
Loading

‎img/lightbox/prev.png‎

1.33 KB
Loading

‎index.html‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@
1919
<!-- Bootstrap Core CSS -->
2020
<link href="css/bootstrap.min.css" rel="stylesheet">
2121

22+
<!-- Lightbox Image Viewer CSS -->
23+
<link href="css/lightbox.css" rel="stylesheet">
24+
2225
<!-- Custom CSS -->
2326
<link href="css/coderdojoka.css" rel="stylesheet">
2427

@@ -143,11 +146,18 @@ <h2>Was ist ein CoderDojo?</h2>
143146
Jugendlichen Computer, Technik und besonders Programmieren näher zu bringen. Die Webseite dazu ist <a
144147
href=https://coderdojo.com/>hier</a> zu finden.</p>
145148

149+
146150
<h2>Warum CoderDojo?</h2>
147151

152+
148153
<p>Programmieren zu können ist eine Fähigkeit, die heutzutage immer wichtiger wird. Wie mit den meisten
149-
Fähigkeiten ist es am besten Programmieren schon in frühen Jahren zu lernen. Leider ist Programmieren
150-
noch kein fester Bestandteil im Schulalltag der Kinder. Wir wollen deshalb ein CoderDojo in Karlsruhe
154+
Fähigkeiten ist es am besten Programmieren schon in frühen Jahren zu lernen.
155+
Leider ist Programmieren noch kein fester Bestandteil im Schulalltag der Kinder.
156+
<a href="img/codo/bild_1.jpg" data-lightbox="codo-bilder" data-title="Mit zweiter Tastatur gehts besser!">
157+
<img class="img-thumbnail rechts_400" src="img/codo/bild_1.jpg" alt=""/>
158+
</a>
159+
160+
Wir wollen deshalb ein CoderDojo in Karlsruhe
151161
einrichten, um interessierten Kindern die Möglichkeit zu geben Programmieren zu lernen. In Deutschland
152162
gibt es derzeit schon ein paar CoderDojos, das uns am nächsten gelegene ist in <a
153163
href=https://coderdojohd.github.io>Heidelberg</a>.</p>
@@ -335,6 +345,12 @@ <h2>Was wird unterrichtet? Gibt es einen Plan?</h2>
335345
<div class="col-lg-8 col-lg-offset-2">
336346
<h2>Wie mache ich mit?</h2>
337347

348+
349+
<a href="img/codo/bild_2.jpg" data-lightbox="codo-bilder" data-title="Spaß mit Scratch">
350+
<img class="img-thumbnail" src="img/codo/bild_2.jpg" alt=""/>
351+
</a>
352+
353+
338354
<p>Um uns die Planung der Treffen zu erleichtern, sollte sich jeder, der teilnehmen will, vorher bei uns per
339355
<a href="mailto:coderdojo.karlsruhe@gmail.com">Mail</a> anmelden. Wenn ihr das erste Mal kommt, ist es
340356
auch gut für uns vorher zu wissen, wie alt ihr seit und was für Vorkentnisse ihr mitbringt.</p>
@@ -353,6 +369,11 @@ <h2>Wie werde ich Mentor?</h2>
353369

354370
<p>Wir sind noch auf der Suche nach weiteren Mentoren. Falls ihr Interesse habt als Mentor beim CoderDojo Karlsruhe mitzumachen,
355371
schreibt uns einfach eine <a href="mailto:coderdojo.karlsruhe@gmail.com">Mail</a>.</p>
372+
373+
<a href="img/codo/bild_3.jpg" data-lightbox="codo-bilder" data-title="Konzentriert am Arbeiten :)">
374+
<img class="img-thumbnail" src="img/codo/bild_3.jpg" alt=""/>
375+
</a>
376+
356377
</div>
357378
</div>
358379
</div>
@@ -429,6 +450,9 @@ <h2>Unterstützer</h2>
429450
<!-- Plugin JavaScript -->
430451
<script src="js/jquery.easing.min.js"></script>
431452

453+
<!-- Image Viewer Plugin -->
454+
<script src="js/lightbox.min.js"></script>
455+
432456
<!-- Google Maps API -->
433457
<script type="text/javascript"
434458
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyANKFqb2CrR93rUb6kfU6XnqepBGJoFk0M"></script>
@@ -461,6 +485,15 @@ <h2>Unterstützer</h2>
461485
<!-- Custom Theme JavaScript -->
462486
<script src="js/coderdojoka.js"></script>
463487

488+
<!-- Init Lightbox -->
489+
<script>
490+
lightbox.option({
491+
'resizeDuration': 400,
492+
'wrapAround': true,
493+
'fitImagesInViewport': true
494+
})
495+
</script>
496+
464497
</body>
465498

466499
</html>

0 commit comments

Comments
 (0)