Thumbnail Gallery jQuery plugin

Thumbnail Gallery jQuery plugin

jQuery plugin for simple slideshow gallery with thumbnails

  • Language: JavaScript
    Framework: jQuery
  • Released: Jul 15, 2011
    Last Update: Jul 13, 2011

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);

        }
}
You need to log-in or create an account
  • Create an account
  • Log-in

Please use your real name.

Activation link will be sent to this address.

Minimum 8 characters

Enter your password again

Clicking this button confirms you read and agreed to the terms of use and privacy policy.

X

Save your watchlist

Fill your details below to receive project updates from your watch list - including new versions, price changes and discounts.

I agree to the terms of use and privacy policy.

1 license From » $12.99 View Licenses 14 day money-back guarantee
Post a comment

Or enter your name and Email
No comments have been posted yet.