KoschtIT Image Gallery

Überblick

KoschtIT Image Gallery ist ein kostenloses und frei verfügbares PHP-Skript zur einfachen Darstellung von Bildern im Webbrowser. Dabei ist das Aussehen der Galerien vielfältig anpassbar und es ist auch möglich mehrere davon in einem HTML Dokument anzuzeigen. Vorraussetzung für die Benutzung ist nur PHP5 mit GD2 Unterstützung. Bilder werden nicht in einem extra Fenster geöffnet, sondern öffnen sich direkt im HTML Dokument, wobei der Hintergrund abgedunkelt wird. Beim Bewegen der Maus zu den Rändern des Fensters werden Vorschaubilder auf das nächste/vorhergehende Bild in einer Galerie generiert. Und seit der Version 1.5 können für jedes Bild durch den Administrator bequem Bilderkommentare geschrieben werden. Die Galerie kann sowohl per Tastatur als auch per Maus bedient werden.

Demo

Um euch sofort einen ersten Eindruck zu verschaffen gibt es hier eine kleine Demo. Man kann sowohl einzelne Bilder anzeigen, als auch Bilderfolgen zu einer Galerie zusammenfassen.

Einzelne Bilder

Galerien

Wie kann ich es benutzen

Einfügen der Tags

1. Damit das Skript auf allen Browsern richtig funktioniert, ist es wichtig den richtigen DOCTYPE anzugeben. Dieser muss ganz oben als erstes platziert werden, noch vor <html> in eurem Quellcode. Ist eure Seite HTML braucht ihr folgenden Tag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Für XHTML nehmt ihr diesen Tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. In den Headerbereich ( zwichen <head> und </head> ) der Website muss folgendes rein :

<?php include_once("...../ki_include.php"); ?>

Ihr müsst den richtigen relativen Pfad zur ki_include.php angeben, damit es funktioniert. Es spielt dabei keine Rolle wohin auf dem Server ihr das Script entpackt habt. Bitte beachtet auch, dass die betreffende Seite eine PHP Seite (z.B. *.php) sein muss.

3. An die Stelle wo euer Bild/Galerie angezeigt werden muss fügt ihr diesen Tag ein :

<div class="koschtitgallery" title="..."></div>

Unter 'title' könnt ihr angeben, welchen Galerieordner ihr anzeigen wollt. Bitte nur den Namen des Ordners angeben und nicht etwa den Pfad. Diesen Tag könnt ihr mehrmals einfügen.

Erstellen der Ordner und Hochladen der Bilder

Nachdem ihr das Skript heruntergeladen und irgendwo auf eurem Webspace entpackt habt, findet ihr da drin den Ordner ki_galleries. In diesem Ordner könnt ihr neue Ordner anlegen für eure Galerien. Jede Galerie muss seinen eigenen Ordner haben. Sind die Ordner erstellt, müsst ihr nur noch eure Bilder hochladen und ihr seid fertig. Am einfachsten geht das alles übrigens per FTP.

Anpassen der Galerien

1. Alle Konfigurationsdateien zum Skript findet Ihr im ki_config Ordner. Darin sollte sich auf jedenfall die ki_setup.php befinden. In dieser Datei ist das Aussehen für Galerien ohne eigener Konfigurationsdatei hinterlegt und noch dazu die wichtigsten Einstellparameter. Hier ein Beispiel der ki_setup.php :

<?php
// ---------- default values for galleries without own config file --------------------------------------------

$fr_width = 620; // width of the gallery
$fr_height = 300; // height of the gallery
$fr_color = "#666666"; // background color of the gallery ( hex or "none" for no background )

$thumbs = 8; // maximal number of thumbs that are shown at the same time
$th_per_line = 4; // thumbs per line
$th_lines = "auto"; // "auto" or a number of thumb lines

$th_width = "auto"; // "auto" or the maximal width of the thumbs ( pixels )
$th_height = "auto"; // "auto" or the maximal height of the thumbs ( pixels )
$th_bord_size = 6; // thumbs border size ( 0...X in pixels )
$th_bord_color = "#ffffff";	// thumbs border color ( hex )
$th_to_square = 1; // 1 = square thumbs / 0 = normal thumbs
$th_2sq_crop_hori = "center"; // show "center" / "left" / "right" part of the picture if $th_to_sqaure enabled
$th_2sq_crop_vert = "middle"; // show "middle" / "top" / "bottom" part of the picture if $th_to_sqaure enabled

$pic_order = 2;	// 0 = newest pictures first / 1 = newest pictures last / 2 = alphabetical order

$bord_color = "#ffffff"; // border color of shown pictures ( hex )
$bord_size = 20; // border size of shown pictures ( 0...X in pixels )

$max_pic_width = "none"; // "none" or maximal picture width ( in pixels )
$max_pic_height = 600; // "none" or maximal picture height ( in pixels )
$oversize_allowed = 0; // 0 = pictured are reduced if they don't fit browser window / 1 = full size pictures

$slideshow = 1; // 1 = slideshow available / 0 = slideshow not available
$checkgps = 1; // 1 = display link to googlemaps if gps coordinates found in image exif metadata / 0 = don't check for gps coordinates
$cellinfo = 0; // 1 = check for geo-tagging information on opencellid.org ( $checkgps must be 1 ) / 0 = don't check for geo-tagging information

$comments = 1; // 1 = comments enabled / 0 = comments disabled
$comm_text_size = 12; // comments font size ( pixels )
$comm_text_color = "#000000"; // comments font color ( hex )
$comm_text_font = "Tahoma, sans-serif"; // comments font face
$comm_text_align = "left"; // comments text align "left" / "center" / or "right"
$comm_auto = 0;	// 1 = auto comments as defined in $comm_auto_string / 0 = custom comments
$comm_auto_string = "KoschtIT Image Gallery - Picture %x of %X Filename: %f, Gallery: %g"; // string for auto comments / "%x" = picture number / "%X" = number of all pictures / "%f" = filename / "%g" = gallery folder

$show_nav = 1;	// 1 = show gallery navigation control / 0 = don't show gallery navigation control
$nav_always = 0; // 1 = show always navigation control / 0 = show only if you "mouseover" the gallery
$nav_pos = "right"; // "center" / "left" / "right" position of gallery navigation control

$show_tb = 1; // 1 = show image navigation toolbar / 0 = don't show image navigation toolbar
$preview_pics = 6; // number of preview pictures ( 0...9 )
$thumbs_to_disk = 1; // 1 = thumbs are saved on the server / 0 = thumbs are generated "on the fly"

// ---------- main lookout settings that are applied to ALL galleries -------------------------------------------

$fade_color = "#000000"; // shade color ( hex )
$fade_alpha = 7; // opacity of the shade ( 0...10 / 10 = full opacity )

$shade_while_loading = 0; // 1 = shade website while initializing gallery / 0 = usual website loading
$disable_animation = 0; // 1 = animation disabled / 0 = animations enabled
$slideshow_time = 3000; // display time for each picture during slideshow ( ms )

$nav_next = "next site"; // string for "next" thumb page icon
$nav_back = "previous site"; // string for "previous" thumb page icon
$nav_maxi = "maximize gallery"; // string for "maximize" gallery icon
$nav_kiv_next = "next picture"; // string for "next picture" icon
$nav_kiv_back = "previous picture"; // string for "previous picture" icon
$nav_kiv_close = "close picture"; // string for "close" icon
$nav_gps_coord = "show location on map"; // string for "location on map" icon
$slideshow_start = "start slideshow"; // string for "start slideshow" icon
$slideshow_stop = "stop slideshow"; // string for "stop slideshow" icon

$show_warnings = 1; // 1 = show script warnings / 0 = don't show script warnings

$admin = "user"; // admin username - needed for adding custom comments to the pictures
$pw = "password"; // admin password - needed for adding custom comments to the pictures
?>

2. Zusätzlich könnt ihr jede Galerie noch individuell im Aussehen ändern. Dies ist optional. Dafür müsst ihr für die jeweilige Galerie eine Datei galeriename_ki_setup.php im ki_config Ordner erstellen. Darin könnt ihr die Einstellparameter angeben, die sich von der ki_setup.php unterscheiden. Existiert so eine Datei nicht wird standartmäßig auf die ki_setup.php zurückgegriffen. So könnte eine individuelle Konfigurationsdatei aussehen :

<?php
$fr_width = 214; // width of the gallery
$fr_height = 150; // height of the gallery

$thumbs = 1; // maximal number of thumbs that are shown at the same time
$th_per_line = 1; // thumbs per line
$th_to_square = 0; // 1 = square thumbs / 0 = normal thumbs

$slideshow = 0; // 1 = slideshow available / 0 = slideshow not available
$show_nav = 0; // 1 = show gallery navigation control / 0 = don't show gallery navigation control
?>

Tastatureingaben

Um den Bedienkomfort für den Betrachter zu erhöhen, kann man zur Navigation beim Betrachten von Galerien auch die Tastatur verwenden. Folgende Tasten können benutzt werden :

Bild-hoch / Pos1 / Cursortaste 'links' ... vorheriges Bild anzeigen
Bild-runter / Ende / Cursortaste 'rechts' ... nächstes Bild anzeigen
Cursortasten ... Betrachten von Bildern, die größer sind, als das Browserfenster
Pause/Untbr ... Pause/Fortsetzen der Diashow
Esc ... Schließen des Bildes

Bilderkommentare

Zu jedem Bild kann der Administrator mit Hilfe seines Benutzernamens und seines Passworts bequem Bilderkommentare hinzufügen.
Um dies zu machen muss er die Seite mit der jeweilligen Galerie mit dem Adressanhang ?admin=benutzername aufrufen. Zum Beispiel wäre das für diese Seite http://koschtit.tabere.net?admin=benutzername . Natürlich müsst ihr benutzername mit den echten Benutzernamen aus der ki_setup.php ersetzen. Nach der Eingabe des Passworts in das dafür vorgesehene Feld könnt ihr bei jedem Bild Kommentare dazuschreiben. Diese werden nach Drücken von STRG + Enter automatisch gespeichert. Eine Datenbank muss dafür nicht vorhanden sein. Bitte beachtet auch die FAQ Frage 4 für weitere Informationen.

Angepasster Bildausschnitt bei quadratischen Thumbs

Wenn einige Bilder mit den eingestellen Werten von $th_2sq_crop_vert und $th_2sq_crop_hori nicht optimal aussehen, dann kann man dafür den Bildausschnitt individuell anpassen. Dafür muss $th_to_square = 1 und auch $thumbs_to_disk = 1 eingestellt sein. Sobald man sich nun als Administrator anmeldet ( siehe Überschrift Bilderkommentare ) sieht man einen kleinen Thumb auf der rechten Seite jedes Bildes. Dort kann man dann den angezeigten Bildausschnitt bequem per drag-and-drop anpassen. Sobald der Bildausschnitt gespeichert wurde, leuchtet der Bildrand in grüner Farbe auf. Möchte man alle individuellen Bildausschnitte wieder entfernen so müsst ihr im ki_base Verzeichniss die Datei custom löschen.

Herunterladen

KoschtIT Image Gallery v2.2b

Changelog

Fixed: Script didn't start when using inside frames on Internet Explorer
Fixed: Some issues with error message "Warning: ini_set() has been disabled ..."
Fixed: Shaking navigation icons on mouseover

Den Changelog zu früheren Relaeses findet ihr in der changelog.txt im Skriptarchiv.

FAQ

Da ich regelmäßig Fragen zum Skript erhalte - hier eine kleine Liste "häufiger Fragen" :

1. Wieso werden die Bilder im Internet Exploerer unterhalb der Seite geöffnet?

Dieses Problem tritt auf, wenn ihr vergessen habt den korrekten DOCTYPE anzugeben. Dieser sollte in der ersten Zeile des Quelltextes stehen. Das Skript benötigt folgenden DOCTYPE für HTML-Dokumente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Das Skript selbst ist für XHTML-Dokumente geschrieben, d.h. falls Ihr eine valide Seite haben wollt, sollte eure Seite ebenfalls XHTML sein.

2. Ich habe das Skript eingebunden, ich sehe aber keine Thumbs?!

Hast du die Bilder in das richtige Verzeichnis hochgeladen? Diese müssen im Ordner mit dem selben Namen wie bei title="ordnername" eigetragen sein. Stimmt das alles und ihr seht trotzdem keine Bilder, so könnte es sein, dass euer PHP keine Schreibrechte bekommt. Das einzige was ihr dann machen könnt ist $thumbs_to_disk = 1; auf 0 zu setzen. Dann wird nicht versucht die Thumbs auf dem Webserver zu speichern.

3. Alle Pfade stimmen - ich sehe aber trotzdem keine Thumbs?!

Es empfiehlt sich allgemein keine Sonderzeichen oder Leerzeichen in den Bilderdateien zu benutzen. Vermeide Zeichen wie "+" oder "%" und "?". Bitte möglichst nur Buchstaben und Ziffern verwenden. Möglicherweise ist auch eine der Bilddateien beschädigt.

4. Wo kann ich mich einloggen um Bilderkommentare zu schreiben?

Ruft die Seite mit der Galerie mit den zusätzlichen Parameter "?admin=user" (oder &admin=user) in der Webadresse auf. Ersetzt aber user mit dem Benutzernamen, der in der ki_setup.php eingetragen ist. Bitte beachtet, dass ihr erst dann eigene Bilderkommentare schreiben könnt, wenn in der ki_setup.php der Parameter $comm_auto auf 0 gesetzt ist.

5. Hilfe!? Meine Kommentare werden nicht gespeichert!

Wahrscheinlich hat PHP keine Schreibrechte auf eurem Webserver. In diesem Fall müsst ihr Kommentare manuell hinzufügen. Dazu müsst ihr im Ordner der jeweiligen Galerie einen Ordner "comments" erstellen. Dort könnt ihr ".txt" - Datein erstellen, die genauso heißen müssen, wie die Bilder zu denen der Kommentar gehört. Zum Beispiel für "bild.jpg" wäre das "bild.txt". Schreibt dort den Kommentar herein und stellt sicher, dass $comments = 1. Funktioniert es danach immernoch nicht, könnte es sein, dass Ihr nicht PHP 5 verwendet. Verwendet bitte ab Version 1.8 'STRG + Enter' um Kommentare zu speichern.

6. Auf welchen Browsern läuft das Skript?

Ich habe das Skript auf folgenden Browsern erfolgreich getestet :

Firefox 2+
Internet Explorer 6+
Opera 8+
Safari 3+
Chrome 1+

7. Wieso wird bei mir nicht die ganze Seite abgedunkelt?

Höchstwahrscheinlich verwendest du Frames oder iFrames auf deiner Seite. Für solche Seiten ist das Skript nicht ausgelegt. Einer der Hauptgründe ist die schlechte Performance der Rendering Engine einiger Browser bei Verwendung von Frames, wodurch es zu ruckligen Animationen kommt. Man kann übrigens jede Seite auch ohne Verwendung dieser ( veralterten ) Tags aufbauen. Informiere dich einfach über AJAX und DHTML.

8. Wie kann ich die Galerie in meine Website einbauen, die ich über "domain.com?site=gallery" aufrufe?

Hier ein kleines Codegerüst, was evtl. eine Hilfe sein kann :

<?php
$gallery = 0;
if(isset($_GET['site'])){ if($_GET['site'] == "gallery"){ $gallery = 1;	} }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...
<?php
if($gallery == 1)include_once(".../ki_include.php");
?>
</head>
<body>
...
<?php
if($gallery == 1){ 
?>
<div class="koschtitgallery" title="..."></div>
<?php
}
?>
...
</body>
</html>

9. Wie kann ich ein einzelnes Bild einfügen, so wie in der Demo oben?

Erstelle für das jeweillige Bild "quasi" eine eigene Galerie und lege dafür eine individuelle Konfigurationsdatei an. Wenn du jetzt in dieser die Navigationslinks abschaltest und $thumbs auf 1 stellst erhälst du das gewünschte Resultat. Möglicherweise musst du noch die Größe des Thumbs anpassen.

10. Was kann ich tun, wenn ich PHP 4 verwende und das Skript nicht funktioniert?

Falls ihr bei euch PHP 4 installiert habt und ihr beim Aufrufen der Gallery nichts seht ( auch keine Fehlermeldung ), könnte es helfen wenn ihr im "ki_base" - Ordner alle Vorkommen von "$_POST" und "$_GET" durch "$HTTP_POST_VARS" bzw. "$HTTP_GET_VARS" in allen PHP - Dateien ersetzt. Einen offiziellen Support für PHP 4 gibt es von mir nicht.

Kontakt / Betatest

Falls ihr noch irgendwelche Fragen habt, so nutzt bitte die Kommentarfunktion. Seid ihr der Meinung es wäre besser die Frage persönlich an mich zu richten, so schreibt bitte an kkokus[a_t]web[do_t]de . Für Verbesserungsvorschläge und Kritik habe ich immer ein offenes Ohr. Außerdem werden zur Zeit auch umbedingt noch Betatester gesucht, die neue Skriptversionen vor der Veröffentlichung auf Fehler testen können. Falls Ihr daran Interesse habt, so schreibt mir bitte eine kurze Mail.

Kommentare

Kommentar hinzufügen

Supportanfragen in Kommentaren werden generell nicht mehr beantwortet. Bitte nutzt dafür das Support-Forum.

Mehr Kommentare nächste Seite

geschrieben am 26.02.2010 joern-beckmann[a_t]gormue[do_t]de www.gormue.de

Ich bin begeistert, ich wusle schon ne ganze weile wgen einer ansprechenden Galerie durchs Netz und habe mich auch schon selbst an nem script versucht, aber mit deinem script kann ich mir jede weiteren suchen sparen. Absolute Spitze - Vielen Dank. Ich werde mich für das script noch erkenntlich zeigen, da ich weis welcher Arbeitsaufwand dahinter steckt.
Mit freundlichen Grüßen
Jörn

Diese Galerie in ein Blogähnliches system umarbeiten ?
geschrieben von Tomas am 19.02.2010 info[a_t]waldmannvonritter[do_t]de

ist es möglich de galerie so umzuschreiben das jeder einfach zum geposteten bild ein komentar schreiben kann?und vom aufbau her meinetwegen untereinander und unter jedem bild automatisch das comentfeld erzeugen lassen. Ich hoffe man versteht mich ... hier nochmal in punkten. 1). Ein Ordner für bilder haben. 2). das nach datum zuletzt upgeloadete bild immer als erstes zeigen 3). das script müsste es zulassen zu jedem Bild ein Kommentar schreiben zu dürfen bzw. mehrere kommentare.
Ich hab das mal bei yahoo gesehen wenn da irgendwelche nachriten mit bildern bestüclt sind und drunter die kommentare von den lesern aufgelistet sind.
Vielen dank schon mal im vorraus

Einen schönen Danke an Sie.
geschrieben von Dimitri L. am 15.02.2010 lace1.lima-city.de

Das ist genau die Galerie, die ich immer haben wollte. Leicht zu bedienen, viele Funktionen und ein sehr schlichtes und schönes Design. Ein Dank und Lob meinerseits für die Galerie. Sie können gerne meine Homepage besuchen und ein Feedback abgeben, wie sie Ihnen gefällt. Würde mich sehr darüber freuen.

Mit freundlichen Grüßen
Dimitri L.

Koschtit v1.72
geschrieben von Lars am 13.02.2010 account[a_t]larskoehler[do_t]de

Könnten Sie mir die ältere Version v1.72 zur Verfügung stellen?
Mit den neueren Versionen komme ich leider nicht klar, diese funktionieren bei mir nicht, obwohl ich alles so wie in der Anleitung beschrieben gemacht hatte.
Mit der Version v1.72 war ich voll zufrieden. Doch habe ich diese leider nicht mehr.

Tolles
geschrieben am 17.01.2010

Tolles Script, das einen echten Mehrwert darstellt.

Gruss
RR

Position der Navigation ändern
geschrieben von Michael am 11.12.2009 nike82131[a_t]myway[do_t]de

Hallo Konstantin,
zunächst möchte ich meinen Dank und ein großes Lob für dieses gelungene Script zum Ausdruck bringen. Habe für eine Bekannte eine Seite gebastelt und lange nach einer so einfach zu bedienenden und guten Gallary gesucht, bis ich auf Deine Seite gestoßen bin - eine super Sache!!
In einem Kommentar vom 30.12.2008 wurde nach der Positionierung der Nav-Leiste gefragt, allerdings die Lösung nicht veröffentlicht. Ich meine nicht die Nav zu den Thumbnails, sondern die rechts unten bei den großen Bildern. Rechts unten wird sie oft übersehen!
Vorab schon vielen Dank!
Gruß
Michael

» Es gibt keinen Parameter in der "ki_setup.php" um das bequem einzustellen. Jedoch kannst, du wenn du dich mit JavaScript und CSS auskennst die entsprechenden Zeilen in der "ki_js_view.php" editieren und nach deinen Wünschen anpassen. Siehe ab Zeile 138.

label
geschrieben von krista am 04.11.2009 krista[a_t]irq[do_t]org

Hallo,

How can one have a label Under a picture, rather then over the bottom part?

Ps.
i do understand Deutch, i just cant write it.

Gallery in dynamischem div?
geschrieben von phobia am 26.10.2009 nnphobia[a_t]gmx[do_t]net

Hallo
Erstmal danke für das Script, hat super funktioniert, doch nun schreibe ich gerade meine Seite um und will sie dynamisch generieren lassen - und hier happert es irgendwie. Habe eine index.php und ein menü. beim klick auf einen Menüpunkt werden die gewünschten seiten (html seiten bzw php seiten) dynamisch in ein content-div geladen, ohne dass die seite aktualisiert wird.
Jetzt bereitet mir das Gallery Skript aber probleme, weil es partout nicht laden will
Wenn ich die ki_base Datei in der index.php include bekomme ich die Meldung, dass keine Gallery gefunden wurde (sie existiert aber), wenn ich es in der "gallery.php" lasse kommt keine Meldung aber es wird auch keine Gallery angezeigt. Der Doctype stimmt bei beiden Seiten, sowohl der index als auch der gallery.php.

Hier ein Beispiel von dem System das ich verwende:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Gibt es irgendeine Möglichkeit die Galerie so einzubinden, würde sie nämlich wirklich gerne weiterverwenden.

mfg

Mehr Kommentare nächste Seite

Spenden

Sofern Sie sich durch eine Spende für das Skript bedanken möchten, benutzen Sie bitte PayPal. Besonders bei kommerzieller Nutzung, wäre eine Spende angebracht. Vielen Dank. Wer kein PayPal hat, aber trotzdem gerne etwas spenden möchte, kann nach meiner Bankverbindung per kkokus[a_t]web[do_t]de nachfragen.