Website Workshop Teil 6

Die Portfolio Seite, Foto-Galerie

Fertige Scripts für Fotogalerien gibt es mittlerweile wie Sand am Meer. Um auch denjenigen den Einsatz zu ermöglichen, die keinen php fähigen Webspace haben, möchte ich hier auf die Javascript Bibliothek JQuery setzen.

Bekannt dafür sind die sog. Lightbox Varianten. Bei Klick auf eine Vorschaugrafik (Thumbnail) öffnet sich animiert eine Overlay-Ansicht und der Hintergrund wird abgedunkelt.

Auf Matteo Bicocchi's Blog habe ich eine schöne Variante die sog. mbGallery gefunden, die zudem gleich eine Diashow beinhaltet und noch weitere interessanten Features aufweist. Für die Zukunft ist sogar die Anzeige der EXIF Daten der Bilder geplant (zur Zeit noch in der Entwicklung).

Geht daher auf Matteo's Blog. Dort findet ihr einen dicken Button, mit "Save" beschriftet und ladet damit die ZIP-Datei runter. Die dort enthaltenen Verzeichnisse und Dateien entpackt ihr in das Hauptverzeichnis wo auch eure Website liegt.

Dann solltet ihr folgende zusätzlichen Verzeichnisse haben:
/css
/gallery1
/gallery2
/inc
/licenses


In gallery1 und 2 sind dann unter /HR die großen, eigentlichen Fotos enthalten. Unter /LR befinden sich nur die 100x100px Vorschaugrafiken (Thumbs).
Die Bilder sind jeweils mit 01, 02, 03 usw. vom Dateinamen durchnummeriert. Ersetzt diese Bilder & Thumbs durch Eure eigenen. Für die Demoseite habe ich jeweils 5 Fotos benutzt. Für die Fotos unter /HR habe ich durchgängig die Abmaße 800 x 600 Pixel benutzt.


Wie binden wir nun JQuery ein:

Als Vorlage könnt ihr die index.html nehmen, kopieren und nach portfolio.html umbenennen. Die nicht benötigten Teile im Container #leftcol und #rightcol schmeisst ihr raus. Im <head> Bereich nun die folgenden Zeilen ergänzen.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="/inc/mbGallery.js"></script>
<script type="text/javascript" src="/inc/jquery.exif.js"></script>

<script type="text/javascript">
$(function(){

//these are the default settings for the component
// you can redefine this defaults or change each parameter on the component call
$.fn.mbGallery.defaults={
containment:"body",
cssURL:"css/",
skin:"white",
overlayBackground:"#ccc",
exifData:false, //todo

galleryTitle:"My Gallery",
imageSelector: ".imgFull",
thumbnailSelector: ".imgThumb",
titleSelector: ".imgTitle",
descSelector: ".imgDesc",

minWidth: 300,
minHeight: 200,
maxWidth: 0,
maxHeight: 0,
fullScreen:true,
addRaster:false,
overlayOpacity:.9,
startFrom: 0,//"random"
fadeTime: 500,
slideTimer: 1000,
autoSlide: true,

onOpen:function(){},
onBeforeClose:function(){},
onClose:function(){},
onChangePhoto:function(){}
};
});

//this is a direct call on document load
$('#g1').mbGallery({overlayBackground:'#f0f0f0', overlayOpacity:.8});

// this is a call attached to an event
$('#galleryOpener')
.bind("click", function(){
$('#g1').mbGallery({overlayBackground:'#f0f0f0', overlayOpacity:.8});
});
</script>


Die dort unter $.fn.mbGallery.defaults gelisteten Parameter dienen nur zur Übersicht (und haben keine Auswirkung falls ihr dort was ändert).

Im div #leftcol ergänzen wir nun die Vorschaubilder mit dem Funktionsaufruf für die Gallerie: Für jede Reihe Vorschaubilder habe ich noch eine schöne Überschrift mit h4 eingefügt.

<h4>Natur</h4>
<a onclick="$('#g1').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 0,galleryTitle:'Natur'});"><img src="/gallery1/LR/01.jpg" alt="Foto 1" /></a>
<a onclick="$('#g1').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 1,galleryTitle:'Natur'});"><img src="/gallery1/LR/02.jpg" alt="Foto 2" /></a>
<a onclick="$('#g1').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 2,galleryTitle:'Natur'});"><img src="/gallery1/LR/03.jpg" alt="Foto 3" /></a>
<a onclick="$('#g1').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 3,galleryTitle:'Natur'});"><img src="/gallery1/LR/04.jpg" alt="Foto 4" /></a>
<a onclick="$('#g1').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 4,galleryTitle:'Natur'});"><img src="/gallery1/LR/05.jpg" alt="Foto 5" /></a>
<h4>Virtuelle Welten</h4>
<a onclick="$('#g2').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 0,galleryTitle:'Virtuelle Welten'});"><img src="/gallery2/LR/01.jpg" alt="Foto 1" /></a>
<a onclick="$('#g2').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 1,galleryTitle:'Virtuelle Welten'});"><img src="/gallery2/LR/02.jpg" alt="Foto 2" /></a>
<a onclick="$('#g2').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 2,galleryTitle:'Virtuelle Welten'});"><img src="/gallery2/LR/03.jpg" alt="Foto 3" /></a>
<a onclick="$('#g2').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 3,galleryTitle:'Virtuelle Welten'});"><img src="/gallery2/LR/04.jpg" alt="Foto 4" /></a>
<a onclick="$('#g2').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 4,galleryTitle:'Virtuelle Welten'});"><img src="/gallery2/LR/05.jpg" alt="Foto 5" /></a>


Hier habe ich zwei Galerien über #g1 und #g2 definiert. Mit startfrom: 2 als Bsp., teile ich dem Script mit, das es für die Diashow mit Bild 3 starten soll. Zähler fängt bei 0 an, wobei die Bilder mit 01 anfangen. Daher Startzähler eins niedriger. Weiterhin kann ich jeder Galerie einen unterschiedlichen Titel mit dem Parameter galleryTitle geben. Hier 'Natur' und 'Virtuelle Welten'.

Gleich nach diesem Block fügen wir einen zweiten Block für die zuladenen Bilder ein. Der Container id=g1 und g2 hat die Klasse class="galleryCont" bekommen, der per css im Stylesheet (style.css) mit display:none; quasi versteckt bzw. nicht angezeigt wird. Bei imgDesc können wir dann auch eine Beschreibung für jedes einzelne Bild einfügen. Dieser Text wird in der Diashow eingeblendet, wenn man mit der Maus auf das Bild fährt.


<!-- ######## Anfang der Galeriebilder ######## -->
<div id="g1" class="galleryCont">
<a class="imgThumb" href="/gallery1/LR/01.jpg"></a>
<a class="imgFull" href="/gallery1/HR/01.jpg"></a>
<div class="imgDesc">Ein Bienenschwarm im Baum</div>

<a class="imgThumb" href="/gallery1/LR/02.jpg"></a>
<a class="imgFull" href="/gallery1/HR/02.jpg"></a>
<div class="imgDesc">Steilküste</div>

<a class="imgThumb" href="/gallery1/LR/03.jpg"></a>
<a class="imgFull" href="/gallery1/HR/03.jpg"></a>
<div class="imgDesc">Mondstimmung</div>

<a class="imgThumb" href="/gallery1/LR/04.jpg"></a>
<a class="imgFull" href="/gallery1/HR/04.jpg"></a>
<div class="imgDesc">Lavastrand und der Atlantik</div>

<a class="imgThumb" href="/gallery1/LR/05.jpg"></a>
<a class="imgFull" href="/gallery1/HR/05.jpg"></a>
<div class="imgDesc">Kakteenimpression</div>
</div>

<div id="g2" class="galleryCont">
<a class="imgThumb" href="/gallery2/LR/01.jpg"></a>
<a class="imgFull" href="/gallery2/HR/01.jpg"></a>
<div class="imgDesc">Cicadomorpha metallica</div>

<a class="imgThumb" href="/gallery2/LR/02.jpg"></a>
<a class="imgFull" href="/gallery2/HR/02.jpg"></a>
<div class="imgDesc">T-Virus</div>

<a class="imgThumb" href="/gallery2/LR/03.jpg"></a>
<a class="imgFull" href="/gallery2/HR/03.jpg"></a>
<div class="imgDesc">Mondsüchtig</div>

<a class="imgThumb" href="/gallery2/LR/04.jpg"></a>
<a class="imgFull" href="/gallery2/HR/04.jpg"></a>
<div class="imgDesc">Skyscraper</div>

<a class="imgThumb" href="/gallery2/LR/05.jpg"></a>
<a class="imgFull" href="/gallery2/HR/05.jpg"></a>
<div class="imgDesc">In einer fernen Welt</div>
</div>
<!-- ######## Ende der Galeriebilder ######## -->



Der komplette Code der portfolio.html

Hier daher der komplette Code der portfolio.html: Bitte auch so benennen, da dieser Dateiname im Menü der index.html bereits so vergeben wurde.


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" dir="ltr" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="Foto, Photo, Portfolio, Tipps, Tricks, Demoseite, Website Workshop" />
<meta name="description" content="Blende 3.5 - Die Demoseite zum Website Workshop" />
<title>Willkommen auf Blende 3.5</title>
<link rel="stylesheet" href="/style.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="/inc/mbGallery.js"></script>
<script type="text/javascript" src="/inc/jquery.exif.js"></script>

<script type="text/javascript">
$(function(){

//these are the default settings for the component
// you can redefine this defaults or change each parameter on the component call
$.fn.mbGallery.defaults={
containment:"body",
cssURL:"css/",
skin:"white",
overlayBackground:"#ccc",
exifData:false, //todo

galleryTitle:"My Gallery",
imageSelector: ".imgFull",
thumbnailSelector: ".imgThumb",
titleSelector: ".imgTitle",
descSelector: ".imgDesc",

minWidth: 300,
minHeight: 200,
maxWidth: 0,
maxHeight: 0,
fullScreen:true,
addRaster:false,
overlayOpacity:.9,
startFrom: 0,//"random"
fadeTime: 500,
slideTimer: 1000,
autoSlide: true,

onOpen:function(){},
onBeforeClose:function(){},
onClose:function(){},
onChangePhoto:function(){}
};
});

//this is a direct call on document load
$('#g1').mbGallery({overlayBackground:'#f0f0f0', overlayOpacity:.8});

// this is a call attached to an event
$('#galleryOpener')
.bind("click", function(){
$('#g1').mbGallery({overlayBackground:'#f0f0f0', overlayOpacity:.8});
});
</script>

</head>
<body>

<div id="toprow">
<div id="header">
<a href="/index.html"><img src="/images/logo.jpg" alt="Logo" class="logo" /></a>
<h1>Blende <span class="gray">3.</span><span class="lightred">5</span></h1>
<h2>Die Demoseite zum Website Workshop</h2>
</div>
</div>

<div id="middlerow">
<div id="content">
<div id="leftcol">
<div id="menue">
<ul>
<li><a href="/index.html">Startseite</a></li>
<li><a href="/portfolio.html">Portfolio</a></li>
<li><a href="/service.html">Service</a></li>
<li><a href="/impressum.html">Impressum</a></li>
</ul>
</div>
<h4>Natur</h4>
<a onclick="$('#g1').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 0,galleryTitle:'Natur'});"><img src="/gallery1/LR/01.jpg" alt="Foto 1" /></a>
<a onclick="$('#g1').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 1,galleryTitle:'Natur'});"><img src="/gallery1/LR/02.jpg" alt="Foto 2" /></a>
<a onclick="$('#g1').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 2,galleryTitle:'Natur'});"><img src="/gallery1/LR/03.jpg" alt="Foto 3" /></a>
<a onclick="$('#g1').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 3,galleryTitle:'Natur'});"><img src="/gallery1/LR/04.jpg" alt="Foto 4" /></a>
<a onclick="$('#g1').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 4,galleryTitle:'Natur'});"><img src="/gallery1/LR/05.jpg" alt="Foto 5" /></a>
<h4>Virtuelle Welten</h4>
<a onclick="$('#g2').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 0,galleryTitle:'Virtuelle Welten'});"><img src="/gallery2/LR/01.jpg" alt="Foto 1" /></a>
<a onclick="$('#g2').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 1,galleryTitle:'Virtuelle Welten'});"><img src="/gallery2/LR/02.jpg" alt="Foto 2" /></a>
<a onclick="$('#g2').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 2,galleryTitle:'Virtuelle Welten'});"><img src="/gallery2/LR/03.jpg" alt="Foto 3" /></a>
<a onclick="$('#g2').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 3,galleryTitle:'Virtuelle Welten'});"><img src="/gallery2/LR/04.jpg" alt="Foto 4" /></a>
<a onclick="$('#g2').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 4,galleryTitle:'Virtuelle Welten'});"><img src="/gallery2/LR/05.jpg" alt="Foto 5" /></a>

<!-- ######## Anfang der Galeriebilder ######## -->
<div id="g1" class="galleryCont">
<a class="imgThumb" href="/gallery1/LR/01.jpg"></a>
<a class="imgFull" href="/gallery1/HR/01.jpg"></a>
<div class="imgDesc">Ein Bienenschwarm im Baum</div>

<a class="imgThumb" href="/gallery1/LR/02.jpg"></a>
<a class="imgFull" href="/gallery1/HR/02.jpg"></a>
<div class="imgDesc">Steilküste</div>

<a class="imgThumb" href="/gallery1/LR/03.jpg"></a>
<a class="imgFull" href="/gallery1/HR/03.jpg"></a>
<div class="imgDesc">Mondstimmung</div>

<a class="imgThumb" href="/gallery1/LR/04.jpg"></a>
<a class="imgFull" href="/gallery1/HR/04.jpg"></a>
<div class="imgDesc">Lavastrand und der Atlantik</div>

<a class="imgThumb" href="/gallery1/LR/05.jpg"></a>
<a class="imgFull" href="/gallery1/HR/05.jpg"></a>
<div class="imgDesc">Kakteenimpression</div>
</div>

<div id="g2" class="galleryCont">
<a class="imgThumb" href="/gallery2/LR/01.jpg"></a>
<a class="imgFull" href="/gallery2/HR/01.jpg"></a>
<div class="imgDesc">Cicadomorpha metallica</div>

<a class="imgThumb" href="/gallery2/LR/02.jpg"></a>
<a class="imgFull" href="/gallery2/HR/02.jpg"></a>
<div class="imgDesc">T-Virus</div>

<a class="imgThumb" href="/gallery2/LR/03.jpg"></a>
<a class="imgFull" href="/gallery2/HR/03.jpg"></a>
<div class="imgDesc">Mondsüchtig</div>

<a class="imgThumb" href="/gallery2/LR/04.jpg"></a>
<a class="imgFull" href="/gallery2/HR/04.jpg"></a>
<div class="imgDesc">Skyscraper</div>

<a class="imgThumb" href="/gallery2/LR/05.jpg"></a>
<a class="imgFull" href="/gallery2/HR/05.jpg"></a>
<div class="imgDesc">In einer fernen Welt</div>
</div>
<!-- ######## Ende der Galeriebilder ######## -->

</div>
<div id="rightcol">
<h3>Portfolio</h3>
<p>Klicken Sie einfach auf eines der nebenstehenden Vorschaubilder um die Diashow zu öffnen.</p>
<h3>Kategorien</h3>
<p>
<a onclick="$('#g1').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 0,galleryTitle:'Natur'});">Natur</a><br />
<a onclick="$('#g2').mbGallery({maskBgnd:'#ccc', overlayOpacity:.5,startFrom: 0,galleryTitle:'Virtuelle Welten'});">Virtuelle Welten</a><br />
</p>
</div>
<br class="clearer" />
</div>
</div>

<div id="bottomrow">
<div id="footer">
<span class="webicons">
<a href="http://de-de.facebook.de"><img src="/images/facebook.jpg" alt="Facebook" title="Facebook" /></a>
<a href="http://twitter.com"><img src="/images/twitter.jpg" alt="Twitter" title="Twitter" /></a>
<a href="http://www.flickr.com"><img src="/images/flickr.jpg" alt="Flickr" title="Flickr" /></a>
</span>
<p>Eine Demoseite zum Website Workshop von <a href="http://www.youmonster.de">www.youmonster.de</a>.  
Vielen Dank an die User<br />der Photo-Community <a href="http://www.photo-monster.de">www.photo-monster.de</a>
für die rege Beteiligung und Unterstützung.</p>
<p>| <a href="http://validator.w3.org/">xhtml valide</a> | <a href="http://jigsaw.w3.org/css-validator/">css 2.1 valide</a> |</p>
<br class="clearer" />
</div>
</div>

</body>
</html>


Et, voila und fertig ist unsere Foto-Gallerie.

Die Portfolio / Fotogallerie, so sieht es im Browser aus.

Ja und so sind wir am Ende dieses Workshops angelangt. Ich hoffe es hat Spaß gemacht und bedanke mich für die Aufmerksamkeit.
Damit ihr Euch den ganzen Workshop anpassen könnt >>> Download Workshop <<<