Page tree
Skip to end of metadata
Go to start of metadata

Master Slider supports Facebook Graph API for getting public images. For this purpose you can create a dynamic template with slider markup and setup the slider with a Facebook 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="{{name}}"/>			 
   					<img class="ms-thumb" src="{{thumb}}" alt="{{name}}"/>
					<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"
		<!-- end of masterslider -->

As demonstrated in above markup, you can define a template slide in slider markup. After initializing, 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 {{name}}. Check the below table for list of all available shortcodes:

{{name}}Photo name
{{thumb}}Photo thumbnail path
{{image}}Original photo path

Photo owner name

{{link}}Photo link in Facebook

Setup Facebook Gallery in JS section

JavaScript Sample
		var slider = new MasterSlider();
		slider.control('thumblist' , {autohide:false, dir:'h',arrows:false,align:'bottom',width:127,height:137,fillMode:'fill',margin:1,space:1,hideUnder:400});
		slider.setup('masterslider' , {
		new MSFacebookGallery(slider , {username:'', albumId:'383279938403091', type:'album', thumbSize:'320', imgSize:'orginal', count:20});

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:

usernamenullSpecifies facebook username, this is required when you want to show a photostream of a user.
albumeIdnullSpecifies the album ID.
type"photostream"Specifies the source type of photos from Facebook. "album" loades photos from a public album and "photostream" loads user timeline latest public photos.
thumbSize"320"Specifies the size of thumbnails, it accepts orginal/960/720/600/480/320/130 values.
imgSize"original"Specifies the size of photo, it accepts orginal/960/720/600/480/320/130 values.
count10Specifies the total number of photos should be loaded by slider.

(info) For finding the album ID you can take a look at this article.