CSS Image Gallery
"CSS Image Gallery allows you to create cool pure CSS galleries and slideshows with a fluent navigation and image transitions."

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. Check out the demo.
The gallery complies with the latest web standards and is fully JavaScript unobtrusive, meaning that the images 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.
Features highlights:
- Control the CSS Image Gallery with your own customized interface, using behaviors.
- Web standards based
- Smart Preloading of Images
- JavaScript Unobtrusive
- Smart preloading of Images
- Great thumbnail navigation and image transition
James Cameron's Avatar Concept Art Demo
James Cameron's Avatar Wallpapers Demo
| Features in Detail » |
Features in Detail
- Pure CSS Gallery
The gallery is created using CSS it doesn't require any plugins and works on all modern browsers
- Web standards based
The gallery complies to the latest web standards of the W3C

- Gallery size adjusts to image size
- When having different image sizes the gallery size will automatically resize to the size of the selected image
check out the demo
- When having different image sizes the gallery size will automatically resize to the size of the selected image
- Smart Preloading of Images
Every image has its own fancy preloader to indicate the loading process. Furthermore the gallery loads only the images that need to be displayed, instead of loading the complete gallery which saves bandwidth and improves performance
- Great thumbnail navigation and image transitions
Navigate using thumbnails and enjoy the great fade and motion effects that are displayed when browsing to the gallery

- Add Titles and Descriptions to each image
You can easily add a title and description to each image as caption! When the image is shown the caption will nicely slide in over the image in the desired color, font and transparacy. All CSS based.
- JavaScript Unobtrusive
Images will always display correctly, even if your users don't use JavaScript or have a very old browser - Intelligent Scaling
The gallery automatically adjusts to the images aspect ratio

Check out the demo
- Search Engine Friendly
Due to the advanced incorporated technology this gallery is the ultimate search engine friendly gallery so the gallery titles and descriptions are well indexed by search engines

- Customize your gallery
- Change the looks of the gallery in Dreamweaver without coding
- Add links to the main image and (optionally) open it in a new window with Advanced Layer Popup
- Advanced users can customize the gallery anyway they like by
customizing the supplied CSS file with help of the detailed documentation that lists the important
classes and properties

- Automatically generated thumbnails
- Auto generate your thumbnails with the correct size while proportions are maintained and
crop them if needed using Dreamweaver or
Fireworks
- Auto generate your thumbnails with the correct size while proportions are maintained and
crop them if needed using Dreamweaver or
Fireworks
- Slideshow option with automatic thumbnail popup
- Create great slideshows with auto play and automatic thumbnail popup

- Create great slideshows with auto play and automatic thumbnail popup
- Images are resized while constraining proportions
- Original images can be automatically resized to fit the specified size while the proportions are maintained using Fireworks
- Original images can be automatically resized to fit the specified size while the proportions are maintained using Fireworks
- Integrated in Dreamweaver
- interactive dialog in Dreamweaver with all the options you'll need;

- an inline property inspector so that you can easily change visual options later on

- interactive dialog in Dreamweaver with all the options you'll need;

| « Overview | Demos » |
Golf Club Demo
The demo shows Dynamic CSS Image Gallery, using File Genie PHP/ASP as a Data Source instead of a database recordset, combined through Behavior Connector with Flash MP3 Player.
DMXzone Fresh Fruits Demo
Click on the image below to see the CSS Image Gallery in Lightbox window.
Beach Chairs Catalog Demo
Click on a thumbnail in addition to get more detailed info about the chairCity Guide Demo
Explore
some of the most beautiful cities in the World and enjoy the music that
has been played when you go through the images. It shows a great
combination of the CSS Image Gallery working together with Flash MP3 Player, glued together with DMXzone Behavior Connector.
Metallica Discography Demo
Go through the images and listen to the songs from each Metallica album.
Demos
Check
out this new demo that uses images that are resized with Dreamweaver.
Click on the main image to see a popup with a larger version (this
feature requires Advanced Layer Popup).
Another demo that uses images that are resized using Dreamweaver.
This new demo shows you how the Gallery Automatically scales to the size of the images.
This
gallery has its thumbnails above the main image, you can place the
thumbnails everywhere you like, even inside the main image.
This updated demo shows you an example of a great gallery that was created in minutes using CSS Image Gallery.
| « Features in Detail | Videos » |
Creating a Cool Image Gallery that Retrieves Images from a Folder List
With this movie we will show you how easily you can create your CSS Image Gallery and have it retrieve its images from a File Genie PHP/ASP Folder List using Folder List Repeater.
Show your Images in a Cool Lightbox
With this movie we will show you how easily you can show the images from CSS Image Gallery in DMXzone Lightbox for greater user experience.
Creating a CSS Image Gallery within a Lightbox
With this movie we will show you how easily you can use CSS Image Gallery withinDMXzone Lightbox
Combine CSS Image Gallery and Advanced Tooltips
With this
movie we will show you how to combine CSS Image Gallery and Advanced Tooltips for the best presentation experience of your gallery.
Dynamic CSS Image Gallery video
With this movie we will show you how easily you can create your CSS Image Gallery and have it retrieve its images from a database using a standard Dreamweaver Recordset.
Using the DMXzone CSS Image Gallery and Flash MP3 Player
With this movie we will show you how easily you can play different sounds for each image using the DMXzone CSS Image Gallery and Flash MP3 Player.
This video shows how easy you can create a CSS Image Gallery.
| « Demos | Requirements » |
| Type: | Suite |
|---|---|
| License: | Details... |
| Product: | Dreamweaver MX 2004, Dreamweaver 8, Dreamweaver CS3, Dreamweaver CS4 |
| Platform: | Win XP/2000/2003/2008/7, Mac OS X 10.4+ |
| Browser: | Explorer 6, Explorer 7, Netscape 9, Opera 9, Firefox 1.5+, Safari 2.0+, Safari 3+, Safari 4, Google Chrome |
| « Videos | History » |
Version 1.0.9
- Improved compatibility with Sliding Panels
- Optimized jQuery code to even smaller file size
- Improved compatibility with jQuery 1.4
- Improved Dreamweaver CS5 installer
- Improved Vista and Windows 7 support for faster image resize with multi threading
- Greatly improved GIF resize support - now colors are quantized for best quality
Version 1.0.8
- Improved IE8 compatibility
- Improved Mouse Wheel scrolling for the thumbnails and main image – scrolling is much smoother now
- Improved DMXzone Resizer for the Mac OSX platform
- Various speed improvements and bug fixes
Version 1.0.7
- Fixed auto scroll to the gallery (giving it focus on load)
- Updated DMXzone Behavior Connector
Version 1.0.6
- Improved the build-in Image Resizer for Mac OSX
- Updated DMXzone Behavior Connector for seamless integration with Advanced Layer Popup and DMXzone Lightbox
- Improved browser support when using Behavior connector events
Version 1.0.5
- New DMXzone Image Resizer included. This is our own super fast, multithreaded image processor for Dreamweaver, that will resize your images and make thumbnails in an eye blink. No need for Fireworks any more.
- Full support of the new DMXzone Behavior Connector : Add interactive components and behaviors to your CSS Image Gallery such as Advanced Tooltips, Advanced Layer Popup or Flash MP3 Player.
- Control the CSS Image Gallery with your own customized interface, using behaviors.
- Interface improvements
- Installer Improvements
- New jQuery 1.3.2 included
Update Procedure:
1. Open one page that use the CSS Image Gallery in Dreamweaver
2. Select the CSS Image Gallery on your page and then change something
from the Inspector. Like move the current image selection forward and
then back.
3. You should see some alerts about updated files, make sure you upload these to your live server and you are ready
| « Requirements |
George Petrov
George Petrov is the Founder of the highly successful Zones: DMXzone.com, FWzone.net, FLzone.com, CFzone.net, DNzone.com and FlashFiles.nl
He has developed the comprehensive Dynamic Zones Content Management System that is the brains driving them and constantly supports their online communities with his extensive and valuable knowledge.
He is a renowned web development 'Guru' who has written many articles and extension for Adobe's Dreamweaver.
George Petrov is also the CEO and Founder of Dynamic Zones and also very proud of his children Sofie, Victor and Alexander!
























