Comic Gallery

May 26th, 2005

ComicGallery was originally created for a subscription based webcomic site I worked on in 2004. I’m making it available under the GNU General Public License, which means it’s free software and you can use it on your own site.

Download

ComicGallery.zip

This script will automatically create a gallery from a directory of images that you specify. It’s easy to add to existing webpages, and easy to modify the configuration of the script to produce a variety of gallery styles suitable for webcomics as well as other types of artwork.

Other scripts for creating more complex types of galleries exist, but they often take longer to setup, administer, and integrate into your site. This script can be included on your page with a single line of code, and uses minimal, standards based markup (XHTML) that can be easily styled with CSS to match the rest of your website.

Optional features include:

  • Start with the first or last image in the directory

  • Display navigation above or below images

  • Back and Next links

  • Back and Next arrows

  • Direct links to each image

  • Configurable number of links per line

  • Customizable dividers between links

  • Display the copyright owner

  • Display a link to your Creative Commons License

The default settings for the script will create a gallery from files in an “images” subdirectory. You can easily change this and other script settings to suit your needs.

ComicGallery 1.2 includes navigation links for going to the first or last image in the gallery, as well as enhanced XHTML output to allow you to replace the text navigation with custom images. You can see an example of Comic Gallery 1.2 at RealmOfAtland.com

New Features

The First and Last links are controlled by the variable:

$firstlast=1;

The default setup for Comic Gallery includes start and last links for navigating back and next through the images. To this option off, change this line to:

$firstlast=0;

Additional <span> tags have been added to the generated markup for use with CSSImage Replacement techniques. This will allow you to replace the text navigation for the gallery with your own custom images.

This zip file includes some sample images for you to get started: cg_nav.zip

Setting up your navigation images

Unzip the file and upload the files to a directory on your website as follows:

  • YourWebsiteFolder
    • comicgallery.php

    • example.php

    • kubrick.css

    • images

    • kubrick

    • cg_nav
      • back.gif

      • back_on.gif

      • back_off.gif

      • first.gif

      • first_on.gif

      • first_off.gif

      • last.gif

      • last_on.gif

      • last_off.gif

      • next.gif

      • next_on.gif

      • next_off.gif

Add this CSS to your page (eg. example.php) and your gallery will display images for the First, Back, Next and Last links:

/* CG nav setup */
#cg_nav1 { height: 50px; width: 400px; margin: 0 auto; }
#cg_nav1 a, #cg_nav1 span {
height: 50px; width: 100px; float: left;
background: #fff top left no-repeat; }
#cg_nav1 a span, #cg_nav1 span span,
#cg_nav1 .cg_divider { display: none; }
/* CG nav images */
a#cg_first { background: url(cg_nav/first.gif); }
a#cg_back { background: url(cg_nav/back.gif); }
a#cg_next { background: url(cg_nav/next.gif); }
a#cg_last { background: url(cg_nav/last.gif); }
/* CG nav rollover images */
a#cg_first:hover { background: url(cg_nav/first_on.gif); }
a#cg_back:hover { background: url(cg_nav/back_on.gif); }
a#cg_next:hover { background: url(cg_nav/next_on.gif); }
a#cg_last:hover { background: url(cg_nav/last_on.gif); }
/* CG nav unavailable images */
span#cg_first { background: url(cg_nav/first_off.gif); }
span#cg_back { background: url(cg_nav/back_off.gif); }
span#cg_next { background: url(cg_nav/next_off.gif); }
span#cg_last { background: url(cg_nav/last_off.gif); }

Replace the cg_nav files with your own, but be sure to adjust the height and width settings in above CSS if you have different size images. You might also consider using CSS Sprites to reduce the number of image files needed for your gallery’s navigation.

Be sure to check the Comic Gallery Tutorial for help with setting up and configuring the script.