de

designoir

Galerie

“Galerie” is a lightweight and flexible script for presenting images. In order to get an idea how it works, see it live:

Features

  • simple setup – linked pictures are grabbed automatically, no additional markup
  • pictures get resized to the viewport, clicking them restores natural size
  • keyboard navigation:
    <- previous image
    -> next image
    s start / pause slideshow
    + resize image to original size
    - resize image to viewport
    Enter toggle image size
    Esc close image view
  • view a title per image
  • flexible styling with CSS themes
  • intelligent preloading of images
  • localized navigation after recognizing the user language. currently supported: English, German, French, Spanish, Dutch
  • multiple independent galleries per page

Setup

  1. “Galerie” has two dependences: whenDOMReady and addEvent. They are part of the download package and, like the main script, published under the LGPL. All the .js files have to be tied in your document: 

    <script type="text/javascript" src="addEvent.js"></script>
<script type="text/javascript" src="Galerie.js"></script>

  2. Furthermore you’ll need a theme. After choosing one, add its Galerie.css to your page.

    If you want to keep it really simple, just put the theme with all its files into the document’s directory. Otherwise, make sure that all paths in your Galerie.css are correct. Most important, cursor:url(...) and filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='... have to be relatively to the document’s location.

  3. Now the script is actually ready. If there’s an element with id="Galerie", all contained links to images will be grabbed. Define the title attribute in order to display an image title in the gallery view: 

    <p id="Galerie">
	<a href="1.png">1</a>, <a href="2.jpg">2</a>, <a href="3.gif" title="great!">3</a>, ...
</p>

    To add all linked pictures to a gallery, you may assign the mentioned id attribute to <body>. Alternatively, you can instantiate Galerie manually; either for the entire document: 

    <script type="text/javascript">
whenDOMReady (function() {
	new Galerie (document)
})
</script>

    … or for selected elements: 

    <script type="text/javascript">
whenDOMReady (function() {
	new Galerie (document.getElementById('holidays'));
	new Galerie (document.getElementById('cebit07'));
})
</script>

    Each instance represents an independent gallery. E.g., in order to create a gallery for each of your WordPress blog posts, you can use getElementsByClassName: 

    <script type="text/javascript" src="getElementsByClassName.js"></script>
<script type="text/javascript">
whenDOMReady (function() {
	var posts = getElementsByClassName(document, 'div', 'post');
	for (var post, i = 0; post = posts[i]; i++)
		new Galerie (post);
})
</script>

Example #1

single.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Galerie</title>
	<script type="text/javascript" src="addEvent.js"></script>
	<script type="text/javascript" src="Galerie.js"></script>
	<link rel="stylesheet" media="screen,projection" type="text/css" href="Galerie.css"/>
	<style type="text/css"> body { background: blue } a { color: white } </style>
</head>
<body id="Galerie">
	<a href="http://www.spiegel.de/static/sys/logo_120x61.gif">1</a>
	<a href="http://www.google.com/images/logo_sm.gif">2</a>
	<a href="http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png">3</a>
</body>
</html>

Example #2

multiple.html

Themes

Themes are an integral part of “Galerie”. All the visuals are left to a CSS file, thus the appearance is customizable without touching the actual script. In case you’ve created a new theme, feel free to contact me (dao at design-noir.de). I’ll add it to the list.

Package Size Preview Author
black-bars_1.8.14.tar.gz 2.78 KB thumbnail Dao G.
ie7_1.8.14.tar.gz 10.76 KB thumbnail Dao G.
lighter_1.8.14.tar.gz 954 Bytes thumbnail Dao G.
medieval_1.8.14.tar.gz 4.75 KB thumbnail Erik-B. Ernst,
C. M. Werner
nuvola_1.8.14.tar.gz 9.44 KB thumbnail Dao G.
plastique_1.8.14.tar.gz 7.03 KB thumbnail Dao G.
plastique-ontop_1.8.14.tar.gz 6.97 KB thumbnail Dao G.
tango-ontop_1.8.14.tar.gz 6.78 KB thumbnail Dao G.
textual-bars_1.8.14.tar.gz 2.08 KB thumbnail Dao G.

Known Issues

  1. Themes aren’t fully functional in Quirks mode. (However, the script is Quirksmode compatible – go ahead and hook up your own Quirks mode theme.)
  2. potential problem with body { position: absolute } (Galerie will set position to static and revert this when closed.)
  3. [Konqueror] navigation buttons not clickable after reopening a gallery Konqueror 3.5.5 fixes
  4. [Konqueror] resized pictures are stretched Konqueror 3.5.5 fixes
  5. [Safari] untested – Konqueror-like bugs are expected successfully tested with Safari 3

Report an issue (dao at design-noir.de).

Versions

2007-06-05: 1.8.16
update to whenDOMReady 1.2
2007-05-31: 1.8.15
code cleanup
2007-02-11: 1.8.14
the first image is now the next one from the last one’s point-of-view, and vice versa
2006-12-19: 1.8.13
added the ability to preload more than one image for each direction; defaults to two (next images) respectively one (previous image)
2006-12-17: 1.8.12
urlOpt slenderized
update to whenDOMReady 1.1
2006-12-02: 1.8.11
removed the anchor stuff since it was more disturbing than useful
navigation entities fixed
2006-11-29: 1.8.10
DOMContentLoaded event emulated for IE
update to addEvent 1.1.6
2006-11-19: 1.8.9
use appendChild(document.createTextNode()) and firstChild.nodeValue instead of innerHTML
update to addEvent 1.1.5
2006-10-27: 1.8.8
slideshow disabled if there’s only one image
instantiation without images allowed
improved Function.prototype.bind
2006-10-07: 1.8.7
renamed $A to Array.from
themes updated to use IE7 specific -ms-interpolation-mode: bicubic;
2006-09-10: 1.8.6
minor fixes
update to addEvent 1.1.4
2006-08-27: 1.8.5
fixed several IE6 regressions
2006-08-26: 1.8.4
Slideshow tweaked, GUI and themes updated
2006-08-23: 1.8.3
new feature: slideshow
2006-08-02: 1.8.2
Quirks mode fix
2006-08-01: 1.8.1
cleanup
update to addEvent 1.1.3
2006-07-30: 1.8
complete API overhaul
themes updated
2006-07-30: 1.7.5
tweaked behaviour on vertically-scrolled pages
update to addEvent 1.1.2
2006-07-27: 1.7.4
introduced (+localized) title attribute for navigation buttons
additional workarounds for KHTML / Webkit bugs
update to addEvent 1.1.1 (prevent IE from leaking memory)
2006-07-27: 1.7.3
make use of the DOMContentLoaded event for faster initialization in Gecko-based browsers and Opera 9
fixed Konqueror problems
update to addEvent 1.1
2006-07-25: 1.7.2
multiple galleries on one site may contain the same image (anchors apply to one instance only thanks to unique prefixes)
fixed a critical bug with multiple Galerie instances (cache object has to be initialized inside of constructor instead of the prototype object)
removed obsolete properties defaultImgWidth and defaultImgHeight
2006-07-24: 1.7
fist public release

Comments

  1. Peter wrote on March 4, 2007 09:44 PM GMT ():
    Wie bitte öffnet man die GZ Archive? verzeit die dumme frage x_X
  2. Dao wrote on March 4, 2007 10:37 PM GMT ():
  3. Peter wrote on March 5, 2007 02:50 PM GMT ():
    Hm, also ich hab jetzt mehrere Programme versucht die auch alle angeblich GZ öffnen konnten, winrar, filzip, 7-zip und noch 2 weitere deren Name ich jetzt vergessen habe^^. Hab das Archiv auch nochmal runtergeladen, hat net gefunzt…
    danke schonmal
  4. Ebukadneza wrote on March 5, 2007 03:59 PM GMT ():
    Hi Dao! ich habe deine Galerie ja in Gebrauch, mit der Version “plastique-ontop_1.8.7.tar.gz” . Diese kann ich auch herrlich entpacken mit Winrar und 7zip. Jetzt habe ich die neue mal ausprobiert und muss sagen, dass ich die Dateien auch nicht entpacken kann. Liegt der Fehler vllt. doch an den Dateien? Viele Grüße, Ebukadneza
  5. Dao wrote on March 11, 2007 05:24 PM GMT ():
    Der Fehler lag bei der Zeichenkodierung meiner Seite. Sollte jetzt funktionieren.
  6. Ebukadneza wrote on March 11, 2007 08:26 PM GMT ():
    Okay, dachte ich mir schon, nachdem man die alten Versionen auf deinem Server auch nicht mehr öffnen konnte. Danke schon mal! Die neue Version funzt bei mir einiges besser als die alte :-D Finde es echt nett, dass du das alles umsonst bereitstellst! Ist die Beste Galerie, die ich kenne!
    Viele Grüße, Ebukadneza
  7. daZ wrote on May 26, 2007 03:10 PM BST ():
    juhuuu vielen dank, das ist genau was ich ewigkeiten gesucht habe :D und sogar schon mit mehreren designs… wow.
    überhaupt sind die scripts klasse, kann sicher noch einiges event bezogenes brauchen.
    grüsse daZ
  8. Bill Brown wrote on August 1, 2007 04:18 PM BST ():
    Hi Dao,

    Great site and great code. Keep up the great work! We appreciate it.
  9. Benny wrote on June 11, 2008 11:36 AM BST ():
    Hi habe da ein Problem mit meinem Frameset.

    Habe 3 Frames
    Head
    Navi
    Main

    im Main ist die Seite Galerie eingebunden auf der ich die Bilder verlinken wollte.
    hab alles so gemacht wie beschreiben aber ich bekomms´einfach nicht hin.

    kann das am frameset liegen??

    Danke und Gruß
  10. Dao wrote on June 11, 2008 01:30 PM BST ():
    Hi habe da ein Problem mit meinem Frameset.

    Habe 3 Frames
    Head
    Navi
    Main

    im Main ist die Seite Galerie eingebunden auf der ich die Bilder verlinken wollte.
    hab alles so gemacht wie beschreiben aber ich bekomms´einfach nicht hin.

    kann das am frameset liegen??
    Wenn das Skript auf der Galerie-Seite in Main eingebunden ist, sollten es keine Probleme geben.
  11. Benny wrote on June 11, 2008 02:10 PM BST ():
    Seite ist online auf www.x2x-online.de/club mit frames/index.htm

    Bei der Treffengalerie hab ich den Quelltext aus einer beispielseite von ganz oben kopiert und hab die dateien der .gz datei auch alle eingefügt aber bei mir geht des einfach nicht. ich zweifel schon langsam an meiner kompetenz.
  12. Thomas wrote on August 26, 2008 10:09 PM BST ():
    Hallo Dazio,
    ich find dein Skript auch klasse, nur leider fällt mir im IE (wo sonst) ein Fehler auf:

    Wenn ich bereits ein wenig nach unten gescrollt habe, dann ist die Ansicht nach unten verschoebn …als wenn er den Anfang der Scrollleiste als Bidschirmanfang nimmt…
  13. Julian wrote on October 5, 2008 03:51 PM BST ():
    Hallo ich finde das mit den mehreren designs auch gut doch leider bin ich in diesem bereich noch ein relativer anfänger und bekomme die galerie nicht eigebunden.
    ich habe mir das theme ola_1.8.14.tar.gz gewählt und alles in einen ordner gepackt…
    hier mal der quellcode:
    …

    <div id=“Galerie”>
    <ul class=“dateien”>
    <li id=“t1”> <a href=“images/image1.jpg” title=“”> <img src=“images/image1.jpg” alt=“Foto 1”></a>

    <li id=“t2”> <a href=“images/image2.jpg” title=“”> <img src=“images/image2.jpg” alt=“Foto 2”></a>

    <li id=“t3”> <a href=“images/image3.jpg” title=“”> <img src=“images/image3.jpg” alt=“Foto 3”></a>

    <li id=“t4”> <a href=“images/image4.jpg” title=“”> <img src=“images/image4.jpg” alt=“Foto 4”></a>

    <li id=“t6”> <a href=“images/image5.jpg” title=“”> <img src=“images/image5.jpg” alt=“Foto 5”></a>

    <li id=“t7”> <a href=“images/image6.jpg” title=“”> <img src=“images/image6.jpg” alt=“Foto 6”></a>
    </ul>
    </div>

    …
    danke schonmal ;-)
  14. Philipp wrote on October 29, 2008 03:20 PM GMT ():
    hallo, vorweg mein kompliment für deine arbeit.
    ich würde gerne die gallerie automatisch beim laden der seite starten lassen. ist dies möglich, und wenn ja, wie?
  15. Joachim wrote on February 7, 2009 06:21 PM GMT ():
    Wie läuft die sprachlich unterschiedliche Navigation? Habe verschiedenes probiert, aber weder mit Attribut “lang” noch mit Meta-Tags Erfolgt gehabt.

Comments are closed.

Last changed on July 5, 2009 Dão G., 2005–2010
aggressiv akt andromeda bar beine blue efeu frontal fugaetu industriell komet land noir rost rot sonnenblume splash split winter wolke zeit