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.
Note: The latest version of this extension resizes images using Dreamweaver, Fireworks is no longer required.
The Basics: Creating a gallery
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
- Create a new HTML page
Create a new or open an existing HTML page and save the page.
- Applying the extension
Choose the icon from the DMXzone object bar to apply the extension.
The following popup appears:
- 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:
- 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.
- 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.
- Final Steps
Press OK to generate your
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!