HTML-Prototype Schulpaket

<insert-markup>4.11-</insert-markup>

Er hört leise Schritte hinter sich:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa

Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen?

Er konnte die Aufforderung stehen zu bleiben schon hören. Gehetzt sah er sich um. Plötzlich erblickte er den schmalen Durchgang. Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag.

Markup: templates/output/06-components/lightbox.html


<div class="frame frame-type-textmedia" id="c29917">
  <header>
    <h2>Er hört leise Schritte hinter sich:</h2>
  </header>
  <div class="ce-textpic ce-center ce-above">
    <div class="ce-gallery" data-gallery-columns="3">
      <figure class="image"><a class="c-lightbox" href="https://picsum.photos/id/11//1200/600" title="Bild vergrößern" data-group="gallery-453">
          <picture data-container-images="">
            <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/11/500/250, https://picsum.photos/id/11/1000/500 2x" data-source-500="https://picsum.photos/id/11/600/300, https://picsum.photos/id/11/1200/600 2x" data-source-600="https://picsum.photos/id/11/700/350, https://picsum.photos/id/11/1400/700 2x" data-source-700="https://picsum.photos/id/11/800/400, https://picsum.photos/id/11/1600/800 2x" data-source-default="https://picsum.photos/id/11/400/200, https://picsum.photos/id/11/800/400 2x"/><img src="https://picsum.photos/id/11/800/400, https://picsum.photos/id/11/1600/800 2x" width="800" height="400" alt="#"/>
          </picture></a>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
      <figure class="image"><a class="c-lightbox" href="https://picsum.photos/id/13//1200/600" title="Bild vergrößern" data-group="gallery-453">
          <picture data-container-images="">
            <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/13/500/250, https://picsum.photos/id/13/1000/500 2x" data-source-500="https://picsum.photos/id/13/600/300, https://picsum.photos/id/13/1200/600 2x" data-source-600="https://picsum.photos/id/13/700/350, https://picsum.photos/id/13/1400/700 2x" data-source-700="https://picsum.photos/id/13/800/400, https://picsum.photos/id/13/1600/800 2x" data-source-default="https://picsum.photos/id/13/400/200, https://picsum.photos/id/13/800/400 2x"/><img src="https://picsum.photos/id/13/800/400, https://picsum.photos/id/13/1600/800 2x" width="800" height="400" alt="#"/>
          </picture></a>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
      <figure class="image"><a class="c-lightbox" href="https://picsum.photos/id/15//1200/600" title="Bild vergrößern" data-group="gallery-453">
          <picture data-container-images="">
            <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/15/500/250, https://picsum.photos/id/15/1000/500 2x" data-source-500="https://picsum.photos/id/15/600/300, https://picsum.photos/id/15/1200/600 2x" data-source-600="https://picsum.photos/id/15/700/350, https://picsum.photos/id/15/1400/700 2x" data-source-700="https://picsum.photos/id/15/800/400, https://picsum.photos/id/15/1600/800 2x" data-source-default="https://picsum.photos/id/15/400/200, https://picsum.photos/id/15/800/400 2x"/><img src="https://picsum.photos/id/15/800/400, https://picsum.photos/id/15/1600/800 2x" width="800" height="400" alt="#"/>
          </picture></a>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
      <figure class="image"><a class="c-lightbox" href="https://picsum.photos/id/16//1200/600" title="Bild vergrößern" data-group="gallery-453">
          <picture data-container-images="">
            <source srcset="#" media="(min-width: 0)" data-source-400="https://picsum.photos/id/16/500/250, https://picsum.photos/id/16/1000/500 2x" data-source-500="https://picsum.photos/id/16/600/300, https://picsum.photos/id/16/1200/600 2x" data-source-600="https://picsum.photos/id/16/700/350, https://picsum.photos/id/16/1400/700 2x" data-source-700="https://picsum.photos/id/16/800/400, https://picsum.photos/id/16/1600/800 2x" data-source-default="https://picsum.photos/id/16/400/200, https://picsum.photos/id/16/800/400 2x"/><img src="https://picsum.photos/id/16/800/400, https://picsum.photos/id/16/1600/800 2x" width="800" height="400" alt="#"/>
          </picture></a>
        <figcaption class="image-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</figcaption>
      </figure>
    </div>
    <div class="ce-bodytext">
      <p>Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen?</p>
      <p>Er konnte die Aufforderung stehen zu bleiben schon hören. Gehetzt sah er sich um. Plötzlich erblickte er den schmalen Durchgang. Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag.</p>
    </div>
  </div>
</div>

Source: assets/sass/06-components/_components.lightbox.scss, line 1

Lightbox