KoschtIT Image Gallery

Overview

KoschtIT Image Gallery is a PHP-script for an easy viewing of your pictures in the web browser. It is free available for everyone. The appearance of the gallery can be individually customized and it is possible to have more than one gallery inside your html document. The only prerequisite for using the script is PHP5 with GD2 support. The pictures aren't displayed in an extra window, instead they are opened directly on top of your HTML document. Therefore your website background gets shaded. While moving your mouse to the edges of the browser window previewing pictures for the next/previous picture of a gallery are displayed. Since version 1.5 the website administrator is able to write a comment for each picture in an easy way. The gallery can be operated by keyboard or by mouse.

Demo

In order to get a first impression here you have a small demo. You can show single pictures as well as gather a set of pictures to a gallery.

Single pictures

Galleries

How to use

Adding tags

1. For flawless script support by all browsers you have to set the right DOCTYPE. Place it on the top of your source code, even before <html>. If your site is HTML use this:

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

For XHTML pages use this:

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

2. Add to your header ( between <head> and </head> ) this line :

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

Point the right relative path to the ki_include.php if you want to get the ball rolling. It shouldn't matter where exactly you unpacked the script. Please remember that the reffering site has to be a PHP site (e.g. *.php) .

3. Add this tag at the spot where you want your picture/gallery to be :

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

Edit 'title' to specify which gallery folder you want to display. Don't write the gallery folder path into the 'title' - just type the gallery folder name there. You can add this tag various times.

Creating folders and uploading your images

After you did download the script and unpacked it somewhere on your webspace you will find a ki_galleries folder there. Here you can create new folders for your galleries. Each gallery needs its own folder. When you created them you can start uploading your images into them. That's all. The easiest way to upload your images is via FTP software.

Customizing your galleries

1. You will find the configuration files for the script inside the ki_config folder. Inside there should be at least the ki_setup.php file. This file holds the data needed to style the galleries that don't have an own configuration file. Additionally all central params are stored there. Here an example of the 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. Additionally you can have every gallery styled individually. This is an option. Therefore you have to create for the particular gallery a file named galleryname_ki_setup.php inside the ki_config folder. If such a file is absent the values inside the ki_setup.php are taken by default. Individual styling may look like this :

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

Keyboard usage

For comfort handling reasons the script also interprets keyboard inputs for navigation. The following hotkeys can be used :

Page up / Home / Arrow key 'left' ... show previous picture
page down / End / Arrow key 'right' ... show next picture
Arrow keys ... view oversized pictures, that are bigger than the browser window
Break ... break/continuing slideshow
Esc ... close the picture

Picture comments

You can add a comment conveniently to every picture if you are the administrator and have a valid username and password. To do so you have to open the page where the gallery is used with an additional ?admin=username in the address bar. For instance for this page this would look like http://koschtit.tabere.net?admin=username . Of course you would need to replace username with the real valid username as found in the ki_setup.php . After entering the password into the opening input field you can add comments to each picture. These are saved after you press 'CTRL + Enter' keys. Therefore you don't need a database. Please read the FAQ Question 4 for further infomation.

Individual cropping for square thumbs

If some images don't look good with the default values of $th_2sq_crop_vert and $th_2sq_crop_hori you can set an individual cropping. For this you must have set $th_to_square = 1 and also $thumbs_to_disk = 1 . As soon as you login as admin ( read Picture comments topic ) you will see a small thumb on the right side of each image. There you can select the individual cropping by drag-and-drop. As soon as your changes are saved the border of the thumb flashes in green color. If you want to remove the individual cropping from all thumbs you have to go to the ki_base folder and delete the custom file.

Download

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

You can view a changelog of older releases in the changelog.txt inside the script-archive.

FAQ

Since I'm getting a lot of questions about the script - here you have a small list of "frequently asked questions" :

1. Why my pictures are opened at the bottom of my page in Internet Explorer?

This problem occurs if you have set a wrong DOCTYPE. Place it in the first line of your source code. The script needs the following DOCTYPE for HTML-documents:

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

The script itself is written for XHTML-documents, so if you want to have a valid webpage you need to write XHTML code.

2. I have included everything but i don't see any thumbs?!

Did you upload your pictures to the right folder? They have to be in the same folder as written in title="foldername" . If all this is done correctly and you still don't see any pictures it may be that your PHP can't find the GD2 library. Ask your system administrator for help.

3. All pathes are correct but I still don't see any thumbs?!

It is recommended to remove any special characters or spaces from the pictures you are uploading. Avoid characters like "+" or "%" and "?". Use only letters and digits. Maybe one of your picture files is corrupt?

4. Where i can login to write a picture comment?

Open the page where the gallery is located with "?admin=user" (or &admin=user). Don't forget to use the username and password as saved inside the ki_setup.php . Also make sure you have set the paramter $comm_auto to 0 there. Otherwise you won't be able to write custom comments.

5. Help me! My comments won't get saved?!

Probably PHP can't get writing permissions on your webserver. In this case you have to add your comments by hand. Therefore you have to create a folder named "comments" in the gallery you want to have your comments in. Afterwards you can put ".txt"-files in there. Each ".txt" should be named the same way as the picture the comment is for. For example for "picture.jpg" you need "picture.txt". Write your comment inside the ".txt"-file and make sure that $comments = 1; . If after all this comments are still missing make sure you upgraded to PHP5. Please note that since version 1.8 you have to press 'CTRL + Enter' to save comments.

6. Which browsers does the script support?

I have tested the script successfully on the following browsers :

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

7. Why only parts of my website get shaded?

Could it be that you use frames or iFrames on your site? You can't use the script inside frames. Maybe try to get rid off them? I'm sure you can code every website without the help of these ( outdated ) tags. Just search for AJAX and DHTML.

8. How can i use the script in my website when I'm opening a page like "domain.com?site=gallery" ?

Here some simple code fragement that could be usefull :

<?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. How do I display a single pictures like in the demo?

In fact you have to create an own gallery for each single picture you want to show. This gallery needs to have a custom config file. If you disable the navigations links and set $thumbs to 1 you will have it the way you want it. Maybe you will need to adjust the size of the thumb too.

10. What can I do if I'm using PHP 4 and the script is not working?

If you are running PHP 4 and you just don't see anything when you open the gallery ( not even an error message ), you could try to replace inside the "ki_base" - folder every occurrence of "$_POST" and "$_GET" with "$HTTP_POST_VARS" or "$HTTP_GET_VARS" in every PHP - file. I can't provide official support for PHP 4.

Contact

If you still have some questions you can use the comment functionality. You may also write me an email kkokus[a_t]web[do_t]de . Just let me now what you think about the script. I appreciate every note.

Comments

Add a comment

Support requests inside these comments are not answedred anymore. Please use the support forum for this purpose.

More comments next page

Further to yesterdays comment...
posted by Mianne on 01/06/2010 mianne[a_t]miannegolf[do_t]com www.miannegolf.com/louise/gallery-co.php

Hi again...

Ok, the thing with the thumbnails not being aligned along the top, seems a bit of a temperamental problem and doesn't always happen. The link I have provided actually works fine. hhmmmm?.....

But to re-iterate the point about difficulty with navigation that some people experience, I had a person call me today and ask how the gallery works. After clicking on a thumbnail to display an image, he didn't know how to get to the next image and also didn't know how to even close the picture. he ended up closing the whole browser. .....yes, even though the buttons were displayed at the bottom right of the screen. They not really obvious if you don't know that they're there.

Unfortunately this is an example of what happens with some people who are not computer literate. it would actually be suuuuuuper if left and right arrow buttons could be displayed on the left and right sides of images and also a big X on one of the corners of the displayed image or something like that (or at least the option of having them displayed?)

i look forward to hearing from you and figure you're probably having a bit of a break over winter. :)

» See here: New Design Mockups needed!

top align thumbnails
posted by Mianne on 01/05/2010 mianne[a_t]miannegolf[do_t]com

After using your gallery for a while now and having feedback from visitors to my site, I have a couple of ideas and observations.

The first is that the gallery still isn't quite intuitive to use I think (for non computer users anyway). We know people don't read instructions and they aren't very good at looking around the page. This means that things need to be extremely obvious for people. The main one is navigating photos from one to the next.

I have two suggestions:
1) with the advent and popularity of facebook [sorry], when viewing image galleries there, when you click on the image, it progresses to the next image. With your gallery it closes the picture and it isn't at all intuitive for people to use left and right arrow keys (as much as I think it's a great feature). It might be good to have the click on the image to enable showing of the next image?

....you could then have a big X at a corner of the image, to indicate where to close (maybe?).

2) add buttons to the sides of the image with left and right arrows. Clicking on these buttons either shows the next or previous image. Clicking on the actual image would still close the picture.

Next issue. .....

I am wanting to set up a page where I may start with 6 images, but there could eventually be something like 30. I would like to size the thumbnail container to allow for 30 images but if i do that and there are only 6 images, then the thumbnails become strange sizes and get placed at the vertical centre of the box!

It would be really nice if thumbnails could be sized according to width (maybe), to fit within the width of the container (also according to how many images are allowed on one row of course) and to have the images aligned along the top of the container. ...my intention is to actually have the container with no background so it won't actually be seen.

I would do some of these changes myself if I knew Jscript, but it's something I don't have the time to look into at this stage. If you can easily point me in the right place of where some of the editing needs to take place in your existing files, maybe I could look at it myself.

Thanks as always though for this wonderful image gallery that you provide. it's still a great tool regardless.

Thanks

Using Admin
posted by homershines on 10/27/2009 homershines[a_t]yahoo[do_t]com

The gallery is beautiful. Works perfectly. However, can't log into admin. Can't access Log in page. I've successfully included gallery into a CMS and a straight HTML/PHP site. However, can't get to admin.

Tried, FAQ #8 How can i use the script in my website when I'm opening a page like "domain.com?site=gallery" ?

Didn't work for me. I'm missing the understanding of something in the process.

Thanks.

Homer

» See FAQ question 4 or read topic "Picture comments". Everything is explained there.

posted by Syed Hussain on 10/27/2009 idesigntutorials[a_t]gmail[do_t]com www.idesigntutorials.com

many choices that i can implement for my sites. thanks for sharing.

Anzeigeprobleme mit Flash und IE
posted by InVein on 10/21/2009

Hi

Hab eine Seite gebaut und funktioniert alles super soweit - zumindest unter Firefox. Bei Internetexplorer schieben sich die geöffneten Bilder einfach unter die Flash-Elemente, die auf meiner Seite sind (Flash Banner oben und Flash Menu). Die Flash-Elemente sind in divs, die alle einen niedrigeren z-index als das gallery-div hat...
Was kann ich da machen?

mfg

» Du musst folgendes in Flash hinzuzufügen: <param name="wmode" value="transparent" /> und wmode="transparent" (im "embed-Tag", falls vorhanden).

library
posted by Patricia on 10/06/2009 patriciavanwijk[a_t]scarlet[do_t]nl

HI,

I was very happy to find your imagegallery, it is just what i was looking for and looks great!
But.....on my localserver it works perfect but when i uploaded the website to my server it didn't work at all.
I contacted the host (hostway) and they told me i m beeing hosted on a "windows hostingplan" , here there is no GD library.
They offer me a "Linux hostingplan" , here they provide a GD version 2.0 or higher.
Is this the sulution you think?
Hope to hear from you soon....

Patricia

» I don't know anything about the details of those hostway hosting solutions. If the GD2 library is available, than the script will run properly.

script in endlosschleife?
posted by phoenix on 10/04/2009

bekomme jedes mal wenn ich eine Gallery öffne kommt erstmal lange nichts, dann der Kreisel (arbeite mit Mac...also Sanduhr), dann werden zwar die Bilder angezeigt aber es kommt folgende Meldung von Firefox:
---------
Ein Skript auf dieser Seite ist eventuell beschäftigt oder es antwortet nicht mehr. Sie können das Skript jetzt stoppen oder fortsetzen, um zu sehen, ob das Skript fertig wird.

Skript: http://www.verein-phoenix.at/gallery/ki_base/ki_js_framework.php?reldir=gallery/:360
---------
Außerdem bekomme ich Fehler dass ich keine Schreibrechte habe, obwohl ich alles freigegeben (chmod 666) habe (muss da eventuell der Serveradmin eingreifen?)

Arbeite wie gesagt mit Mac OSX 10.5 und Firefox 3.5.3 bzw Safari (stoppt das Script auch)
Hatte schonmal wer das Problem bzw weiß jemand wie man es löst?

» Siehe hier. Du musst nur den relativen Pfad zum Skriptverzeichniss angeben. Was die Meldung mit den Schreibrechten angeht, so setze "ki_base" und "ki_galleries" auf chmod 777. Dann sollte alles gehen.

Problems with your Gallery
posted by Hendrik on 09/08/2009 hendrik[a_t]hendrik-f[do_t]de ICQ: 112955522

Hi. Ich glaube du kannst ja auch deutsch. Hey, willst du mal in dein Forum unter http://koschtit.tabere.net/forum/showthread.php?tid=28 schaun? Wäre super. Komm einfach nicht weiter. Danke und Grüße,
Hendrik F.

More comments next page

Donate

If you consider to make a donation, please use PayPal. Especially if you are using the script in a commercial project a donation would be strongly appreciated. Thanks. In case you don't have PayPal but still want to donate an amount, you can ask me for my banking details by kkokus[a_t]web[do_t]de .