StartseiteSkripteJavascript

Bildergalerie mit jQuery/fancybox

29. DEZEMBER 2011
von Jörg
Skripte - Javascript
fancybox icon

Eine Bildergallery sollte übersichtlich sein, Vorschaubilder (sogenannte thumbnails) besitzen und der Besucher sollte diese auch vergrößert betrachten können. Mit dem Javascript Framework jQuery und dem Tool fancybox ist dies eigentlich sehr einfach zu verwirklichen.

Vorab ein Beispiel mit 4 Pics wie die Bildergallery aussehen könnte:

Hier der Quellcode von diesem Beispiel:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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" >
<head>  
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <title>Demoseite - Fancybox - jQuery</title>
  <style type="text/css">
  <!--
    .gallery a img { border: 1px solid #CCCCCC; padding: 4px; margin: 5px; }
    
  -->
  </style>
</head>
<body>
   <h1>Gallery - Fancybox - jQuery</h1>
   <div class="gallery">
    <a rel='gruppe1' href='images/impressionen7.jpg'>
      <img src='images/impressionen7_t.jpg' width='160' height='107' alt='Foto'/>
    </a>
    <a rel='gruppe1' href='images/impressionen10.jpg'>
      <img src='images/impressionen10_t.jpg' width='160' height='107' alt='Foto'/>
    </a>
    <br />
    <a rel='gruppe1' href='images/impressionen21.jpg'>
      <img src='images/impressionen21_t.jpg' width='160' height='107' alt='Foto'/>
    </a>
    <a rel='gruppe1' href='images/impressionen26.jpg'>
      <img src='images/impressionen26_t.jpg' width='160' height='107' alt='Foto'/>
    </a>
  </div>
    <style type="text/css">@import url(fancy/fancy.css);</style>
    <script type="text/javascript" src="fancy/jquery.js"></script>   
    <script type="text/javascript" src="fancy/fancybox.js"></script>     
    <script type="text/javascript" src="fancy/fancied.js"></script>    
	  <script type="text/javascript" src="fancy/jquery.fancybox-1.3.1.js"></script>      
</body>
</html>

Der Style von der geöffneten Fancybox kann in der css-Datei fancy.css natürlich nach Wünschen geändert werden. Auch die Bilder für "ein Bild vor", "ein Bild zurück" oder dem Schliessen-Bild liegen im Verzeichnis fancy und können an dem Design angepasst werden.

Die Geschwindigkeit wie schnell das Bild geöffnet oder wieder geschlossen wird, kann in der Datei fancied.js angepasst werden:

01
02
03
04
05
06
07
$(document).ready(function() {	
  $(".gallery a").fancybox({
		'zoomSpeedIn':	500, 
		'zoomSpeedOut':	500,
		'overlayShow':	true
	});	
});

Im diesem Beispiel sind 500ms eingestellt.


Download der gesamten Dateien ◊ ZIP-Datei ◊ 286KB

Hier die Demoseite

Auf fancybox.net gibt es noch weitere Infos und werden noch weiter Möglichkeiten vorgestellt.

Hinterlasse einen Kommentar

Ein Frosch der sich an der Seite festhält