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: Using the DMXzone CSS Image Gallery and Flash MP3 Player

Introduction

 In this tutorial we're going to show you how to add Flash MP3 Player functionality in DMXzone CSS Image Gallery using the Behaviors Connector. At the end of the tutorial you will have a gallery that plays a new song when a new image is displayed.

Note: This tutorial requires Flash MP3 Player

How to do it

1. Create your gallery.

Create a new or open an existing HTML page and save the page, insert the gallery.

2. Insert the Flash MP3 Player on your page
   Choose the  icon from the DMXzone object bar to insert the Flash MP3 Player , add some songs and press OK. Enable the Autoplay option in the property inspector to make the player play automatically.
3. Select The DMXzone CSS Image Gallery button That Should Initiate The Behavior
   Select the DMXzone CSS Image Gallery in your browser and select and in your property inspector choose an image that you want to apply the behavior to with the arrows or by typing in a number corresponding to the image of your choice.
   
   

4. Adding The Behaviors Connector
   
   
   
   Click on the  icon and DMXzone Behaviors Connector pops up.
   
   
5. Add Control MP3 Player
   In the Available Behaviors tab, choose the Control MP3 Player behavior.
   
   You can choose from the Available Events. We choose Click on the image.
   Select the  icon to apply the behavior. The following popup appears:
   
   
   
   The Player dropdown box displays the Flash MP3 Players on your page. Yes that's right you can control multiple Flash MP3 Players! But in this basic example there is only one player so the default selection will do. The Action dropdown box sets the action that the Flash MP3 Player must perform. Select Go To and set the Number to 1 to go to the first song when you select the first image in your CSS Image Gallery. Press OK.
   
   

6. Repeating the steps for additional images.
   Now repeat the same steps starting from 3. Select The CSS Image Gallery Image That Initiates The Behavior but select the second image and enter 2 in the Number box. The player will now play the second song when the second image appears in your CSS Image Gallery. Repeat these steps for all images in your gallery for an optimal effect.
7. Final steps
   Save your files, upload them to your server, don't forget to upload the MP3's as well and double check if the Autoplay feature of the Flash MP3 Player is enabled.