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

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:<\/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=\"{{title}}\"\/>           \r\n          <img class=\"ms-thumb\" src=\"{{thumb}}\" alt=\"{{title}}\"\/>\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            {{title}}<br>\r\n            {{description}}<br>\r\n            by:{{owner-name}} <br>\r\n            date:{{date-taken}}\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 Flickr.
\nAs demonstrated in the 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\n\n
Dynamic tag<\/td>\nDescription<\/td>\n<\/tr>\n<\/thead>\n
{{title}}<\/code><\/td>\nPhoto title<\/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’s owner name<\/td>\n<\/tr>\n
{{date-taken}}<\/code><\/td>\nPhoto’s date taken<\/td>\n<\/tr>\n
{{views}}<\/code><\/td>\nPhoto views<\/td>\n<\/tr>\n
{{description}}<\/code><\/td>\nPhoto description<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Setup Flickr gallery<\/h2>\n
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.<\/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    MSFlickrGallery.setup(slider, {\r\n      key:'[Your Flickr API Key]',\r\n      id:'[Photoset ID or User ID]',\r\n      count:15,\r\n      imgSize:'o'\r\n    });<\/pre>\n
As demonstrated in the example, to setup Flickr gallery you need to useMSFlickrGallery.setup<\/code>. This method has two parameters. First parameter is the instance of the slider and second one is Flickr api options.<\/p>\n
Flickr API parameters<\/h2>\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
key<\/td>\nnull<\/td>\nSpecifies the Flickr API key<\/td>\n<\/tr>\n
ID<\/td>\nnull<\/td>\nSpecifies the photoset ID or the user ID depends on what is specified for type<\/code> parameter.
\nFor finding the user ID you can take a look at this page<\/a>.
\nAnd you can find the photoset ID from photoset page URL. For more information check out?this article<\/a>.<\/td>\n<\/tr>\n
type<\/td>\n“photoset”<\/td>\nThis option accepts two values “photoset” and “latest”, “photoset” for showing
\nphotoset pictures and “latest” for showing the latest pictures.<\/td>\n<\/tr>\n
imgSize<\/td>\n“c”<\/td>\nThis option accepts four values “-“, “z”, “c” and “b” ,<\/p>\n
“-” for medium size with dimension of 500 on longest side,<\/p>\n
“z” for medium size with dimension of 640 on longest side,<\/p>\n
“c” for medium size with dimension of 800 on longest side,<\/p>\n
and “b” for large size with dimension of 1024 on longest side.<\/td>\n<\/tr>\n
thumbSize<\/td>\n“q”<\/td>\nThis option accepts three values “s”, “q” and “t” ,<\/p>\n
“s” for small square with dimension of “75×75”,<\/p>\n
“q” for large square with dimension of “150×150”<\/p>\n
and “t” for thumbnail with dimension of 100 on longest side.<\/td>\n<\/tr>\n
count<\/td>\n10<\/td>\nThe number of images. It helps the slider to put exact number of pictures.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","type":"solution"}