Changeset 1423 in t29-www

Timestamp:

Jan 7, 2018, 1:31:58 AM (5 years ago)

Author:

sven

Message:

Startseite: Exemplarischen Slider (Karoussell) hinzugefügt, mit Platzhalterelementen.

Files:

• de/index.php (modified) (1 diff)
• lib/ressourceloader.php (modified) (1 diff)
• shared/css-v6/pagestyles/startseite.css (modified) (1 diff)
• shared/js-v6/libs/flickity.pkgd.min.js (added)

de/index.php

@@ -8 +8 @@
 
 <header class="teaser seitenstart">
-        <h2>
-        Vergangenheit verstehen <br>
-        <span class="subtext">Zukunft gestalten</span>
-        </h2>
-        <img class="no-copyright" src="/shared/photos/start/startseite.jpg" width="940" height="289">
+<div class="slider-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
+        <!-- Erstes Bild (Noscript: Default) -->
+        <div class="slide">
+                <h2>
+                Vergangenheit verstehen <br>
+                <span class="subtext">Zukunft gestalten</span>
+                </h2>
+                <img class="no-copyright" src="/shared/photos/start/startseite.jpg" width="940" height="289">
+        </div>
+
+        <!-- Zweites Bild (nur mit JavaScript) -->
+        <div class="slide js">
+                <h2>
+                Mit Mechanischer Rechnertechnik<br>
+                <span class="subtext">und weiter</span>
+                </h2>
+                <img class="no-copyright" src="/shared/photos/rechnertechnik/header-mechanik.jpg" width="940" height="289">
+        </div>
+
+        <!-- Zweites Bild (nur mit JavaScript) -->
+        <div class="slide js">
+                <h2>
+                Und Speichermedien<br>
+                <span class="subtext">und weiter</span>
+                </h2>
+                <img class="no-copyright" src="/shared/photos/rechnertechnik/speichermedien/header-memory.jpg" width="940" height="289">
+        </div>
+</div>
 </header>
-
 
 

lib/ressourceloader.php

@@ -209 +209 @@
                                 $urls[] = 'http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAraTKZ5cINardZ8ITNVssKhRcOoEBtCgYLJRQznXYEV8m1M3fRRRT9wMSvFwhyo62fD3KyiwQxe5ruw';
                                 break;
+                        case 'startseite':
+                                $urls[] = '/shared/js-v6/libs/flickity.pkgd.min.js'; // Caroussel-Slider
+                                break;
                 }
                 return $urls;

shared/css-v6/pagestyles/startseite.css

@@ -250 +250 @@
 }
 
+
+/*** Slider (http://meandmax.github.io/lory/) Styles ***/
+/*** Started 2018-01-07 ***/
+
+header h2 a.anchor { /* Keine Ablenkung */
+        display: none;
+}
+
+/*! Flickity v2.0.10
+http://flickity.metafizzy.co
+---------------------------------------------- */
+
+.flickity-enabled {
+  position: relative;
+}
+
+.flickity-enabled:focus { outline: none; }
+
+.flickity-viewport {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+}
+
+.flickity-slider {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+/* draggable */
+
+.flickity-enabled.is-draggable {
+  -webkit-tap-highlight-color: transparent;
+          tap-highlight-color: transparent;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.flickity-enabled.is-draggable .flickity-viewport {
+  cursor: move;
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+
+.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+
+/* ---- previous/next buttons ---- */
+
+.flickity-prev-next-button {
+  position: absolute;
+  top: 50%;
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: 50%;
+  background: white;
+  background: hsla(0, 0%, 100%, 0.75);
+  cursor: pointer;
+  /* vertically center */
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+
+.flickity-prev-next-button:hover { background: white; }
+
+.flickity-prev-next-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 5px #09F;
+}
+
+.flickity-prev-next-button:active {
+  opacity: 0.6;
+}
+
+.flickity-prev-next-button.previous { left: 10px; }
+.flickity-prev-next-button.next { right: 10px; }
+/* right to left */
+.flickity-rtl .flickity-prev-next-button.previous {
+  left: auto;
+  right: 10px;
+}
+.flickity-rtl .flickity-prev-next-button.next {
+  right: auto;
+  left: 10px;
+}
+
+.flickity-prev-next-button:disabled {
+  opacity: 0.3;
+  cursor: auto;
+}
+
+.flickity-prev-next-button svg {
+  position: absolute;
+  left: 20%;
+  top: 20%;
+  width: 60%;
+  height: 60%;
+}
+
+.flickity-prev-next-button .arrow {
+  fill: #333;
+}
+
+/* ---- page dots ---- */
+
+.flickity-page-dots {
+  position: absolute;
+  width: 100%;
+  bottom: -25px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  text-align: center;
+  line-height: 1;
+}
+
+.flickity-rtl .flickity-page-dots { direction: rtl; }
+
+.flickity-page-dots .dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin: 0 8px;
+  background: #333;
+  border-radius: 50%;
+  opacity: 0.25;
+  cursor: pointer;
+}
+
+.flickity-page-dots .dot.is-selected {
+  opacity: 1;
+}