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.
The Basics: Editing the Gallery with the property inspector
Introduction
In
this chapter we're going to edit the properties of the gallery using the
property inspector of Dreamweaver. Click on the preview of the gallery in the
design view to display its properties. Below is a screenshot of the property
inspector and a screenshot of the final result.
Editing the Slide options
- Setting the Title and description options
The Title of the slide is displayed when the user moves the mouse over the image, let's enter
"Opera" here:
You can add a Link to your main image by entering a URL in the Link field (for instance http://www.dmxzone.com) . We'll leave it empty for now. You can also add a popup window that displays content (for instance a big version of the main image). We'll show you how to do this in the Creating Popups for your CSS gallery by integrating Advanced Layer Popup chapter.
The Description is displayed directly beneath the title , let's enter "Beijing Opera is one of China's most recent theatrical forms" here:
- Selecting your slides
You can select the slide you want to edit with these buttons:
Press
to select the first slide,
select 
to go to the previous slide, 
to
advance to the next slide and select 
to go to the last slide or
enter the slide number in the entry field between these buttons to go
directly to a specific slide.
- Adding deleting or editing slides and their positions
You can add single or multiple slides, delete slides and move the position of the slides.
Press
to change the slide photo, 
to
add a slide, 
to delete one, 
to add a
folder with slides, 
to move the selected slide
back and 
to move the selected slide a
position further.
The edit, add and add folder icons will launch a new popup screen and automatically resize the added images.
The delete button instantly deletes the selected slide.
Note: make sure you navigate to the correct slide first before moving it.
Setting the Gallery options
You
can change the dimensions of your gallery by changing the Width and Height fields next to the Gallery options. We'll
leave the Width and Height because we like the default settings.
The Slide Time sets the total amount of time that each slide is
displayed when the slideshow mode is activated.
The Auto Play option is used to create an automatic slideshow of your
gallery.
- Defining the Caption options
We'll leave the Caption Pos to Top. This property sets the position of the text field that we talked about at point 1.
After that we set the Opacity, which determines the opacity of the background behind the text, to 40% so we can read our text better.
- Editing the Thumbs options
You can change the dimensions of your thumbnails by changing the Width and Height fields next to the Thumbs options, we'll leave them as we like the default options.
We'll set the Pos to Bottom to display our thumbnails at the bottom of the screen.
Select the Inside option if you want to position the thumbnails inside your main image. When the inside option is selected the thumbnails are only displayed when the user moves the mouse over them. We'll leave the Inside Option unselected.
Edit the Padding to change the whitespace around your thumbnails, in this example we've set it to 10:
- Final steps
Press OK and press f12 to preview and save. That's it you've created your own gallery!
