Loading Facebook Images

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:

  <div class="master-slider ms-skin-default" id="masterslider">
      <div class="ms-slide">
          <img src=".../path/to/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-type="text"
            data-offset = "{origin:bl; x:50px; y:50px;}"
          >
              {{name}}<br>
              by:{{owner-name}}
          </p>
      </div>
  </div>

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. Dynamic tags will be replaced by the related content after loading data from Facebook.
As demonstrated in above example, dynamic tags specifies by locating between
{{ and
}}

Supported dynamic tags

Setup Facebook gallery

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.

    var slider = new MasterSlider();
 
    slider.control('arrows');  
    slider.control('bullets');
    slider.control('thumbnails' , {
          width:127,
          height:137,
          arrows:false
          fillMode:'fill'
    });
  
    slider.setup('masterslider' , {
        width:900,
        height:600,
        space:5,
        fillMode:'fit'
    });

    MSFacebookGallery.setup( slider , { 
        username :'natgeo',
        count:64,
        thumbSize:'320',
        imgSize:'480',
        type:'photostream',
        token:'[The Facebook access token]'
    });

As demonstrated in the example, to setup Facebook gallery you need to useMSFacebookGallery.setup. This method has two parameters. First parameter is the instance of the slider and second one is Facebook api options.

Facebook API parameters