Example 1 - Default Settings
// Create a gallery with default settings				
$('#gallery_1').dcThumbnailGallery({
	'source':'images/gallery.xml'
});
This example code show the basic syntax for building a thumbnail gallery. "#gallery_1" is the id of the div container which hold the gallery. The paramter object specify the path of the xml which driven the gallery.
Example 2 - With Custom Settings 
// 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,
		}
	}
});
This example code show the syntax for config the thumbnail gallery. You can secify a "settings" object in the paramter object to config the gallery. The paramters supported is show in below table.
'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);
	
	}
}
Example 3 - Load from arrays 
// Create a gallery with array source
var mediaPath = 'images/';				
$('#gallery_3').dcThumbnailGallery({
	'source':[
		{'source':mediaPath+'large/o1.jpg','thumbnail':mediaPath+'thumb/o1.jpg'},
		{'source':mediaPath+'large/o2.jpg','thumbnail':mediaPath+'thumb/o2.jpg'},
		{'source':mediaPath+'large/o3.jpg','thumbnail':mediaPath+'thumb/o3.jpg'},
		{'source':mediaPath+'large/f1.jpg','thumbnail':mediaPath+'thumb/f1.jpg'},
		{'source':mediaPath+'large/f2.jpg','thumbnail':mediaPath+'thumb/f2.jpg'},
		{'source':mediaPath+'large/f3.jpg','thumbnail':mediaPath+'thumb/f3.jpg'}
	]
});
This example code show the syntax for develop a gallery with a array instead of xml file.