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.
Advanced: Creating Popups for your CSS gallery by integrating Advanced Layer Popup
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
- Before you begin
Make sure you've read the Before You begin and Creating a Basic Gallery chapters.
- Applying the extension
Choose the icon from the DMXzone object bar to apply the extension, the following popup appears:
- 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):
- 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.