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':{		
		'titlePosition':'top',		
		'thumbnailEnabled':false,		
		'thumbnailSize':20,		
		'controlThemeColor':'#000000',
		'controlThemeAlpha':40,
		'resizeMode':5   
		},
		'basic':{							
		'backgroundColor':'#333333',
		'themeColor':'#000000',
		'themeTextColor':'#FFFFFF'
		}
	}
});
		
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':{		
	'titleEnabled':true,          // Enable/disable the title
	'titlePosition':'top',        // The position of the title
	
	'thumbnailEnabled':true,      // Enable/disable the slide controls		
	'thumbnailSize':20,	          // The size of the thumbnail.
	
	'navigationEnabled':false,	  // Enable/disable the slide controls
	'controlThemeColor':'#000000',// The color of the controls
	'controlThemeAlpha':40,       // The alpha of the controls
	
	'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').dcSlideGallery({
	'source':[
		{'source':mediaPath+'large/o1.jpg',
		 'thumbnail':mediaPath+'thumb/o1.jpg',
		 'title':'Title 1',
		 'description':'This is a description.'},
		
		{'source':mediaPath+'large/o2.jpg',
		 'thumbnail':mediaPath+'thumb/o2.jpg',
		 'title':'Title 2',
		 'description':'This is a description with LINK.'},
		
		{'source':mediaPath+'large/o3.jpg',
		 'thumbnail':mediaPath+'thumb/o3.jpg',
		 'title':'Title 3',
		 'description':'This is a description.'},
		
		{'source':mediaPath+'large/f1.jpg',
		 'thumbnail':mediaPath+'thumb/f1.jpg',
		 'title':'Title 4',
		 'description':'This is a description.'},
		
		{'source':mediaPath+'large/f2.jpg',
		 'thumbnail':mediaPath+'thumb/f2.jpg',
		 'title':'Title 5',
		 'description':'This is a description.'},
		
		{'source':mediaPath+'large/f3.jpg',
		 'thumbnail':mediaPath+'thumb/f3.jpg',
		 'title':'Title 6',
		 'description':'This is a description.'}
	]
});
		
This example code show the syntax for develop a gallery with a array instead of xml file.