CK-Gallery is now UberGallery!

Description

UberGallery is a simple, yet powerful, PHP photo gallery that will basically manage itself for you. UberGallery supports .jpg, .gif & .png image types, and will automatically creates thumbnails on the fly. The main feature of this gallery is it automatically outputs XHTML compliant markup for inclusion on a web page. The UberGallery will also automatically prune it's thumbnails, so when you delete an image from the images folder, it will delete the corresponding thumbnail. The gallery also creates a log file for reference and debugging. The UberGallery is licensed under the MIT License.

UberGallery also includes dynamic pagination. This allows users with larger galleries to split the gallery up into several smaller pages so visitors can easily browse those pages using a navigation bar below the gallery. GZip compression is also implemented on the default index.php file included with the gallery which helps to reduce bandwidth usage and improves page load times significantly.

Download

Follow UberGallery development on GitHub and Twitter

GitHub Twitter

Requirements

Due to technical limitations of the functions used, you must be running PHP version 4.0.6 or higher in a Linux environment, or version 4.3.0 on a Windows environment. Also, you must have the PHP GD version 2.0.1 or later installed (2.0.28 or later is recommended).

The oldest PHP version this script has been successfully tested on was a Linux system running PHP version 4.3.11 and PHP GD version 2.0.28, if you've tested UberGallery successfully on an older version of Linux or on any Windows server, I'd like to know, please contact me.

For more information on PHP and PHP GD, please see http://www.php.net

Included Files/Folders

ubergallery/
|  cache/                        - Default cache directory
|  images/                       - Default image directory (put your images here)
|  resources/
|  |  css/                       - Script styles
|  |  |  colorbox.css
|  |  |  ubergallery.css
|  |  images/                    - Script images
|  |  |  bg.png
|  |  |  border.png
|  |  |  controls.png
|  |  |  images.png
|  |  |  loading_background.png
|  |  |  loading.gif
|  |  |  page_white_stack.png
|  |  js/                        - Script JavaScript
|  |  |  jquery.colorbox.js
|  |  |  jquery.js
documentation/
|  css/
|  |  ie-fixes.css
|  |  style.css
|  files/
|  |  changelog.txt              - Script changelog
|  |  license.txt                - License information
|  images/
|  |  arrow_up.png
|  |  github.png
|  |  twitter.png
|  |  ubergallery_logo.png
|  index.html                    - This documentation
index.php                        - Main gallery script
README                           - Basic README file

Simple Installation

  1. Upload index.php and the ubergallery directory to your web server where you would like the gallery to be displayed. (Example: http://www.domain-name.com/photo-gallery/)
  2. Upload your images to the ubergallery/images/ directory.
  3. Make the .ubergaller/cache/ directory wrightable by the web server.
  4. Open your web browser and navigate to the directory where you installed the gallery and the script should generate thumbnails and display your images.

Install to Pre-Existing Web Page

  1. If you wish to change the name or location of the images folder, thumbnails folder or log file, or you would like to enable pagination, open index.php and edit the variables found at the top.
  2. Rename index.php to ubergallery.php
  3. Upload the newly created ubergallery.php and the entire ubergallery/ folder to your web server.
  4. Insert the following code into the page where you would like the gallery to be displayed: 
    <?php include_once('path/to/script/ubergallery.php'); ?>
  5. Copy the contentst of ubergallery/resoureces/css/gallery.css into your own style sheet or include it in your page and edit it to your liking.
  6. Upload your images to the images directory (ubergallery/images/ by default).
  7. Make the .ubergaller/cache/ directory wrightable by the web server.
  8. Navigate to the page in your browser and the script should generate thumbnails and display your images.

Customizing your Gallery

The UberGallery comes with class and id elements already in place, this allows for customization of the look and feel of your gallery. All you have to do is edit the CSS style sheet, or create your own, and you'll be off in no time.

This is the typical structure of the XHTML output:

<div id="gallery-wrapper">
  <div id="gallery-constraint">
    <div id="gallery-header">UberGallery Image Gallery</div>
    <div id="gallery-images">
      <a href="#"><img src="#" /></a>
      <a href="#"><img src="#" /></a>
      <a href="#"><img src="#" /></a>
    </div>
    <div id="uber-footer">
      <div id="credit">Credit...</div>
    </div>
  </div>
</div>

Also, here's the pagination navigation structure:

<ul id="uber-pagination">
  <li class="inactive">&lt;</li>
  <li class="current-page">1</li>
  <li><a href="?page=2">2</a></li>
  <li><a href="?page=3">3</a></li>
  <li><a href="?page=4">4</a></li>
  <li><a href="?page=2">&gt;</a></li>
</ul>

Pagination

To enable pagination, open index.php, find $imgPerPage = 0; at the top and set this value to the number of images you would like to display per page.

NOTE: If pagination is enabled, the script will generate thumbnails on a per-page basis. You do not have to worry about this though, the first time a visitor visits a page without thumbnails, it will automatically generate the thumbnails, however this may cause the page to take several seconds to load the first time it processes.

Page Caching

Page caching can drastically reduce the CPU load on your server and is more efficient for servers with high traffic. To enable page caching, edit the "$expireTime = 0;" value found at the top of the ubergallery/ubergallery.php script. This value is the time in minutes after which a new cach file will be generated.

NOTE: At the moment, if you upload new images or make a change to the script while caching is enabled, you will have to delete the cache files or wait the ammouont of time specified before your changes will be reflected on the page.

To delete the cache files, use an FTP program or shell access to delete the "gallery-cache" folder and all of it's contents.

Update Notifications

To enable the update notification, open index.php, find $verCheck = false; and change this value to true. Once done, whenever an update to UberGallery is available, a message will appear at the bottom of your gallery informing you of this new version and providing a link to the new version.

You may also get update notifications by following @ubergallery on Twitter.

Contact

If you have any questions or comments, please email me: Admin@UberGallery.net

Shout Outs

Thanks go out to Dual for inadvertently inspiring me to get up off my ass and program this.

Also, thanks to Penguin for answering questions throughout the entire development process and for some bug testing.

Thanks also to Nak for rigorous beta testing that helped me iron out a number of bugs and fix backwards capabilities.

Obligatory thanks to Hexatex for pen testing the crap out of this script and helping me find and patch many vulnerabilities.

Lastly, thanks to the StackOverflow.com community for help here and there.

Additional Info

For more info and to download UberGallery, please visit: http://www.UberGallery.net