# Bilder

Bilder in Storytellr.js

# Inhalt in diesem Abschnitt

Einzelnes Bild
Vollbildmodus
Slideshow

# Einzelnes Bild

Ein einzelnes Bild auf einer Webseite einzubinden ist keine Kunst. Storytellr.js bietet dir die Möglichkeit, die Klasse story-image zu nutzen. Dadurch wird das Bild optimal in deine Storytelling-Webseite eingebunden.

# Komponent einsetzen

Mit dem folgenden Code kannst du Bilder in deiner Storytelling Webseite einsetzen.

<section class="story-section">
  <img class="story-image" src="../path/to/image.jpg" alt="Beschreibung">
</section>
 
        Kopiert!

1
2
3

# Verfügbare CSS-Klassen für Styling

Die folgende CSS-Klasse kann für ein individuelles Styling genutzt werden.

CSS-Klasse	Beschreibung
`.story-image`	Klasse für das Styling der Bilder.

# Vollbildmodus

Manchmal wird das eingebettete Bild für den Nutzer nicht gross genug dargestellt, mit Storytellr.js ist es möglich, dass du das Bild durch einen Klick in einem Vollbildmodus öffnen kannst.

# Komponent einsetzen

Zusätzlich musst du dem Bild eine individuelle ID und die Klasse story-image-zoom zuteilen. Der alt Tag ist in diesem Fall besonders wichtig. Er wird im Vollbildmodus als Bildbeschreibung genutzt.

<section class="story-section">
  <img id="imageFullscreenID01" class="story-image-zoom" src="../path/to/image-zoom-01.jpg" alt="Beschreibung">
  <img id="imageFullscreenID02" class="story-image-zoom" src="../path/to/image-zoom-02.jpg" alt="Beschreibung">
</section>
 
        Kopiert!

1
2
3
4

Damit die Funktionalität bereitgestellt wird, musst du die Funktion ImageFullscreen aufrufen.

new $story.ImageFullscreen({
  imageIds: [ // deine definierten IDs
    'imageFullscreenID01',
    'imageFullscreenID02'
  ]
})
 
        Kopiert!

1
2
3
4
5
6

Parameter	Type	Wert	Beschreibung
`imageIds`*	`Array`	ImageFullscreen-IDs	Deine zuvor definierten IDs im HTML.

# Generierter HTML-Code

<section class="story-section">
  <img id="yourImageZoomId" class="story-image-zoom" src="../path/to/image.jpg" alt="Beschreibung">
    <div id="modal-yourImageZoomId" class="story-image-zoom-modal" style="display: none;">
      <span id="closeModal-yourImageZoomId" class="story-image-zoom-close">×</span>
      <img id="modalContent-yourImageZoomId" class="story-image-zoom-modal-content" src="../path/to/image.jpg" alt="Snow">
      <div id="captionContent-yourImageZoomId" class="story-image-zoom-modal-caption">Beschreibung</div>
    </div>
</section>
 
        Kopiert!

1
2
3
4
5
6
7
8

# Verfügbare CSS-Klassen für Styling

Die folgenden CSS-Klassen können für ein individuelles Styling genutzt werden.

CSS-Klasse	Beschreibung
`.story-image-zoom`	Klasse für das Styling des Bildes, das normal auf der Webseite dargestellt wird.
`.story-image-zoom-modal`	Klasse für das Styling des Modals, das beim Klick aufgerufen wird.
`.story-image-zoom-close`	Klasse für das Styling des Icons `x` zum Schliessen des Modals.
`.story-image-zoom-modal-content`	Klasse für das Styling des Bildes im Modal.
`.story-image-zoom-modal-caption`	Klass für das Styling der Bildbeschreibung im Modal.

# Slideshow

Die Bilder-Slideshow gehört zu der Grundausstattung des Storytellings auf Webseiten. Mit Storytellr kannst du eine sehr einfache Slideshow generieren und anschliessend individuell stylen.

# Komponent einsetzen

Um den Slideshow-Komponenten einzusetzen, benötigst du folgendes HTML-Grundgerüst. Achte beim Einsatz der Bilder darauf, dass du die alt-Attribute definierst. Dadurch können die Bilder besser bei Google gefunden werden.

<section class="story-section">
  <div class="story-image-slideshow" id="imageSlideshow">
    <div class="story-image">
      <img alt="Beschreibung zu Bild 1" src="../src/assets/images/image1.jpg">
      <div class="story-image-caption">
        Beschreibung zu Bild 1
      </div>
    </div>
    <div class="story-image">
      <img alt="Beschreibung zu Bild 2" src="../src/assets/images/image2.jpg">
      <div class="story-image-caption">
        Beschreibung zu Bild 2
      </div>
    </div>
    <div class="story-image">
      <img alt="Beschreibung zu Bild 3" src="../src/assets/images/image3.jpg">
      <div class="story-image-caption">
        Beschreibung zu Bild 3
      </div>
    </div>
  </div>
</section>
 
        Kopiert!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Sobald das HTML-Grundgerüst für die Bilder-Slideshow steht, kannst du die Funktion $story.ImageSlideshow() aufrufen. Diese generiert dir die Slideshow.

new $story.ImageSlideshow({
  id: "imageSlideshow", // deine definierte ID
  imageCount: true, // default: false
  autoplay: 9000, // default: false
  arrows: true, // default: false
  controller: "dot" // default: false
});
 
        Kopiert!

1
2
3
4
5
6
7

Parameter	Type	Wert	Beschreibung
`id`*	`String`	"imageSlideshow"	Deine zuvor definierte ID im HTML.
`imageCount`	`Boolean`	`true` / `false`	Die Nummerierung der Bilder wird oben-links angezeigt.
`autoplay`	`Integer`	Zahl oder `false`	Die Slideshow wird automatisch abgespielt. (Angabe in Millisekunden).
`arrows`	`Boolean`	`true` / `false`	Benötigst du Pfeile links und rechts als Navigation durch die Slideshow?
`controller`	`String`	"dot" oder `false`	Zusätzliche Navigationsmöglichkeit über Bullet-Points.

# Generierter HTML-Code

Aus den obenstehenden Konfigurationen wird folgender HTML-Code generiert.

<section class="story-section">
  <div class="story-image-slideshow" id="imageSlideshow">
    <div class="story-image" style="display: none;">
      <div class="story-slideNumber">1 / 3</div>
      <img alt="Beschreibung zu Bild 1" src="../src/assets/images/image1.jpg">
      <div class="story-image-caption">
        Beschreibung zu Bild 1
      </div>
    </div>
    
    <div class="story-image active-slide" style="display: block;">
      <div class="story-slideNumber">2 / 3</div>
      <img alt="Beschreibung zu Bild 2" src="../src/assets/images/image2.jpg">
      <div class="story-image-caption">
        Beschreibung zu Bild 2
      </div>
    </div>
    
    <div class="story-image" style="display: none;">
      <div class="story-slideNumber">3 / 3</div>
      <img alt="Beschreibung zu Bild 3" src="../src/assets/images/image3.jpg">
      <div class="story-image-caption">
        Beschreibung zu Bild 3
      </div>
    </div>
    
    <a class="story-prevImage" onclick="$story.ImageSlideshow.showNextSlide(&quot;imageSlideshow&quot;, -1)">❮</a>
    <a class="story-nextImage" onclick="$story.ImageSlideshow.showNextSlide(&quot;imageSlideshow&quot;, 1)">❯</a>
    
    <div class="story-image-controllers">
      <span class="story-image-controller-dot" onclick="$story.ImageSlideshow.showCurrentSlide(&quot;imageSlideshow&quot;, 0)"></span>
      <span class="story-image-controller-dot active-controller" onclick="$story.ImageSlideshow.showCurrentSlide(&quot;imageSlideshow&quot;, 1)"></span>
      <span class="story-image-controller-dot" onclick="$story.ImageSlideshow.showCurrentSlide(&quot;imageSlideshow&quot;, 2)"></span>
    </div>
  </div>
</section>
 
        Kopiert!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# Verfügbare CSS-Klassen für Styling

Die folgenden CSS-Klassen können für ein individuelles Styling genutzt werden.

CSS-Klasse	Beschreibung
`.story-image-slideshow`	Klasse für das Styling des Wrappers der Slideshow.
`.story-image`	Klasse für das Styling des Containers des Bildes.
`.story-slideNumber`	Klasse für das Styling der Nummerierung der Bilder.
`.story-image-caption`	Klasse für das Styling der Beschreibung der Bilder.
`.story-prevImage`	Klasse für das Styling des Pfeiles zum vorherigen Bild.
`.story-nextImage`	Klasse für das Styling des Pfeiles zum nächsten Bild.
`.story-image-controllers`	Klasse für das Styling des Wrappers der Controller.
`.story-image-controller-dot`	Klasse für das Styling der einzelnen Controller.
`.active-controller`	Klasse für das Styling des aktiven Controllers.

← Videos Audio →