Skip to end of metadata
Go to start of metadata

Master Slider supports Flickr API for getting public images from user's lastest photos or a photoset. For this purpose you can create a dynamic template with slider markup and setup the slider with a Flickr Gallery module.

Slide template Markup:

Facebook Gallery Sample Markup
		<!-- masterslider -->
		<div class="master-slider ms-skin-default" id="masterslider">
				<div class="ms-slide" id="slide1">
					<img src="masterslider/blank.gif" data-src="{{image}}" alt="{{title}}"/>			 
   					<img class="ms-thumb" src="{{thumb}}" alt="{{title}}"/>
					<p 	class="ms-layer"
						style="background:rgba(255,255,255,0.5); padding: 20px;"
						data-offset-x = "50"
						data-offset-y = "50"
						data-origin = "bl"
					>
						{{title}}<br>
						{{description}}<br>
						by:{{owner-name}} <br>
						date:{{date-taken}}
					</p>
				</div>
		</div>
		<!-- end of masterslider -->

As demonstrated in the markup above, you can define a template slide in the slider markup. After initializing, the slider creates slides based on this template. 

In slide templates you can use shortcodes which will be replaced width appropriate data after initiation. Shortcodes should be inserted between {{ and }} for example {{ouwner-ame}}. Check the table below for the list of all available shortcodes:

ShortcodeDescription
{{title}}Photo title
{{thumb}}Photo thumbnail path
{{image}}Original photo path
{{owner-name}}

Photo's owner name

{{date-taken}}Photo's date taken
{{views}}

Photo views

{{description}}Photo description

Setup Facebook Gallery in JS section

JavaScript Sample
	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'});

As you can see in the sample above, you just need to create a new instance of MSFacebookGallery after slider "setup method". It has two parameters, first one specifies slider instance for Facebook Gallery and the other one is an object of gallery configuration each described in the following:

OptionDefaultDescription
keynullSpecifies the Flickr API key
IDnullIt depends on the option type. It should be photoset's ID if type is set to "photoset" and it should be user's ID if type is set to "latest".
type"photoset"This option accepts two values "photoset" and "latest", "photoset" for showing photoset pictures and "latest" for showing the latest pictures.
imgSize"c"This option accepts four values "-", "z", "c" and "b" ,
"-" for medium size with dimension of 500 on longest side,
"z" for medium size with dimension of 640 on longest side,
"c" for medium size with dimension of 800 on longest side,
and "b" for large size with dimension of 1024 on longest side.
thumbSize"q"This option accepts three values "s", "q" and "t" ,
"s" for small square with dimension of "75x75",
"q" for large square with dimension of "150x150"
and "t" for thumbnail with dimension of 100 on longest side.
count10The number of images. It helps the slider to put exact number of pictures.

(info) For finding the user ID you can take a look at this page.

(info) You can find the photoset ID from photoset page path. For more information check this article.