Anzeige
Tutorialbeschreibung

Eigene Galerie mit Javascript

Eigene Galerie mit Javascript

Immer wieder tauchen hier Galeriefragen auf. Warum nicht eine selbst erstellen? Hat den Vorteil, dass man auch weiß, wo und wie evtl. Änderungen gemacht werden müssen und wie alles zusammenhängt. Hier möchte ich euch zeigen, wie so etwas ganz einfach zu bewerkstelligen ist. Der Einfachheit halber habe ich css und Javascript in die Seite integriert, die Dateien lassen sich natürlich auch auslagern. Html und Bilder habe ich in einem Verzeichnis zusammengelegt, das spart hier das Schreiben von ellenlangen Pfaden. Genug der Vorrede, auf geht’s:

Schritt 1 

Die Bilder für die Galerie in Photoshop oder anderem Bildbearbeitungsprogramm auf eine Größe bringen. Ich hab hier das Format 800x600 gewählt und die Thumbnails 100 Pixel hoch gemacht. Wenn hochformatige Bilder dabei sind, sollten diese 600 Pixel hoch und auch 800 Pixel breit sein – einfach mittig reinsetzen und re/li in der späteren HG-Farbe der Seite auffüllen. Bsp.: 

Bilder
  

Das jeweilige Thumbnail braucht den „Rand“ nicht. Warum das so sein soll, seht ihr später. Dazu macht ihr euch noch jeweils ein Bild, welches zum Rechts- bzw. Linksscrollen benutzt wird. Wie das aussieht, bleibt euch überlassen. 

Schritt 2 

Wir erstellen die html-Datei und platzieren ein paar container. Die relative bzw. absolute Positionierung macht hier Sinn, da das später für einen Effekt benötigt wird.Die selbsterstellten re/li-Bilder bringen wir gleich mit rein. 

<html>
<head> 

<title>Bildergalerie mit Javascript</title>

<style type="text/css">
*html{
margin:0;
padding:0;
}
body{
margin:0;
padding:0;
}
#gallery{
position:relative;
width:810px;
height:715px;
top:20px;
left:50%;
margin-left:-400px;
border:1px solid #000000;
}
#bildgross{
position:absolute;
width:800px;
height:600px;
top:5;
left:5;
}
#navigation{
position:absolute;
width:800px;
height:100px;
top:610px;
left:5;
}
#thumbs{
width:734px;
float:left;
white-space:nowrap;
overflow:hidden;
}
#thumbs img{
opacity:0.6;
filter:alpha(opacity=60);
}
</style>
</head>

<body>
<div id="gallery">
       <div id="bildgross"></div>

<div id="navigation">

<img src="left.png" style="float:right" onMouseOver="scrollDivLeft();" onMouseOut="stopMe()"/>

<div id="thumbs">       </div>

                               <img src="right.png" style="float:right" onMouseOver="scrollDivRight();" onMouseOut="stopMe()"/>
                </div>
</body>
</html>  

 

Schritt 3 

Wir fügen die Bilder ein. Im div „bildgross“ das Bild, das in der Thumbnailansicht als erstes kommen soll. 

<div id="bildgross">
            <img src="001.jpg" name="bild" style="position:absolute; top:0; left:0;" />
            <img src="001.jpg" name="bild2" style="position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);" />
</div> 


Die Eigenschaft opacity bzw. filter:alpha benutzen wir später, um einen allmählichen Übergang von einem Bild ins andere umzusetzen. Jetzt macht die absolute Positionierung auch Sinn, denn die Bilder müssen deckungsgleich übereinanderliegen.
 

Schritt 4 

Die Thumbnails werden in den zugehörigen container geladen: 

<div id="thumbs">
            <img src="t001.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('001.jpg');" />
            <img src="t002.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('002.jpg');" />
            <img src="t003.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('003.jpg');" />
            <img src="t004.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('004.jpg');" />
            <img src="t005.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('005.jpg');" />
            <img src="t006.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('006.jpg');" />
            <img src="t007.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('007.jpg');" />
            <img src="t008.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('008.jpg');" /> 
</div> 


Verantwortlich dafür, dass die Bilder nebeneinanderliegen, ist die Eigenschaft white-space:nowrap; für den div „thumbs“. Mit overflow:hidden; verbergen wir überstehenden content. Der Einfachheit halber sind die Thumbs mit denselben Namen benannt wie die großen Bilder, nur mit einem „t“ davor. So weiß ich z. B. schneller, was ich bei onClick übergeben muss. Die onMouseOver-, onMouseOut- und onClick-Ereignisse benutzen wir, um Javascripts aufzurufen, die wir noch schreiben müssen. Was die in Klammern angegebenen Attribute betrifft, erfahren wir bei den Scripts.

Schritt 5 

Wir fügen im head-Bereich javascript ein: 

<script language="javascript" type="text/javascript"> 

</script> 

Zwischen diesen Tags notieren wir alle unsere Funktionen. Die Erklärungen habe ich als Kommentar dahintergeschrieben; sie können aus dem Quellcode gelöscht werden.
 

Die Thumbnails scrollen 

var scrollStep=2;  // um wie viele Pixel soll bei jedem Schritt gescrollt werden -> 2
var timer; 

function scrollDivRight(){
  clearTimeout(timer);
  d=document.getElementById('thumbs');  // wo soll gescrollt werden -> thumbs
  d.scrollLeft+=scrollStep;
  timer=setTimeout("scrollDivRight()",10); // nach wie vielen Millisekunden soll weitergescrollt werden -> 10
} 

function scrollDivLeft(){
  clearTimeout(timer);
  d=document.getElementById('thumbs');
  d.scrollLeft-=scrollStep;
  timer=setTimeout("scrollDivLeft()",10);
} 

function stopMe(){
  clearTimeout(timer);  // beende das scrollen
}

Thumbnails mit mouseover versehen 

function opac(thumb,wert){  // übergebene Werte thumb -> welches, wert -> eine Zahl, siehe auch mouseover/mouseout-Aufruf in Klammern
            thumb.style.opacity = wert;  // alle Browser
            thumb.style.filter = "alpha(opacity=" + wert*100 + ")";  // Internetexplorer
            }

Bilder anzeigen mit Überblendung 

function bildershow(bild){  // übergebener Wert für neues Bild
            document.bild.src = document.bild2.src;  // hinten liegendes Bild = vorn liegendes Bild
            document.bild2.src = bild;  // vornliegendes Bild = neues Bild (übergebener Wert)
            fade(0);  // Aufrufen der Funktion zum langsamen Einblenden des Bildes
            }           

function fade(step) {  // step ist der opacity-Wert des neuen Bildes, Anfangs 0 (übergebener Wert)
            var imgs = document.getElementById("bildgross").getElementsByTagName("img");  //lies die Bilder aus "bildgross" und schreib sie in ein Array
            imgs[1].style.opacity = step/100;  //  alle Browser Wert durch 100 Teilen um 0.2 usw. zu erhalten
            imgs[1].style.filter = "alpha(opacity=" + step + ")"; // IE
            step = step + 2;  // step erhöhen
            if (step <= 100) {  // ist das Bild noch nicht vollständig zu sehen...
                        window.setTimeout(function () { fade(step); }, 1);   // ...Funktion erneut aufrufen
            }
}


Schritt 6

Bilder vorladen

Noch eine Funktion, um die Bilder schneller anzeigen zu können.

function preloadImg(){
    document.vorladen = new Array();
    if(document.images)
    {
        for(var i = 0; i < preloadImg.arguments.length; i++)
        {
            document.vorladen[i] = new Image();
            document.vorladen[i].src = preloadImg.arguments[i];
        }
    }
}



Die rufen wir über body onload auf, dazu ändern wir den
body-tag von <body> zu :

<body onLoad="preloadImg('001.jpg', '002.jpg', '003.jpg', '004.jpg', '005.jpg', '006.jpg', '007.jpg', '008.jpg');">


In der Klammer notieren wir alle Bilder, die vorgeladen werden sollen. Diese Funktion ist nicht in der Arbeitsdatei vorhanden und sollte manuell nachgetragen werden.

Für Feedback, Kommentare und Verbesserungsvorschläge wäre ich dankbar. Und jetzt wünsche ich euch viel Spaß mit der eigenen Galerie.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von sendi
  • 30.04.2014 - 08:54

übersichtlich und gut beschrieben

Portrait von Nuta
  • 10.11.2012 - 08:42

Sehr gutes Tutorial! Kurz und knapp alles verständlich erklärt. Vielen Dank!

Portrait von csinn
  • 24.03.2012 - 12:54

super tutorial nur irgendwie funktioniert es bei mir nicht das wenn man auf die thumbs klickt die großen bider angezeigt werden. Muss ich da noch etwas Code für die src einsetzten oder woran kann das sonst liegen??

Portrait von MrJamesson
  • 20.03.2012 - 17:07

Ein sehr gutes Turorial! Das ist genau das, was ich gesucht habe. Vielen Danke ;)

Portrait von Zumbi
  • 12.01.2012 - 20:04

Endlich mal keines dieser unzähligen jQuery Lightbox Tutorials, die anscheinend bei fast jeder Galerie eingesetzt werden. Sowas, wie das hier, hab ich gesucht und es hat mir viel genützt.
Vielen Dank!

Portrait von IvoCurtius
  • 31.05.2011 - 20:04

Auch mir hat dein Tutorial bisher schon die Arbeit erleichtert. Allerdings versuche ich jetzt schon ein wenig länger noch einen spezifischen Bild Text dranzuhängen! Leider ohne Erfolg! Es wäre sehr nett, wenn mir einer hierbei weiterhelfen könnte.

MfG Curtius

Portrait von Jutta_Kruse
  • 09.04.2011 - 13:31

Ein gutes Tutorial für Anfänger wie mich, leider funktioniert das horizontrale Scrollen bei Opera nicht. Vielleicht finde ich irgendwann den Fehler selbst. Trotzdem vielen Dank!

Portrait von keev1
  • 08.12.2010 - 12:35

sehr schön , gut erklärt und einfach aufgebaut und hat funktioniert,

vielen dank

Portrait von einandy1
  • 19.11.2010 - 14:55

funktioniert prima.

Danke

Portrait von EllenCullen
  • 16.09.2010 - 13:55

ich danke für die hilfreiche erklärung... hat mir echt weiter geholfen

Portrait von angel_web_shop24
  • 10.08.2010 - 14:27

ich ebenfalls: bin einfach nur begeistert!!!

Portrait von deDuebel
  • 30.04.2010 - 10:00

Kann mich nur anschließen: super klasse! Hat mir sehr weitergeholfen! Danke!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 05.04.2010 - 20:05

Hallo, ich versuche gerade wie blöd die Thumbnails vertikal scrollen zu lassen und das auf der rechten Seite des Bildes. Kannm ir da jemand einen kurzen Tipp geben? Vertikal hab ichs ja hinbekommen aber jetzt scheitere ich am scollen und an der richtigen Positionierung der Pfeile - uh mann

Portrait von nesliay
  • 05.04.2010 - 02:28

danke, das tutorium hat mir sehr viel gebracht. für die ausführliche beschreibung vielen dank.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 30.03.2010 - 11:01

danke für das tolle tutorial :) hat mir super weiter geholfen

Portrait von Hammelmen
  • 23.03.2010 - 12:09

Sehr gut gemachtes tutorial. Lässt sich ganz leicht nach bauen und ist nachvollziehbar "auch für anfänger"

Portrait von Dreiundachzig
  • 05.01.2010 - 09:43

hm..
ich habe es mir durchgelesen und erstmal kopiert, um es besser verstehen zu können, jedoch funktioniert es bei mir nicht.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 03.01.2010 - 13:16

danke für das super tutorial...

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 29.11.2009 - 23:28

Echt ein super Tutorial, aber die PDF dazu ist leider überhaupt nicht zu gebrauchen, da der Quellcode dabei als fließender Text dargestellt wird - schade.

Gruß, koki

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 19.11.2009 - 09:05

Danke für das tolle Tutorial !

x
×
×