Login

Einzelbilder

Für die Präsentation eines Einzelbildes in einer Lightbox reicht es aus, ein Bild oder Text auf das Bild zu verlinken, das in der Lightbox präsentiert werden soll.

Codebeispiel:

<a href="path/to/grosses_bild.jpg">
<img src="path/to/kleines_bild.jpg" alt="Bild">
</a>

Wenn Sie nicht wollen, dass JEDES verlinkte Bild in einer Lightbox geöffnet wird, fügen Sie dem JavaScript Aufruf von shutterOnload im head Bereich der Seite ein 'sh' zwischen den Klammern hinzu.

Codebeispiel:

<script>
shutterOnload = function(){shutterMobile.Init('sh');}
</script>

Dann werden nur Bilder, die mit der Klasse "shutter" verlinkt sind, in einer Lightbox geöffnet.

Codebeispiel:

<a href="path/to/grosses_bild.jpg" class="shutter">
<img src="path/to/kleines_bild.jpg" alt="Bild">
</a>

Bilderserien

Mit ShutterMobile können Bilderserien zusammengestellt werden, ganz ohne aufwändige Installation einer Galerie Software.

Dazu muss man lediglich den Links auf das Bild, das in der Lightbox präsentiert werden soll, die Klasse "shutterset" mitgeben, dann werden alle Bilder, deren Links die Klasse "shutterset" zugewiesen ist, von ShutterMobile in einer Slideshow präsentiert.

Codebeispiel:

<a href="path/to/grosses_bild.jpg" class="shutterset">
<img src="path/to/kleines_bild.jpg" alt="Bild">
</a>

Sie können die Bilder auch in verschiedene Serien gruppieren, dazu muss nach "shutterset" ein Unterstrich und ein "Setname" angehängt werden, das kann auch eine Zahl sein. Im folgenden Codebeispiel werden alle Bilder, deren Links die Klasse "shutterset_1" zugewiesen ist, von ShutterMobile in einer Slideshow präsentiert.

Codebeispiel:

<a href="path/to/grosses_bild.jpg" class="shutterset_1">
<img src="path/to/kleines_bild.jpg" alt="Bild">
</a>

Wenn Sie dem Link noch andere Klassen mitgeben wollen (z. B. für's Styling), sollte die Klasse "shutterset" die erste sein.

Codebeispiel:

<a href="path/to/grosses_bild.jpg" class="shutterset_1 your_class">
<img src="path/to/kleines_bild.jpg" alt="Bild">
</a>