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.