Webtechnik

Bilder besser präsentieren

Zeigen Sie Ihre schönsten Bilder! Groß, klein, automatisch ablaufend oder animiert - viele Optionen bieten sich zur Präsentation von Fotos im Web an. JavaScript, PHP und Flash sind dabei zwar für tolle Effekte wie geschaffen, aber nicht immer notwendig.

Bilder besser präsentieren

© Hersteller/Archiv

Bilder besser präsentieren

JavaScript, PHP und Flash sind die Klassiker für fesselnde Galerien im Web. Doch auch mit einigen Zeilen HTML-Code erreichen Sie bisweilen bereits das gewünschte Ziel. Wir zeigen Ihnen, wie Sie welche Technik für den passenden Effekt einsetzen.

Tipp 1: Pageflip - Blättern wie im Buch selbst gemacht

Nicht nur als ePaper erfreut sich der Pageflip-Effekt wachsender Beliebtheit. Diese schöne Art der Präsentation eignet sich auch für Bilder, Kataloge oder Fotobücher. Mit einem einfachen JavaScript-Plug-in zusammen mit der freien jQuery-Library in der aktuellen Version und dem HTML-Canvas-Element erzielen Sie großartige Pageflip-Effekte. Laden Sie von der Seite jquery.com die aktuelle Version und folgen Sie den Installationsanweisungen.

Bildergalerien HTML CSS

© Hersteller/Archiv

Einfach, effektiv und kompatibel: Bildergalerien nur mit HTML und CSS sind zu allen gängigen Systemen kompatibel.

Zudem benötigen Sie noch das passende JavaScript, hier: jPageFlip, das Sie auf  jpageflip in Varianten als Download erhalten.

Speichern Sie die JavaScript-Datei auf Ihren Webserver und binden Sie die Datei über folgende Anweisung ein:

<script type="text/javascript">
	$(document).ready(function(){
		$(,#myPageFlip').jPageFlip({
			width: "Bildbreite",
			height: "Bildhoehe",
			// weitere parameter
		});
	});</script>

Platzieren Sie die Bilder innerhalb eines Div-Containers und vergeben Sie eine eindeutige ID. An jedes Bild vergeben Sie die Klasse jPageFlip, damit das Script die Bilder zuordnen kann.

<div> id="PageFlip"><img src="images/bild01.jpg" class="jPageFlip"><img src="images/bild02.jpg" class="jPageFlip">
	...<img src="images/bild10.jpg" class="jPageFlip"></div>

Die Dateinamen müssen Sie nicht fortlaufend nummerieren: Jedes Bild wird durch die Klasse jPageFlip als Teil der Galerie identifiziert.

Tipp 2: Pageflip a la YouTube

Ähnlich wie YouTube für Videos versteht sich Youblisher als Plattform für ePaper- und Pageflip-Publikationen. Das Vorgehen ähnelt sich. Erstellen Sie auf der Weboberfläche einen Account und laden Sie Ihr PDF-Dokument über die Eingabemaske auf den Server. Nun können Sie noch die URL zu Ihrer Webseite angeben und unter verschiedenen Hintergründen und Skins wählen. Den Rest übernimmt Youpublisher. Ihr Pageflip-Dokument können Sie auf Ihrer Webseite einbinden. Darüber hinaus steht es auch auf der Plattform frei zur Verfügung.

youblisher

© Hersteller/Archiv

Bequem: youblisher nimmt Ihnen die Arbeit ab und sorgt für eine Weiterverbreitung Ihrer Dateien.

Youblisher ist eine einfache Möglichkeit, ePaper und Blätterkataloge zu erzeugen. Wenn Sie nicht wollen, dass Ihr Dokument unkontrolliert verbreitet wird, greifen Sie auf eine eigene Lösung zurück.

Tipp 3: Karrussel mit Tiefenwirkung

Durch die Rotation und die Vorschau der weiteren Bilder im Hintergrund ergibt sich ein dreidimensionaler Effekt. Diese Variante eignet sich vor allem, um wenige Bilder schön zu präsentieren.

Das Script rufen Sie auf Ihrer Seite so auf:

<script type="text/javascript">
window.onload =
	function()
	{
		$(,#karussel').Carousel(
			{
				itemWidth: 110,
				itemHeight: 62,
				itemMinWidth: 50,
				items: ,a',
				reflections: .5,
				rotationSpeed: 1.8
			}
		);
	}</script>

Im Content-Bereich Ihres HTML-Dokuments erstellen Sie einen DIV-Container und vergeben eine eindeutige ID. In unserem Beispiel karussel. Alle Bilder, die Bestandteil der Animation sein sollen, müssen innerhalb dieses Containers und einer Link-Anweisung ohne Ziel liegen. Der HTML-Quelltext:

<div id="karussel"><a href="" title=""><img src="" width="100%" /></a><a href="" title=""><img src="" width="100%" /></a><a href="" title=""><img src="" width="100%" /></a></div>

In Ihrer CSS-Datei vergeben Sie Style-Anweisungen wie Größe, Position und Hintergrundfarbe. Möglich sind weitere Formatierungen wie Rahmen oder Schatten. Achten Sie bei der Angabe von Höhe und Breite auf das richtige Seitenverhältnis, um die Bilder nicht zu verzerren.

#karussel{
	width: 700px;
	height: 150px;
	background-color: #111;
	position: absolute;
	top: 200px;
	left: 100px;
}
#karussel a{
	position: absolute;
	width: 110px;
}

Tipp 4: Die einfache Lösung mit HTML-Code

Wer nicht auf Scripte, Erweiterungen und Plug-ins angewiesen sein will, kann seine Bilder per CSS in einer Vorschau-Galerie anzeigen. Die möglichen Effekte sind hier zwar eingeschränkt. Der Vorteil liegt jedoch darin, dass Sie keinerlei Scripte und Plug-ins benötigen und deshalb die Darstellung auf nahezu jeder Plattform und jedem Browser möglich ist. Erstellen Sie eine einfache Liste und vergeben Sie eine Klasse. Der HTML-Quellcode:

<ul class="galerie"><li><a href="#"><img src="images/bild01.jpg"><img class="vorschau" src="images/bild01.jpg"></a></li><li><a href="#"><img src="images/bild02.jpg"><img class="vorschau" src="images/bild02.jpg"></a></li><li><a href="#"><img src="images/bild03.jpg"><img class="vorschau" src="images/bild03.jpg"></a></li></ul>

Deklarieren Sie die Klassen in Ihrer CSS-Datei. Die Größenangeben der Bilder wählen Sie frei. Achten Sie hier darauf, dass die Proportionen erhalten bleiben. Ergänzen Sie eventuell die Stil-Definitionen mit Border-Angaben und Hover-Effekten.

Tipp 5: Direkte-Export aus InDesign ab CS5

InDesign CS5 bietet die bequeme Option, Pageflip-Dokumente im Flash-Format über die integrierte Export-Funktion zu erstellen.

InDesign CS5

© Hersteller/Archiv

Export-Artikel: Im Beispiel sehen Sie die Export-Funktion für PageFlips als SWF-Datei aus InDesign CS5. Für andere Layout- und Grafik-Programme gibt es ebenfalls praktische Zusatzmodule.

Legen Sie ein neues Dokument in der Größe der vorhandenen PDF-Dateien an. Wählen Sie Datei/Platzieren sowie die Checkbox Import-Optionen aktivieren. Bestimmen Sie die Seiten des PDF-Dokuments, die Sie für das PageFlip verwenden. Platzieren Sie jede PDF-Seite auf einer Seite im InDesign-Dokument und speichern Sie die Datei.

Kaufberatung: Shared-Webhosting-Anbieter

Über Datei/Exportieren/SWF gelangen Sie zu einem Optionsfenster. Hier bestimmen Sie die Ausgabegröße, Papierfarbe und wählen zwischen verschiedenen Übergängen. Aktivieren Sie die Option HTML-Dokument erstellen, integriert InDesign beim Export die erzeugte SWF-Datei direkt in den Quelltext.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".