Design Meme

I’ve made a few updates to my Comic Gallery Script, and a new version is now available. ComicGallery 1.1 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.1 at RealmOfAtland.com

Download ComicGallery.zip

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

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 CSS Image 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.

Download 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.