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.
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 ge...
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.
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 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.
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.
