Loading Flickr Images

You can load public images from a public Flickr account or a photoset and show them as a slider. To create a Flickr 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="{{title}}"/>           
          <img class="ms-thumb" src="{{thumb}}" alt="{{title}}"/>
          <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;}"
          >
            {{title}}<br>
            {{description}}<br>
            by:{{owner-name}} <br>
            date:{{date-taken}}
          </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 Flickr.
As demonstrated in the example, dynamic tags specifies by locating between
{{ and
}}

Supported dynamic tags

Setup Flickr gallery

After specifying the slider markup, you need to set the Flickr images source and API data. You can set them after the 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'
    });

    MSFlickrGallery.setup(slider, {
      key:'[Your Flickr API Key]',
      id:'[Photoset ID or User ID]',
      count:15,
      imgSize:'o'
    });

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

Flickr API parameters