Back to Top
The nuts and bolts for
Creative web development

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.

Overview

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
* For complete Features overview press the Features in Detail button 

Features

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

  • 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 read more

  • 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

  • Slideshow option with 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

  • 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


Preview in Dreamweaver You can see a preview within Dreamweaver of how your gallery will look like and navigate within the photos!

Showcases


  • Interior Project Showcase

    For this showcase we used the DMXzone Bootstrap in order to create the page layout and the CSS Image Gallery for the images overview that can be changed with the gallery navigation or the thumbnails.

  • Online PayPal Store Template Showcase

    For this showcase we used the Online PayPal Store Template in order to create web merchant for sports equipment, with great product presentation and easy navigation.

  • Hotel Rooms Showcase

    We created several image galleries with the CSS Image Gallery extension. Then we added a drop-down menu with the different rooms. When you pick a room, the DMXzone Ajax Form comes in to play and ...

  • Tablets Overview Showcase

    For this showcase we used Universal CSS Navigation Menu for the navigation and customized CSS Image Gallery in order to display the images for the tablets.

  • Online Shoes Store Showcase

    In this showcase we will show you a detailed product page with amazing preview of images, created with the CSS Image Gallery and awesome site navigation from the Universal CSS Navigation Menu.

  • DMXzone Fresh Fruits Showcase

    Click on the image below to see the CSS Image Gallery in Lightbox window.

  • Finished Projects Showcase

    In this showcase website you can see the CSS Image Gallery in action and show your projects in an amazing gallery.

  • DMXzone Watermark Gallery

    * Please, make sure that you do NOT upload inappropriate materials to the live showcases.

  • CSS Image Gallery & Lightbox Showcase

    For this showcase site we packed all our images in an amazing CSS Image Gallery that can be scrolled up and down, and additionally you can see a larger view of the image in a cool DMXzone Lightbox ...

  • Air Show Galleries Showcase

    All CSS Image Galleries are nicely packed in a Sliding Billboard and open in a cool Lightbox.

  • HTML5 Suite

    In this showcase we've used seven out of nine extensions packed in the HTML5 Suite to create a Website. We've also added tips, so you can explore each detail how it's been made and which extensions ...

  • Animated CSS Image Gallery Showcase

    In this showcase we will show you an example of a Slide In Gallery, which was designed with CSS Image Gallery and animated with Advanced CSS Animator.

  • 2010 FiFa World Cup South Africa Showcase

    The showcase will show you all teams presented in CSS Image Gallery. Use your mouse to slide the panels from team to team.

  • Lightbox Gallery with Single Thumbnail

    For this showcase site we packed all our images in an amazing CSS Image Gallery that can be scrolled up and down, and additionally you can see a larger view of the image in a cool DMXzone Lightbox ...

  • Wallpapers Showcase

    For this showcase site we packed all our images in an amazing CSS Image Gallery that can be scrolled up and down, and additionally you can see a larger view of the image in a cool DMXzone Lightbox ...

  • Concept Art Showcase

    For this showcase site we packed all our images in an amazing CSS Image Gallery that can be scrolled up and down, and additionally you can see a larger view of the image in a cool DMXzone Lightbox ...

  • Golf Club Showcase

    The showcase shows Dynamic CSS Image Gallery, using File Genie ASP as a Data Source instead of a database recordset, combined through Behavior Connector with Flash MP3 Player.

  • Beach Chairs Catalog Showcase

    Click on a thumbnail in addition to get more detailed info about the chair

  • Flowers Catalog Showcase

    By clicking on a picture from the CSS Image Gallery a Spry Tab Panel opens automatically with a Spry Accordion containing information about it. Same happens when you choose a Spry Tab Pannel or one ...

  • Metallica Discography Showcase

    Go through the images and listen to the songs from each Metallica album.

  • City Guide Showcase

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

Videos

Basic Usage

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.

Bundle Usage

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 within DMXzone 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.

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.

Requirements

Type: Suite
License: External link
Product: Dreamweaver MX 2004, Dreamweaver 8, Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CC
Platform: Win XP/2000/2003/2008/7, Mac OS X 10.4+
Browser: IE 6, Netscape 9, Opera 9, Firefox 1.5, Safari 2.0, IE 7, Safari 3, Chrome 9+, Safari 4+


History

Version 1.1.5

  • Full Dreamweaver CC and Extension Manager CC support
  • Included new Behavior Connector with restyled UI and better Mac OSX Support
  • Updated the automatic file copy and update component for better Dreamweaver CC support
  • Improved compatibility with the latest jQuery
  • Included latest jQuery 1.10.1
  • Improved Windows 8 compatibility

Version 1.1.4

  • Improved integration with dynamic data
  • Improved DW integration
  • Included the latest mouse wheel plug-in
  • Latest jQuery 1.7.2 included
  • Improved DMXzone Behavior Connector and other behaviors from DMXzone extensions
  • Improved installer for Mac DW CS6

Version 1.1.3

  • Greatly improved Safari & Chrome support
  • Improved image preloading in the gallery for the fastest visual response
  • Updated the mouse wheel support
  • Improved Dreamweaver integration
  • Optimized file size for faster loading
  • Improved extension installation for DW CS5.5+

Version 1.1.2

  • Latest DMXzone Image Resizer included for the best performance
  • Improved compatibility with newest jQuery 1.6+ versions
  • Improved mouse wheel handling for the newest jQuery
  • Included latest jQuery 1.6.3
  • Optimized source and files for smaller size
  • Improved automatic shared file copy, synchronization and upload from Dreamweaver
  • Improved working in Dreamweaver templates

Version 1.1.1

  • Improved initial gallery visibility - now the gallery is shown directly in the right layout
  • Smaller JavaScript files by better compression
  • Improved jQuery version recognition and include
  • Improved related files include method
  • Compatibility now with site root relative links Dreamweaver option for making all includes site root relative

Version 1.1.0

  • New automatic dependent file updater
  • Included new jQuery 1.4.4
  • Improved depended file includes
  • Improvements with the behavior connector events
  • Improved DMXzone Image resizer for Mac OSX
  • Improved support for Windows 7
  • Even faster resizing by using all the available cores of the CPU's
  • Improved working in Dreamweaver templates

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
DMXzone Image Resizer used by CSS Image Gallery in Dreamweaver:
  • 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

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com, which is visited daily by more than 30.000 people and is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article