|
|
Fotogalerie
Die Idee hinter dieser Fotogalerie ist inzwischen weit verbreitet und ich habe sie mir nachgebaut.
Entwickelt:
2009
Code:
HTML, CSS, Javascript/DHTML/DOM
Entwicklung:
Bei einem Auftrag war es notwendig, Fotos aus einer Produktgruppe als Thumbnails anklickbar zu machen und so in größerer Auflösung darzustellen.
Diese Idee ist nicht neu. Allerdings hatte sich gestalterisch einiges getan und auch ich wollte diese Wege beschreiten. Daher baute ich diese Fotogalerie nach.
Im Hinblick auf das CMS, dass ich für NoWa baue, betrachtete ich es aber als notwendig, auch mehrere Galerien auf einer Seite ansprechen zu können. Daraus entstand dieses Script.
Status:
Aktuell
Erklärung:
Die Galerien werden jeweils in einem eindeutig identifizierten div-Bereich gespeichert. Außerdem sind zwei versteckte Bereiche notwendig, die für das große Bild und den "Ladebalken" vorgesehen sind.
Die Werte für die große Ansicht, werden aus den Thumbnails per DOM ausgelesen. Anschließend wird das Bild geladen und der Ladestatus gespeichert. Ist das Laden abgeschlossen wird das Bild angezeigt.
Hinweise:
Keine
Der Quellcode:
und so siehts aus...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<meta name="robots" content="index,follow">
<meta name="author" content="Jörg Ahrens">
<meta name="publisher" content="Jörg Ahrens">
<meta name="copyright" content="Jörg Ahrens">
<meta name="date" content="2009-11-10T10:00:00+02:00">
<title>[Gueldensterns Fotogalerie]</title>
<style type="text/css">
body {
margin:0; padding:0;
background-color:#999966;
}
img {
border:none;
}
#Galerie {
visibility:hidden;
position:fixed; top:0; left:0;
width:100%; height:100%;
margin:0 auto 0 auto;
background:url('GG/GalBG.png');
z-index:200;
}
#GalerieRand {
position:relative; top:45%; width:80%;
margin:-200px auto 0 auto; padding:0;
background:#fff;
}
#GalerieRahmen {
margin:0; padding:10px;
}
#GalerieInhalt {
margin:10px; padding:0;
}
#GalerieFussZeile {
margin-top:20px; padding-top:10px;
text-align:left;
border-top:solid 1px #CCC;
}
#GalerieNavigation {
width:70px; float:right;
}
#GalerieText {
font-family:Tahoma, Helvetica, Arial, Sans Serif;
font-size:12px; line-height:14px;
color:#000000;
}
#Ladebalken {
visibility:hidden;
position:fixed; top:0; left:0;
width:100%; height:100%;
margin:auto;
background:url('GG/GalBG.png');
z-index:200;
}
#LadebalkenRand {
position:relative; top:45%; width:90px;
margin:-25px auto 0 auto; padding:0;
background:#fff;
}
#LadebalkenRahmen {
margin:0; padding:10px;
}
#LadebalkenInhalt {
margin:10px; padding: 0;
}
#Galerie .Eol ,#Ladebalken .Eol {
background:url(GG/Eol.png) top left no-repeat; }
#Galerie .Eor ,#Ladebalken .Eor {
background:url(GG/Eor.png) top right no-repeat; }
#Galerie .Eur ,#Ladebalken .Eur {
background:url(GG/Eur.png) bottom right no-repeat; }
#Galerie .Eul ,#Ladebalken .Eul {
background:url(GG/Eul.png) bottom left no-repeat; }
#Galerie .Ro ,#Ladebalken .Ro {
background:transparent; }
#Galerie .Rr ,#Ladebalken .Rr {
background:transparent; }
#Galerie .Ru ,#Ladebalken .Ru {
background:transparent; }
#Galerie .Rl ,#Ladebalken .Rl {
background:transparent; }
</style>
<script type="text/javascript">
/*************************************
Script von Jörg Ahrens
www.gueldenstern-webdesign.de
Fragen an:
info@gueldenstern-webdesign.de
*************************************/
/*
Bildwechsel
*/
P1=new Image();
P1.src="GG/GaleriePfeilLinks.png";
H1 = new Image();
H1.src = "GG/GaleriePfeilLinksHov.png";
P2=new Image();
P2.src="GG/GaleriePfeilRechts.png";
H2=new Image();
H2.src="GG/GaleriePfeilRechtsHov.png";
P3=new Image();
P3.src="GG/GalerieSchliessen.png";
H3=new Image();
H3.src="GG/GalerieSchliessenHov.png";
function Bildwechsel(NR,OB)
{
NR.src = OB.src;
}
// Id des Elternknotens, der Links,
// die auf die Galerie verweisen
var GalerieId="galerie";
var Galerie=new Array();
// Array, in dem die Bilder der
// Galerie gespeichert werden
var Bilder=new Array();
// Array, in dem die Bildtexte der
// Galerie gespeichert werden
var Titel=new Array();
// Hier wird die Anzahl der Bilder
// zur Darstellung in der Navigation
// gespeichert
var Bilderzahl;
// wird in foto gesetzt
var Sichtbarkeit;
var BildText;
var Ladebalken;
var Bild;
function galerie(Args){
if(galerie.arguments.length==0){
galerie.arguments[0]=GalerieId;
}
// Tempvariable
var zaehler;
for(i=0;i<galerie.arguments.length;i++){
zaehler=0;
// Der Knoten, in dem die Verweise
// zur Galerie gespeichert sind
var Knoten=
document.getElementById(galerie.arguments[i]).firstChild;
// Im Bilder Array werden für jede
// Galerie die Bilddateinamen
// gespeichert
Bilder[galerie.arguments[i]] = new Array();
// Im Titlel-Array werden für jede
// Galerie die Bildtexte gespeichert
Titel[galerie.arguments[i]] = new Array();
while(Knoten!=null){
// Filtern der Links
if(Knoten.nodeName=='A'){
zaehler = Bilder[galerie.arguments[i]].length;
// Schreiben in Array
Bilder[galerie.arguments[i]][zaehler]=
Knoten.getAttribute("href");
// Bildtext auslesen aus title-Attribute
Titel[galerie.arguments[i]][zaehler]=
Knoten.getAttributeNode("title").nodeValue;
// Attribute onClick setzen
Knoten.setAttribute(
"onClick",
"foto('visible','"
+galerie.arguments[i]+"',"
+zaehler+");return false;");
}
// Weiterspringen zum nächsten
// Kindelement
Knoten=Knoten.nextSibling;
}
}
}
function foto(Args){
// Falls DynHTMl unterstützt wird,
// wird fortgesetzt. Ansonsten wird
// nur das Bild gezeigt
if(!document.getElementById){
alert('Unterstützung fehlt');
return false;
}
// arguments[0] = Visibility
// arguments[1] = BildId
// Der Ladebalken wird nur mit 1
// Argument übergeben
if(foto.arguments.length==3){
// Bauen der Navigation
navigation(foto.arguments[1],foto.arguments[2]);
}
// Setzen globaler Variablen zur
// Weiterverarbeitung
Sichtbarkeit=foto.arguments[0];
BildText="";
if(foto.arguments.length==3){
BildText="( "+Bilderzahl+" ) "
+Titel[foto.arguments[1]][foto.arguments[2]];
}
Ladebalken=document.getElementById("Ladebalken");
Ladebalken.style.visibility=Sichtbarkeit;
Bild=new Image();
if(foto.arguments.length==3){
Bild.src=Bilder[foto.arguments[1]][foto.arguments[2]];
Ladebalken.style.visibility="visible";
}else{
Bild.src='GG/GalerieTransparent.png';
Ladebalken.style.visibility="hidden";
}
foto_ready();
}
function navigation(GalerieId,BildId){
var zaehler;
var VorherKnoten=
document.getElementById("GalerieNavigation").firstChild;
var NachherKnoten=
document.getElementById("GalerieNavigation").lastChild;
while(VorherKnoten!=null){
// Filtern der Links
if(VorherKnoten.nodeName=='A'){
zaehler=(BildId-1<0)?Bilder[GalerieId].length-1:BildId-1
VorherKnoten.setAttribute(
"onClick", "foto('visible','"
+GalerieId+"',"+zaehler+");return false;");
break;
}
// Weiterspringen zum nächsten
// Kindelement
VorherKnoten=VorherKnoten.nextSibling;
}
while(NachherKnoten!=null){
// Filtern der Links
if(NachherKnoten.nodeName=='A'){
zaehler=(BildId+1>=Bilder[GalerieId].length)?0:BildId+1;
NachherKnoten.setAttribute(
"onClick",
"foto('visible','"+GalerieId+"',"+zaehler+");return false;");
break;
}
// Weiterspringen zum nächsten
// Kindelement
NachherKnoten=NachherKnoten.previousSibling;
}
Bilderzahl=BildId+1+" / "+Bilder[GalerieId].length;
return true;
}
function foto_ready(){
// Abfrage, ob das Bild geladen ist
if(Bild.complete){
// Bildtext schreiben
document.getElementById("GalerieText").firstChild.nodeValue=
BildText;
// Bereich um Bild schreiben
var DIV= document.getElementById("GalerieRand");
DIV.style.width=Bild.width+40+"px";
DIV.style.marginTop=-Bild.height/2-30+"px";
document.images.galerie_pic.src=Bild.src;
// Preview-Ring verstecken
Ladebalken.style.visibility="hidden";
// Bild anzeigen
var BildBox=document.getElementById("Galerie");
BildBox.style.visibility = Sichtbarkeit;
}
// Falls das Bild nicht geladen ist
// nach 50ms erneut fragen
else {
setTimeout ( "foto_ready ( )", 50 );
}
}
</script>
</head>
<body onload="galerie('galerie1','galerie2')">
<h1>Mehrere Fotogalerien</h1>
<div id="galerie1">
<!-- Hier dürfen außer den Verweisen
für die Bilder, keine anderen Links
auftauchen. Die Verweise auf die
großen Dateien müssen in href
eingetragen werden. Evt. gewollte
Texte werden statt Textschwarz etc.
eingefügt, falls man keinen Text
setzen will lässt man diesen
Parameter leer (this,'visible','').
-->
<a href="GG/sbg.png" title="1Text1" target="_blank">
<img src="GG/stb.png" width="100" height="100"></a>
<a href="GG/rbg.png" title="1Text2" target="_blank">
<img src="GG/rtb.png" width="60" height="100"></a>
<a href="GG/bbg.png" title="1Text3" target="_blank">
<img src="GG/btb.png" width="100" height="60"></a>
<a href="GG/bbg.png" title="1Text4" target="_blank">
<img src="GG/btb.png" width="100" height="60"></a>
<a href="GG/sbg.png" title="1Text5" target="_blank">
<img src="GG/stb.png" width="100" height="100"></a>
<a href="GG/rbg.png" title="1Text6" target="_blank">
<img src="GG/rtb.png" width="60" height="100"></a>
<a href="GG/rbg.png" title="1Text7" target="_blank">
<img src="GG/rtb.png" width="60" height="100"></a>
<a href="GG/bbg.png" title="1Text8" target="_blank">
<img src="GG/btb.png" width="100" height="60"></a>
<a href="GG/sbg.png" title="1Text9" target="_blank">
<img src="GG/stb.png" width="100" height="100"></a>
</div>
<hr>
<div id="galerie2">
<!-- Hier dürfen außer den Verweisen
für die Bilder, keine anderen Links
auftauchen. Die Verweise auf die
großen Dateien müssen in href
eingetragen werden. Evt. gewollte
Texte werden statt Textschwarz etc.
eingefügt, falls man keinen Text
setzen will lässt man diesen
Parameter leer (this,'visible','').
-->
<a href="GG/sbg.png" title="2Text1" target="_blank">
<img src="GG/stb.png" width="100" height="100"></a>
<a href="GG/rbg.png" title="2Text2" target="_blank">
<img src="GG/rtb.png" width="60" height="100"></a>
<a href="GG/bbg.png" title="2Text3" target="_blank">
<img src="GG/btb.png" width="100" height="60"></a>
<a href="GG/bbg.png" title="2Text4" target="_blank">
<img src="GG/btb.png" width="100" height="60"></a>
<a href="GG/sbg.png" title="2Text5" target="_blank">
<img src="GG/stb.png" width="100" height="100"></a>
<a href="GG/rbg.png" title="2Text6" target="_blank">
<img src="GG/rtb.png" width="60" height="100"></a>
<a href="GG/rbg.png" title="2Text7" target="_blank">
<img src="GG/rtb.png" width="60" height="100"></a>
</div>
<!-- Der folgende Bereich umfasst den
versteckten Bereich der Javascript-
Galerie -->
<div id="Galerie">
<div id="GalerieRand">
<div class="Ro">
<div class="Rr">
<div class="Ru">
<div class="Rl">
<div class="Eol">
<div class="Eor">
<div class="Eur">
<div class="Eul">
<div id="GalerieRahmen">
<div id="GalerieInhalt">
<div>
<a href=""
onClick="foto('hidden'); return false;">
<img name="galerie_pic"
src="GG/GalerieTransparent.png"></a>
</div>
<div id="GalerieFussZeile">
<div id="GalerieNavigation">
<a href=""
onmouseover="Bildwechsel(window.document.p1,H1);"
onmouseout="Bildwechsel(window.document.p1,P1);">
<img name="p1" src="GG/GaleriePfeilLinks.png"
width="20" height="20"></a>
<a href=""
onClick="foto('hidden'); return false"
onmouseover="Bildwechsel(window.document.p3,H3);"
onmouseout="Bildwechsel(window.document.p3,P3);">
<img name="p3" src="GG/GalerieSchliessen.png"
width="20" height="20"></a>
<a href=""
onmouseover="Bildwechsel(window.document.p2,H2);"
onmouseout="Bildwechsel(window.document.p2,P2);">
<img name="p2" src="GG/GaleriePfeilRechts.png"
width="20" height="20"></a>
</div>
<div id="GalerieText"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="Ladebalken">
<div id="LadebalkenRand">
<div class="Ro">
<div class="Rr">
<div class="Ru">
<div class="Rl">
<div class="Eol">
<div class="Eor">
<div class="Eur">
<div class="Eul">
<div id="LadebalkenRahmen">
<div id="LadebalkenInhalt">
<div>
<img src="GG/LB.gif" width="50" height="50">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
MAIL