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: Creating Popups for your CSS gallery by integrating Advanced Layer Popup

Introduction

In this tutorial we're going to show you how you can open your main images in a popup using CSS Image Gallery and Advanced Layer Popup.

A bigger version of the image appears in a popup when the enhanced image is clicked.

Creating the Popup

  1. Before you begin
    Make sure you've read the Before You begin and Creating a Basic Gallery chapters.

  2. Applying the extension
    Choose the  icon from the DMXzone object bar to apply the extension, the following  popup appears:




  1. Setting the Advanced Layer Popup options
    We go to the Property Inspector and click the paperclip button which opens the DMXzone Behavior Connector. You will notice that the paperclip becomes red after attaching your first behaviour. Prior to any behaviours it is blue as in the screenshot below.


    Then we click the + next to DMXzone and view our available behaviours.

    One of them is Advanced Layer Popup. Add this behavior for the Event 'Click on the image' to create a popup window with a larger version of the image. The popup window will be displayed when the user clicks on the enhanced image.

    Note: you need Advanced Layer Popup to open your enhanced images in a popup window.
    After adding the behavior a new popup window appears.

    Now it is time to select the image we'll display in our popup window by pressing the Browse… button next to the Url to Display field.

    We use the following settings (feel free to experiment on your own):

  1. Final steps
    Press Ok, save your files, upload them to your server (including the script library) and the result should be similar to the image below.

Share this Article