KoschtIT Image Gallery

by Konstantin Tabere

German languageEnglish language

Ü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

Überprüfen auf XHTML strict/transitional

Das Skript funktioniert nur einwandfrei in allen Browsern, wenn deine Webpage den DOCTYPE XHTML strict/transitional einhält. Um deine Seite zu überprüfen, kannst du dieses Formular benutzen oder du führst den Check manuell auf http://validator.w3.org/ selbst durch. Siehe auch FAQ Frage 1.

Einfügen der Tags

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

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

Ihr müsst den richtigen 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 ein PHP Seite (z.B. *.php) sein muss.

2. 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_vert = "middle"; // show "middle" / "top" / "bottom" part of the picture if $th_to_sqaure enabled
$th_2sq_crop_hori = "center"; // show "center" / "left" / "right" 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 = "none"; // "none" or maximal picture height ( in pixels )
$oversize_allowed = 1; // 0 = pictured are reduced if they don't fit browser window / 1 = full size pictures

$slideshow = 1; // 1 = slideshow available / 0 = slideshow not available
$slideshow_time = 3000; // display time for each picture during slideshow ( ms )
$slideshow_text = "start slideshow"; // string for "slideshow" link

$nav_kiv_next = "next picture";
$nav_kiv_back = "previous picture";
$nav_kiv_close = "close";

$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_next = "next site"; // string for "next" thumb page
$nav_back = "previous site"; // string for "previous" thumb page
$nav_maxi = "maximize"; // string for "maximize" gallery

$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
$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 = 150; // 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

$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 :

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.

Herunterladen

KoschtIT Image Gallery v2.0

Changelog

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 sind meine Thumbs abgeschnitten und das Skript funktioniert nicht im Internet Explorer?

Dieses Problem tritt auf, wenn ihr einen anderen DOCTYPE verwendet als das Skript. Das Skript benötigt folgenden DOCTYPE :

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

Versucht eure Website für diesen DOCTYPE ( oder wenigstens auf XHTML Transitional ) umzuschreiben. Auf anderen Browsern als dem Internet Explorer tritt dieser Fehler nicht auf.

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 :

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. 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

Name E-Mail Icq http://

Kommentarüberschrift

Kommentar

Mehr Kommentare nächste Seite

Beeindruckend...
geschrieben von Stefan Hüller am 22.06.2009 stefan[do_t]hueller[a_t]web[do_t]de

Hallo Konstantin,

...sehr, sehr gelungen!
Ich werde das Script ausprobieren, die Ergebnisse meinem "Auftraggeber" zeigen und nach positivem Bescheid gerne als Betatester mitmachen, falls Bedarf besteht.

Grüße,
SH

Ein dickes Lob und ein herzliches Danke
geschrieben von mentes am 03.06.2009 info[a_t]kleintierpension-aischfeld[do_t]de www.kleintierpension-aischfeld.de

Hallo Konstantin,

Deine Galerie hat mich überzeugt.
Ich möchte mich an dieser Stelle für Dein Script sowie für Deine prompte Hilfe bei auftretenden Problemen bedanken.

Wo kann ich Dein Banner oder Logo finden um einen Link zu Deiner Seite zu setzen?

Viele Grüße
Mentes

>> Wenn ein einfacher Textlink nicht reicht, kannst du folgendes benutzen:

banner

Bildunterschriften
geschrieben von Loetzi am 19.05.2009 loetzi[a_t]gmail[do_t]com

Wie kann ich Kommentare unter die Bilder schreiben. Ich komme mit der Angabe unter Punt 4 FAQ nicht zurecht. Kann man mir mal ein Beispiel geben, wie die Adresszeile aussehen sollte?

>> Schau doch mal bei "Wie kann ich es benutzen" unter der Teilüberschrift "Bilderkommentare". Da gibt es auch ein Beispiel.

Gallery wird im IE falsch angezeigt
geschrieben von Curdin Caspar am 10.05.2009 curdin[do_t]caspar[a_t]bluewin[do_t]ch

Hallo Konstantin

Ich habe dir vor längerem einmal eine E-mail geschrieben, auf die du nicht geantwortet hast, warscheinlich ist sie irgendwie untergegangen, darum poste ich mein Problem hier noch einmal.

Ich habe deine gallery(v1.82) auf der Seite einer Kollegin eingebunden. Im Firefox und Chrome funktioniert er, im Internet Explorer, 7 und 8, wird das Bild allerdings nicht in der Mitte des Bildschirmes angezeigt. Die Seite wird nach untehin verlängert.

Währe froh, wenn du mir sagen könntest woran das liegen kann.

Link zur gallery: http://chantal.bplaced.net/gallery/index.php

Grüsse

Curdin

>> Bitte nutzt zukünftig das Forum um Support-Anfragen zu stellen. Der InternetExplorer ist leider sehr intolerant was Webpages angeht nicht nicht valide sind. Bitte lies dir nochmal FAQ Frage 1 durch und schreibe deine Webpage nach XHTML 1.0 strict um. Um zu überprüfen welche Fehler im Quelltext noch alles stecken, kannst du den W3C-Validator benutzen.

Was mache ich falsch?
geschrieben von Mark am 01.05.2009

Hallo! Was mache ich hier falsch? Hab nichts configuriert einfach hoch geladen um dies auszuprobieren... sieht aber nix gut: www.ljubo.eu/test.php

Link fur den Flash
geschrieben von Mark am 01.05.2009 taisanica[a_t]web[do_t]de

Ich baue eine Flash Seite, und mochte gerne eine Flash Gallerie aber mit diesem, KoschtIT Hintergrund abgedunkeltem ansicht der Grossbilder...
Ist so was moglich? Und wie sieht scripte (link) fur das Flash aus?
Danke in voraus!
Mark, Slowenien

Thumbs betiteln bzw. mehrzeiliger kommentar zu den Bildern
geschrieben von Fritz am 29.04.2009 hilbert[a_t]chello[do_t]at

Hallo !
1.) ist es möglich über oder unter den Thumbnails einen Namen oder eine Kurzbeschreibung zu setzen ??

2.) ist es möglich den kommentar zu den Bildern mehrzeilig zu gestalten ?


Siehe: http://www.eis-giardino.at/Galerie.php
möchte bei den Thumbs den eiscoup betiteln zb. "Birne Helene"

Bei den Bildern müsste ich im kommentar eintragen :
schokoladeeis
rum
schlagobers
etc....

>> Siehe Forum.

schutz durch wasserzeichen
geschrieben von Johann am 24.04.2009 jo[do_t]g[a_t]aon[do_t]at petra.4950.net

wie schauts mit einen wasserzeichen aus
wie man ein wasserzeichen integtriert weis ich
aber wo den code einfügen bei deinen script

mfg
Johann

>> Das Skript selbst unterstützt keine Wasserzeichen. Wenn, dann musst du diese vorher selbst in die Bilder einfügen.

Mehr Kommentare nächste Seite

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.

Bereits Heruntergeladen: 6712Heutige Besucher: 8Valid XHTML 1.0 Strict