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.


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.  

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

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



Item to change

Relevant CSS rule

Property and value to add or change

Next button on the main image

.dmxGallery a.dmxNext

background-image, width, height

Previous button on the main image

.dmxGallery a.dmxPrevious

Play button on the main image

.dmxGallery a.dmxPlay

Pause button on the main image

.dmxGallery a.dmxPause

Next button on the thumbnail list

.dmxThumbList a.dmxNext

Previous button on the thumbnail list

.dmxThumbList a.dmxPrevious


Changing the Position of Navigation Buttons

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

Item to change

Relevant CSS rule

Property and value to add or change

Next button on the main image

.dmxGallery a.dmxNext

Top, bottom, left, right, margin-left, margin-right

Previous button on the main image

.dmxGallery a.dmxPrevious

Play button on the main image

.dmxGallery a.dmxPlay

Pause button on the main image

.dmxGallery a.dmxPause

Next button on the thumbnail list

.dmxThumbList a.dmxNext

Previous button on the thumbnail list

.dmxThumbList a.dmxPrevious

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' );
}


Item to change

Relevant CSS rule

Property and value to add or change

Next button on the main image

.dmxGallery a.dmxNext

background-image

Previous button on the main image

.dmxGallery a.dmxPrevious

Play button on the main image

.dmxGallery a.dmxPlay

Pause button on the main image

.dmxGallery a.dmxPause

Next button on the thumbnail list

.dmxThumbList a.dmxNext

Previous button on the thumbnail list

.dmxThumbList a.dmxPrevious

Enriching the Thumbnail design

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


Item to change

Relevant CSS rule

Property and value to add or change

Background color of the thumbnails bar

dmxThumbList

background-color


Editing Thumbnail Borders

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


Item to change

Relevant CSS rule

Property and value to add or change

Border of regular thumbnails

.dmxThumbList ul li a

 

Border of the selected thumbnail

.dmxThumbList ul li a.selected

Border (for example: border: 1px solid #FFB0DA;)

Border of the thumbnail on mouse over

.dmxThumbList ul li a:hover

Border (for example: border: 2px solid #40B0DA;)

 


Customizing Your Captions

You can also edit the properties of your caption text.


Item to change

Relevant CSS rule

Property and value to add or change

General caption properties

.dmxGallery .imageCaption

background-color, font-size, font-family, padding, text-align

Caption Title

.dmxGallery .imageCaption h3

font-size, font-family, padding, margin, text-align

Caption Description

.dmxGallery .imageCaption p

Text alignment

.dmxGallery .imageCaption

text-align


Main image and gallery border

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


Item to change

Relevant CSS rule

Property and value to add or change

Border around the main image

.dmxGallery .imageMainContainer

Border (For example: border: 5px solid #FF0000;)

Border around the complete gallery

.dmxGallery

Border

Share this Article