Back to Top
The nuts and bolts for
Creative web development

CSS Image Gallery Manual

“CSS Image Gallery allows you to create cool pure CSS galleries and slideshows with a fluent navigation and image transitions. Due to its CSS nature it is fully customizable and fits in any site design.”

CSS Image Gallery allows you to create cool pure CSS galleries and slideshows with a fluent navigation and image transitions. Due to its CSS nature it is fully customizable and fits in any site design. You can even create a fancy slideshow with automatic thumbnail popup navigation.

The gallery complies with the latest web standards and is fully JavaScript unobtrusive, meaning that it will always be displayed, even if your users don’t use JavaScript. Therefore this is the ultimate search engine friendly CSSgallery.

Note: The latest version of this extension resizes images using Dreamweaver, Fireworks is no longer required.


The Basics: Creating a gallery

Introduction

In this tutorial we're going to show you how easy it is to insert a gallery on to your page.

The Gallery on your page.

Building the Gallery

  1. Create a new HTML page
    Create a new or open an existing HTML page and save the page.

  2. Applying the extension
    Choose the  icon from the DMXzone object bar to apply the extension.


    The following  popup appears:



  3. Setting the Source Options
    Now it is time to set the Source Images Folder, this is the location of the photos you want to use in your album.


    Below is a screenshot of the options we entered:



  4. Setting the Image Resize Options
    We'll select the Destination Folder to determine where the resized images and thumbnails of your gallery will be saved.

  5. Setting the Image Sizes
    Select the format you want your photos to be in. You have a choice from JPG, PNG, and GIF. You can set the sizes of your photos manually or leave them at their default values. Choose if you want to Crop your thumbnails. If you enable this, the photo size will be as specified but the image will not be whole. You have the option to Sharpen your images as well.

  6. Final Steps

Press OK to generate your album.

The extension will start automatically to resize your images. You'll see the total number of images that have been resized, the total number of images that need to be resized and the image name.


If you chose Dreamweaver as Image Processor you'll see the following progress bar;

           

After the batch process is finished you will see the following notice;



Be sure to copy the images folder and the styles folder to your server.

Press OK and press f12 to preview and save.  That's it you've created your own gallery!


Share this Article