Master Slider Flickr Template

You need to put the following html markup in your html document where you want to have slider

	<!-- template -->
	<div class="ms-flickr-template">
		
		
				
								 
   					
					
						{{title}}

						{{description}}

						by:{{owner-name}} 

						date:{{date-taken}}
					
				
		
		
	</div>
	<!-- end of template -->

You need to put the following scripts just before the < ⁄ body>

	<script type="text/javascript">		
	
					
	var slider = new MasterSlider();
	slider.control("arrows", {autohide:false});
	slider.control('bullets',{autohide:false,hideUnder:300,align:'bottom',margin:15})
	slider.control('thumblist',{fillMode:'fill',autohide:false,width:100,height:66,inset:false,align:'bottom',dir:'h',space:5,margin:5,hideUnder:800})
	
	slider.setup("masterslider", {
		width:850,
		height:650,
	  	space:0,
		speed:20,
		view:'focus',
		layout:'fullwidth',
		instantStartLayers:true
	});

	var flkr = new MSFlickrV2(slider , {key:'[Your Flickr API Key]' , id:'[Photoset ID or User ID]' , count:15, imgSize:'o'});
		
	</script>

You need to import the following files

		<!-- Base MasterSlider style sheet -->
		<link rel="stylesheet" href="../masterslider/style/masterslider.css" />
		
		<!-- Master Slider Skin -->
		<link href="../masterslider/skins/default/style.css" rel='stylesheet' type='text/css'>
		
		<script src="../masterslider/jquery.min.js"></script>
		<script src="../masterslider/jquery.easing.min.js"></script>
		
		<!-- Master Slider -->
		<script src="../masterslider/masterslider.min.js"></script>