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.


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

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





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

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



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



  2. 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:



  3. Final steps
    Press OK and press f12 to preview and save.  That's it you've created your own gallery!

Share this Article