KoschtIT Image Gallery

by Konstantin Tabere

German languageEnglish language

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

Validate as XHTML strict/transitional

The script only works perfectly in all browsers if your website validates for DOCTYPE XHTML strict/transitional. If you want to validate your site use the form below or perform the check manually at http://validator.w3.org/ yourself. See also FAQ question 1.

Adding tags

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

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

Point the right 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) .

2. 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_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. 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 = 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
?>

Keyboard usage

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

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.

Download

KoschtIT Image Gallery v2.0

Changelog

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 thumbs are only half-size and the script ain't working on Internet Explorer?

This problem occurs if you are using a different DOCTYPE than the script does. The script needs the following DOCTYPE :

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

Try to rewrite the page the gallery is in to this DOCTYPE ( or at least XHTML transitional ). If you use other browsers than IE you won't have this issue.

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 :

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

Name E-Mail Icq http://

Comment topic

Comment

More comments next page

Thank you
posted by Mianne on 07/02/2009

Thanks for the tip on the code issue I had.

This gallery is absolutely brilliant. It presents perfectly and it looks and works professionally without unnecessary 'bells and whistles'. Thank you for taking the time to do this and to make it available to us. I will certainly be contributing when I can.

JScript errors
posted by Mianne on 07/01/2009 mianne[a_t]miannegolf[do_t]com www.miannegolf.com/gallery-clean.php

Hi. After searching for many image galleries, I have finally found yours that does exactly what I want it to do, and it also looks fantastic! ...very stylish. I am having some problems getting it to run though (I sent an email yesterday and have made a bit of Progress since then)

I am running the script both on my local machine (with Apache 2.2.11, PHP 5.2.9) and on the remote server (which I have setup to be PHP enabled). I made up a clean page that only contains code for your image gallery to exclude any other possible influences. Images have been uploaded to the correct folders and thumbnails get created ok when the page is loaded. Problem is, the page doesn't load completely and thumbnails aren't displayed.

I enabled script debugging on IE (8) and it comes up with an error on line 124 in ki_js_basic.php :
'container.style.top = -1*yto+"px";'

The previous line of 'container.style.left = -1*xto+"px";' seems to be ok?

If I 'step-over' the line and continue the script, it does eventually load (with small thumbnails though - I think? ...I should check that actually?) and then does actually work when displaying images in large size.

(you can have a look yourself on the URL I provided)

In Firefox (3) ...it just locks up Firefox and I have to re start the program.

Any help on this would be greatly appreciated. I would love to use you image gallery on my site.

Thank you

>> Try to remove the linebreak in the "koschtitgallery"-tag. The closing tag should be right behind the opening tag with no spaces/linebreaks between them. It took some time to find this "bug?!", but this should help you.

The BEST gallery
posted by Anthony on 06/24/2009 adinezza[a_t]comcast[do_t]net

I love this gallery so much. I used it on my wife's cake decorating site (www.kellyscreativecakes.com) and I am just loving how flexible this is, and how easy it is to integrate into the site. Since this site was for my wife, I didn't charge anything for it, but when I do sites for actual customers, you definately will be getting a piece of the profit. THANK YOU SO MUCH FOR THIS

Excellent Gallery
posted by AdmiralRob on 06/24/2009 rmuller[do_t]ak[a_t]gmail[do_t]com dauntlessdev.com

Excelent Gallery, I really like it. I'm beginning to use it on some of my sites, so you'll be getting a donation or two from me soon. This code is really worth it. I plan on using it for any gallery in the future.

One issue I have, however. Is that many users can't figure out how to use the script, despite the notes at the bottom left and all that. No one reads them. I'd like to have a little red X at the top middle of the screen when a picture is full size, so that people will click on that to close it. Also, it'd be nice if the arrows on either side were always on, so that people know they can click on them to go to the next or previous picture.

Of course, It'd be nice if those were featuers that were configurable in the config file. I really appreciate all the customization you've put in the config file. That has made it really nice to edit the whole gallery to fit my sites.

Really great job on this script. Really great.

>> You are absolutely right. No one read those tooltips at the bottom left corner. That's why I finally removed them in v2.0 ( did you have a look on this new version? ). Most of your suggestions are already implemented in v2.0 somehow. There is a navigation bar on the bottom right corner in fullsize mode with icons you can click on. I hope most users will understand them ...


posted by accounting homework on 06/06/2009 accountingtutor[do_t]org[a_t]gmail[do_t]com www.accountingtutor.org

Good one, galleries can be useful at times especially for projects etc

Thanks for posting them :)

Remove the ALT descriptions from images in a galleries.
posted by Josh on 05/29/2009 design[a_t]penoff[do_t]biz

Hi,
I am trying to find a way to remove the alt descriptions from the images when i mouse over them.
Is there a way i can do this in the gallery view?
If you could email me a response soon that would be great.
Thanks,
Josh

Auto comments
posted by Dojc on 04/27/2009

This is trully a great functional gallery script, and I would only like to ask if there is a possibility to add in the script so it can read the actual image file name, and automaticly add it as comment (file name - auto comment).

Thank's and keep up the good work!

>> Maybe one of the new features in the next release.

Security and vulnerability
posted by Al;exander on 04/24/2009 talesurovi[a_t]yahoo[do_t]com

Hi, first of all I'd like to thank You for this nice and very usable script, which is working fine and I am using it on a my website. Since KoschtIT image gallery is mentioned on several security related sites as vulnerable, I would like to have your comment on this topic. Here is a quote from one of these sites

"KoschtIT Image Gallery "file" Parameter Multiple Local File Include Vulnerabilities

KoschtIT Image Gallery is a PHP-based photo gallery application. The application is exposed to multiple local file include issues because it fails to properly sanitize user-supplied input to the "file" parameter of the following scripts: "ki_makepic.php" and "ki_nojsdisplayimage.php". KoschtIT Image Gallery version 1.82 is affected."

Thank You!

>> I will fix this in the near future. In fact this vulnerability can't be exploited as long as there aren't further php-files who should stay secret for security reasons. If those files have more vulnerabilities an attacker could probably do some harm. But the overall threat is still small, because he won't be able to execute his own code.

Please discuss this topic on the forum, if neccessary.

More comments next page

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 .

Already downloaded: 6712Today's visitors: 7Valid XHTML 1.0 Strict