Thumbnail Gallery jQuery plugin

Thumbnail Gallery JQuery plugin is a easy to use JQuery plugin for web developers to build Javascript gallery on their web application. Easy setup and only minimum programming knowledge is needed. It's great to showcase your photography or design portfolio.

Highlighted features:

• Driven by xml or arrays
• 3D Transition Effects (support in Safari)
• Easy to setup
• Slide show controls
• Included image preview lightbox with zoom
• Easy customization
• Multi-touch support in IOS

Create a gallery with default settings

$('#gallery_1').dcThumbnailGallery({
        'source':'images/gallery.xml'
});

Create a gallery with different settings

$('#gallery_2').dcThumbnailGallery({
        'source':'images/gallery.xml',                                                                          
        'settings':{
                'gallery':{                                                     
                        'thumbnailPosition':'top',      
                        'thumbnailAutoHide':true,                                                                                                               
                        'categoryPosition':'bottom',                                                    
                        'buttonThemeColor':'#ff8800',
                        'buttonThemeTextColor':'#000000',                                                       
                        'controlsEnabled':false,
                        'resizeMode':0                                  
                },
                'basic':{                                                       
                        'backgroundColor':'#111111',
                        'themeColor':'#ff8800',
                        'themeTextColor':'#FFFFFF',
                        'themeAlpha':100,                                                       
                        'autoSlideShowEnabled':true,
                        'slideShowEnabled':true,
                        'slideShowInterval':5,
                }
        }
});

Properties

'settings':{
        'gallery':{

                'thumbnailPosition':'bottom', // The postion of thumbnail. (top, bottom, left, right)
                'thumbnailSize':50,           // The size of the thumbnail.
                'thumbnailAutoHide':false,    // Enable/disable the thumbnail auto hide.
                'thumbnailMargin':5,          // The padding of each thumbnail          

                'categoryPosition':'bottom',  // The position of category bar. (top, bottom)            
                'buttonThemeColor':'#ff8800', // The color of category bar.
                'buttonThemeTextColor':'#FFFFFF', // The text color of category bar

                'controlsEnabled':true,       // Enable/disable the slide controls
                'zoomEnabled':true,           // Enable/disable the image zoom feature

                'transitionType':'random',    // Set the transition type
                                              // 'slide' : sliding out left/right
                                              // 'flip'  : 3d flip
                                              // 'slideup' : sliding up/down
                                              // 'swap'  : 3d swap
                                              // 'cube'  : 3d cube
                                              // 'pop'   : pop up
                                              // 'fade'  : fade
                                              // 'random' : random
                                              // *3D transition only supported by Safari

                'resizeMode':0                // Set the resize mode of main image
                                              //        AUTO            :0
                                              //        AUTO_WIDTH      :1
                                              //        AUTO_HEIGHT     :2
                                              //        STRETCH         :3
                                              //        AUTO_FILL       :5      
        },
        'basic':{

                'backgroundColor':'#333333',  // Set main background color
                'themeColor':'#000000',       // Set the overall theme color
                'themeTextColor':'#FFFFFF',   // Set the overall theme text color
                'themeAlpha':100,             // Set the overall theme background alpha

                'autoSlideShowEnabled':false, // Enable/disable auto start slide show
                'slideShowEnabled':true,      // Enable/disable slide show
                'slideShowInterval':5,        // Time between slide (sec);

        }
}