Overview
Like our script? Rate it at PHP > Hot Scripts
KoschtIT Image Gallery is a free and open-source image gallery PHP-script. It can be used to add image galleries to existing webpages very easily. The appearance of each gallery can be individually customized. 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.
There is also an admin panel, which enables the site administrator to write picture comments and edit gallery settings. Navigation via keyboard is available too. More features are: slidewhows, automatic thumb generation, image to window size reduction, image preloading, previews for the next/last picture, show geotagging information (via EXIF) ...
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
More examples with webpages that use the script can be found in the forum.
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 unzipped 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 parameters are stored there. You can edit the file by hand or you can use the admin panel, a more comfortable way to do this.
To do so you have to open the page where the gallery is used with an additional ?admin=user in the address bar. For instance for this page this would look like http://koschtit.tabere.net?admin=username .
The default login data is: user and password. Both, the username and the password should be changed in the admin panel. The following parameters are available in the ki_setup.php :
<?php
$fr_width = 650; // This two parameters set the dimension of the gallery in pixels. They are equivallent to css-width and height of the koschtitgallery-div.
$fr_height = 330;
$fr_color = "#666666"; // The background color of the gallery. Set a hex-color '#rrggbb' or 'none'.
$thumbs = 8; // Sets the amout of thumbnails in one row. This should be less or equal to the $thumbs - parameter.
$th_per_line = 4; // Sets the amout of thumbnails in one row. This should be less or equal to the $thumbs - parameter.
$th_lines = "auto"; // Here you can set how many thumbnail rows you want to have. Set to 'auto' or a number.
$th_width = "auto"; // This two parameters set the maximum dimension of the thumbnails in pixels. Set to 'auto' or a number.
$th_height = "auto";
$th_bord_size = 6; // The border width of the thumbnails in pixels. Set to a number greater or equal to zero.
$th_bord_color = "#ffffff"; // The border color of the thumbnails. Set a hex-color '#rrggbb' or 'none'.
$th_bord_hover_color = "#ffcc99"; // If you hover over the thumbnails their border color will change to this. Set a hex-color '#rrggbb' or 'none'.
$th_bord_hover_increase = 1.1; // You can also change the size of the thumbnails when you hover over them. They will be increased by this value. Set to a decimal with a dot.
$th_to_square = 1; // For square thumbs set to 1, or else set to 0.
$th_2sq_crop_hori = "center"; // If $th_to_square is set to 1, you can change the horizontal cropping of the thumbmails with this parameter. Set to 'left', 'center' or 'right'.
$th_2sq_crop_vert = "middle"; // If $th_to_square is set to 1, you can change the vertical cropping of the thumbmails with this parameter. Set to 'top', 'middle' or 'bottom'.
$thumbs_to_disk = 1; // Set this parameter to 1, if you want your thumbnails to be saved on the server. If you want to generate your thumbnails 'on the fly', set this to 0.
$pic_order = 2; // This parameter sets the order of your pictures in your gallery. Set to 0 for newest pictures first, set to 1 for oldest pictures first, or set to 2 for alphabetical order.
$bord_size = 20; // Sets the border size of displayed pictures in pixels. Set to a number greater or equal to zero.
$bord_color = "#ffffff"; // The border color of displayed pictures. Set a hex-color '#rrggbb' or 'none'.
$max_pic_width = "none"; // You can set a maximum width and height for displayed pictures. Set to a number or leave 'none' for no limits.
$max_pic_height = 650;
$oversize_allowed = 0; // Set to 0, if you want to adjust the size of displayed pictures to the browser window size. If you want to show your displayed pictures in full resolution set to 1.
$comments = 1; // 1 enables picture comments and 0 disables them.
$comm_text_size = 12; // Set the font size in pixels for comments here.
$comm_text_color = "#000000"; // Sets the font color for comments. Set a hex-color '#rrggbb'.
$comm_text_font = "Tahoma, sans-serif"; // The font face for comments. This is equal to css-font-face.
$comm_text_align = "left"; // You can change the text alignment for comments with this parameter. Set to 'left', 'center' or 'right'.
$comm_auto = 0; // If you want to have automatic picture comments set this to 1, or else set to 0.
$comm_auto_string = "KoschtIT Image Gallery - Picture %x of %X Filename: %f, Gallery: %g"; // If $comm_auto is set to 1, you can enter your automatic picture comment here. There are some variables available: '%x' = picture number / '%X' = number of all pictures / '%f' = filename / '%g' = gallery folder
$slideshow = 1; // Set to 1 if you want to enable a slideshow, or set to 0 else.
$checkgps = 1; // If set to 1 a link to Googlemaps is displayed when an image contains geodetic coordinates in the exif metadata. Set to 0 if you don't need this feature.
$cellinfo = 0; // If $checkgps is set to 1, you can additionally check the image metadata for cellid information added by mobile phones. This information is then send to opencellid.org and if the cell gps position is deposed there a link to Googlemaps will be displayed too.
$show_nav = 1; // Set this parameter to 0, if you don't need the navigation icons below the thumbnails. Otherwise set to 1.
$nav_always = 1; // If this is set to 0, the navigation icons will be only visible if you hover with your mouse over the gallery.
$nav_pos = "right"; // Aligns the navigation icons below the thumbnails. Set to 'left', 'center' or 'right'.
$nav_color = "#444444"; // Defines the background color of the navigation icons toolbar. Set a hex-color '#rrggbb'.
$nav_border_color = "#777777"; // Defines the border color of the navigation icons toolbar. Set a hex-color '#rrggbb'.
$show_image_nav = 1; // Enables or disables the navigation icons for displayed pictures. Set to 1 or either to 0.
$show_help = 1; // If set to 1, a small help icon is displayed on bottom right of displayed pictures. Set to 0 if you don't need this.
$show_preview = 1; // You can disable/enable preview pictures that are displayed when you move your mouse beyond the sides of displayed pictures. Set to 1 or 0.
$preview_style = 1; // If set to 1, it displays the next/previous picture as preview. The further you move your mouse, the bigger the preview images get. If set to 2, only the icons 'ki_next.png'/'ki_back.png' are displayed. This parameter is only valid, when $show_preview is set to 1.
$preview_pics = 3; // You can adjust the number of preview pictures that are displayed, if you move your mouse to the border of the browser window. If this is set to 0 no preview pictures will be displayed.
$explorer_padding = 50; // Sets the padding ( in pixels ) between pictures in 'maximized' view.
$fade_color = "#000000"; // Adjust the shade color with this parameter. Set a hex-color '#rrggbb'.
$fade_alpha = 7; // Changes the opacity of the shade. Set a number from 0 to 10, where 10 is for full opacity and 0 for no opacity at all.
$shade_while_loading = 0; // If this is set to 1, the website will be shaded during the galleries will be initialized. Set to 0, if you don't need this.
$disable_animation = 0; // You can disable all script animations if you set this to 1. If you wish to enable animations, set this to 0.
$slideshow_time = 4000; // This is the time an image will be displayed during slideshow. Enter a value in milliseconds.
$nav_next = "Next page"; // Next thumbnails page icon description.
$nav_back = "Previous page"; // Previous thumbnails page icon description.
$nav_maxi = "Maximize gallery"; // Maximize gallery icon description.
$nav_kiv_next = "Next picture"; // Next gallery picture icon description.
$nav_kiv_back = "Previous picture"; // Previous gallery picture icon description.
$nav_kiv_close = "Close"; // Close icon description.
$nav_gps_coord = "Show location on map"; // Googlemaps icon description.
$nav_to_page = "Return to website"; // Return to website icon description.
$slideshow_start = "Start slideshow"; // Start slideshow icon description.
$slideshow_stop = "Stop slideshow"; // Stop slideshow icon description.
$help_text = "Move your mouse [mouse] beyond the sides of the image to see what image comes next/was last in the gallery. If you move your mouse even further to the border of the window you can see the next/last couple of images."; // The help text, that is displayed when you hover over the info icon. The following variable is available: '[mouse]' = mouse moving image
$show_warnings = 1; // Set to 0, if you don't need to get script warnings displayed.
$admin = "user"; // Change the admin login name.
$pw = "password"; // Change the admin login password.
?>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. Of course you can do this also with the admin panel. Individual styling may look like this :
<?php
$fr_width = 214;
$fr_height = 150;
$thumbs = 1;
$th_per_line = 1;
$th_to_square = 0;
$slideshow = 0;
$show_nav = 0;
?>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
As soon as you are logged in as admin (see "Customizing your galleries") you can add comments to every picture conveniently. Just open the particular picture and write your comment in the box below the picture. Comments 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.3bChangelog
- Added: Three new parameters $show_help, $show_preview and $preview_style
- Added: You can choose between preview pictures or small arrows as next/previous image
- Added: 'ki_next.png' and 'ki_back.png' from old script versions
- Added: Removable help icon
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.
Hosting Partnership
posted by Thomas Perry on 07/22/2010 thomas[a_t]pacifichost[do_t]com www.pacifichost.com
To whom it may concern,
I'm contacting you from PacificHost, a premier hosting provider. We focus on offering quality web hosting and reseller hosting solutions. I was looking at your script and noticed your script is fully compatible with our hosting. I also noticed your not currently advertising any web hosting company on your website. I can only imagine your clients have asked you to recommend a hosting provider before. This is a great way for you to earn extra income while referring your clients to a quality hosting provider that supports your script. I'd be more than happy to offer you a free test account so you can test the script on our servers.
Additionally, for every partner we create a custom page on our website which increases the conversion rate, resulting in a higher affiliate commission on your end.
We currently offer a great affiliate system paying up to $65 per commission. I would like to offer a special partnership with your service where we could offer a fixed amount per sale.
You can view more information about our hosting at http://www.pacifichost.com/
Affiliate Program can be found here: http://www.pacifichost.com/affiliates.shtml
I'd like to thank you in advance for your time and consideration. Please let me know if you have any questions as I look forward to hearing from you.
Regards,
Thomas Perry
http://www.pacifichost.com
not all are visible
posted by pics on 06/28/2010
hello.
i encountered with a problem. In one of my galleries i have 37 pics. and not of them are displayed. instead of some pics there are just empty spaces... Maybe 37 is too much?
» This usually happens, when some picture files are corrupted or they are too big for being resized by PHP with the help of GD2-library. You should first check if you can open the original file in the webbrowser. If so, than try to make the files smaller (reduce resolution of the pictures) and see if they are displayed properly. In case you are the webadmin you may also want to increase the memory which PHP is allowed to use during runtime.
Next time please use the support forum for your issues.
posted by hi on 06/25/2010
how to sort pics in one gallery? so that they were displayed in particular order?
thx
» See the $pic_order parameter ... By default all pictures are sorted alphabetically.
gallery
posted by gallery on 06/24/2010
oh, i found my mistake already, no problems now
once again - great script
gallery
posted by vlad on 06/24/2010
hi, have one more question. I added one more gallery but it doesn't display any pics. I already made 4 galleries on my site, so i know how to do it. the path is right, the pics are in right format... So what can be wrong? is there any restriction for the quantity of galleries?
KoschtIT Partnership
posted by Andrew on 06/12/2010 a[do_t]wietlispach[a_t]dualrack[do_t]com www.DualRack.com
Hello,
I came across your image gallery script website (KoschtIT) and really liked what I saw. It looks like you have put allot of time into developing your image gallery script.
I currently run a small web hosting company and after looking at your scripts server specs I believe our web hosting would work excellent in conjunction with your script. I am curious if you would be interested in exchanging links with my website. I would love to make a dedicated page for your image gallery script, similar to ones we already have made for other script developers. The page would link back to your site so our visitors could easily visit your site and download your image hosting script after purchasing web hosting. You can see a couple example pages here:
http://www.dualrack.com/jakcms-hosting
http://www.dualrack.com/wsnlinks-hosting
All I would ask for in return is a link back to our web hosting company on one of your pages. It would be great if you could recommend us to your visitors to host their image gallery websites. While at the same time, we can inform our visitors of other image gallery scripts out there that they can download and use.
Let me know how this sounds to you! Thanks
Andrew W.
DualRack.com
Thumbmails
posted on 05/29/2010
Hi there. first of all - great script!
got a question about the cropping(well i think it is). When in thumbmails view all my pictures are cutted in the edges and thus some pics are missing important elements. Can i make it somehow that the thumbmail didn't cut the edges off?
thanx
» Simply set $th_to_square to 0.
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 .
Occasional error.
posted by Roel on 07/25/2010 roelliej_krangsum[a_t]hotmail[do_t]com
Hi there,
first of all your script is great. Second, I am having some problems with the gallery; Sometimes get this error: "ERROR: Site 'script/gallery/ki_base/ki_koschtit.php' not found or internal error during getHTTP-call."
Do you know what could be the cause of it?
Thanks.
» This error occurs, when an AJAX-request is canceled due to opening a new page while the request response didn't arrive yet. I will fix this in the next script version. Right now you could edit the "ki_js_framework.php" at line 691: Change the line to:
if(xmlhttp.status == 404)alert("ERROR: Site '" + adr + "' not found or internal error during getHTTP-call.");