{"title":"Loading Facebook Images","id":52027,"link":"https:\/\/env.averta.net\/en\/step\/loading-facebook-images\/","parent":[51854],"content":"

With Master Slider dynamic sources, you can load your public images from a Facebook gallery or your timeline, and show them as a slider. To create a Facebook slider, first, you need to create a template for the slider. Its markup is very similar to a custom slider markup. The snippet below defines a slider template:<\/p>\n

  <div class=\"master-slider ms-skin-default\" id=\"masterslider\">\r\n      <div class=\"ms-slide\">\r\n          <img src=\"...\/path\/to\/blank.gif\" data-src=\"{{image}}\" alt=\"{{name}}\"\/>           \r\n          <img class=\"ms-thumb\" src=\"{{thumb}}\" alt=\"{{name}}\"\/>\r\n          <p class=\"ms-layer\"\r\n            style=\"background:rgba(255,255,255,0.5); padding: 20px;\"\r\n            data-type=\"text\"\r\n            data-offset = \"{origin:bl; x:50px; y:50px;}\"\r\n          >\r\n              {{name}}<br>\r\n              by:{{owner-name}}\r\n          <\/p>\r\n      <\/div>\r\n  <\/div><\/pre>\n
As you can see in the example above, you just need to define one slide in the slider and specify dynamic parts by dynamic tags<\/code>. Dynamic tags will be replaced by the related content after loading data from Facebook.
\nAs demonstrated in above example, dynamic tags specifies by locating between
\n{{<\/code> and
\n}}<\/code><\/p>\n
Supported dynamic tags<\/h2>\n\n\n\n\n\n\n\n\n\n
Dynamic tag<\/td>\nDescription<\/td>\n<\/tr>\n<\/thead>\n
{{name}}<\/code><\/td>\nPhoto name<\/td>\n<\/tr>\n
{{thumb}}<\/code><\/td>\nPhoto thumbnail path<\/td>\n<\/tr>\n
{{image}}<\/code><\/td>\nOriginal photo path<\/td>\n<\/tr>\n
{{owner-name}}<\/code><\/td>\nPhoto owner name<\/td>\n<\/tr>\n
{{link}}<\/code><\/td>\nPhoto link in Facebook<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Setup Facebook gallery<\/h2>\n
After specifying the slider markup, you need to set the Facebook images source and API data. You can set them after slider JS setup. Below you can find an example.<\/p>\n
    var slider = new MasterSlider();\r\n \r\n    slider.control('arrows');  \r\n    slider.control('bullets');\r\n    slider.control('thumbnails' , {\r\n          width:127,\r\n          height:137,\r\n          arrows:false\r\n          fillMode:'fill'\r\n    });\r\n  \r\n    slider.setup('masterslider' , {\r\n        width:900,\r\n        height:600,\r\n        space:5,\r\n        fillMode:'fit'\r\n    });\r\n\r\n    MSFacebookGallery.setup( slider , { \r\n        username :'natgeo',\r\n        count:64,\r\n        thumbSize:'320',\r\n        imgSize:'480',\r\n        type:'photostream',\r\n        token:'[The Facebook access token]'\r\n    });\r\n<\/pre>\n
As demonstrated in the example, to setup Facebook gallery you need to useMSFacebookGallery.setup<\/code>. This method has two parameters. First parameter is the instance of the slider and second one is Facebook api options.<\/p>\n
Facebook API parameters<\/h2>\n\n\n\n\n\n\n\n\n\n\n\n
\n
Option<\/div>\n<\/th>\n
\n
Default<\/div>\n<\/th>\n
\n
Description<\/div>\n<\/th>\n<\/tr>\n<\/thead>\n
token<\/td>\nnull<\/td>\nThe Facebook access token, you need to generate a new token in Facebook to
\ngain access to the data. For more information,
\ncheck out this page<\/a>.<\/td>\n<\/tr>\n
username<\/td>\nnull<\/td>\nSpecifies Facebook username, this is required when you want to show a photostream
\nof a user.<\/td>\n<\/tr>\n
albumeId<\/td>\nnull<\/td>\nSpecifies the album ID.<\/td>\n<\/tr>\n
type<\/td>\n“photostream”<\/td>\nSpecifies the source type of photos from Facebook. “album” loads photos from
\na public album and “photostream” loads user timeline latest public photos.<\/td>\n<\/tr>\n
thumbSize<\/td>\n“320”<\/td>\nSpecifies the size of thumbnails, it accepts
\norginal\/960\/720\/600\/480\/320\/130<\/code> values.<\/td>\n<\/tr>\n
imgSize<\/td>\n“original”<\/td>\nSpecifies the size of photo, it accepts
\norginal\/960\/720\/600\/480\/320\/130<\/code>
\nvalues.<\/td>\n<\/tr>\n
count<\/td>\n10<\/td>\nSpecifies the total number of photos should be loaded by slider.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","type":"solution"}