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.

Advanced: Controlling the DMXzone CSS Image Gallery with Behaviors

Introduction

In this tutorial we're going to show you how easy it is to control the DMXzone CSS Image Gallery with external elements like buttons, images or anything else where you can add a Dreamweaver behavior to. We use the DMXzone -> Control CSS Image Gallery behavior from the Dreamweaver Behaviors panel to do this.

The Gallery on your page controlled by external buttons.

How to do it

1. We insert a basic gallery in the page
   Create a new or open an existing HTML page and save the page, insert the gallery.
2. Add a button
   Add a button to the page, select it and go to our tags panel. Select the Behaviors tab and choose the DMXzone -> Control CSS Image Gallery behavior.  
   
   

3. Choose your Action
   Select your gallery in the Gallery: box and select your Action.  Press OK. If you use the Go To you can select your image to go to. The counting starts at 0.
   
   

4. Final steps
   Save your files, upload them to your server and you are ready to go.

Advanced: CSS customization

Introduction

In this chapter we are going to show you the layout and design flexibility our extension offers. By editing the dmxgallery.css file you can set a huge range of options. We'll discuss the most important ones. Each time we discuss a major element, such as the navigation buttons, and we show you its properties in the table (width, height etc.).

You can edit the CSS file in Dreamweaver by double clicking on it in the CSS panel:

You'll edit the CSS properties in this panel (a CSS opens in the background), make sure to save the CSS file after editing.

Changing the Navigation Buttons

This table explains how to change the images that are used for your navigation buttons.

Changing the Position of Navigation Buttons

In this chapter we explain how to change the positioning of your buttons.

Tip: To set a button in the middle of the main image, set the left to 50%. Then set margin-left to -50% of the image width for example:

.dmxGallery a.dmxPlay {
      top: 50%;
      left: 50%;
      margin-left: -20px;
      margin-top: -20px;
      width: 40px;
      height: 40px;
      background-image: url( 'controlbl_play.png' );
}

Navigation Button Rollover Options

This table describes the properties you need to modify to create or change a button rollover effect.

Note: Make sure you only set the properties you want to change on hover to prevent problems, below is an example of a hover class.

.dmxGallery a.dmxPlay:hover
{
      background-image: url( 'controlbl_play.png' );
}

Enriching the Thumbnail design

This property shows how you can change the background color of your thumbnails.

Editing Thumbnail Borders

This table shows you how to change the style of your thumbnail borders.

Customizing Your Captions

You can also edit the properties of your caption text.

Main image and gallery border

Set the properties listed below to add a border around the main image or the gallery.