{"id":291,"date":"2019-03-04T10:44:59","date_gmt":"2019-03-04T10:44:59","guid":{"rendered":"https:\/\/awplife.com\/demo\/animated-live-wall-premium\/?page_id=291"},"modified":"2019-03-04T10:44:59","modified_gmt":"2019-03-04T10:44:59","slug":"flickr-feed-mosaic","status":"publish","type":"page","link":"https:\/\/awplife.com\/demo\/animated-live-wall-premium\/flickr-feed-mosaic\/","title":{"rendered":"Flickr Feed Mosaic"},"content":{"rendered":"<h1 style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-189\" style=\"display: inline-block;\" src=\"https:\/\/awplife.com\/demo\/animated-live-wall-premium\/wp-content\/uploads\/sites\/66\/2019\/02\/flickr-logo-png-3.png\" alt=\"\" width=\"67\" height=\"67\" \/><\/h1>\n<h1 style=\"text-align: center;\">FLICKR FEED WITH MOSAIC<\/h1>\n<p style=\"text-align: center;\">Show your Flickr\u00a0feed with a beautiful mosaic layout<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\">\t<style>\r\n\t.progress-button button {\r\n\t\tborder: 2px solid #242a33;\r\n\t\tcolor: #242a33\t}\r\n\t.progress-button button:hover {\r\n\t\tbackground-color: #242a33\t}\r\n\t.ri-grid ul li {\r\n\t\tmargin: 0\t}\r\n\t<\/style>\r\n\t\t<!-- begin folding modal -->\r\n\t<div class=\"alw-pre-loader folding\">\r\n\t\t<div class=\"sk-cube1 sk-cube\"><\/div>\r\n\t\t<div class=\"sk-cube2 sk-cube\"><\/div>\r\n\t\t<div class=\"sk-cube4 sk-cube\"><\/div>\r\n\t\t<div class=\"sk-cube3 sk-cube\"><\/div>\r\n\t<\/div>\r\n\t<div id=\"freewall\" class=\"free-wall\" style=\"display:none;\">\r\n\t\t\t\t\t\t\t<div class='brick' style='width:534.66914644682px;'>\r\n\t\t\t\t\t\t\t<a class=\"grid pw-lightbox\" target=\"_new\" href=\"https:\/\/live.staticflickr.com\/7816\/47122625952_49171804e5_b.jpg\" rel=\"noopener\">\r\n\t\t\t\t\t\t\t\t<figure class='snip1467'><img src='https:\/\/live.staticflickr.com\/7816\/47122625952_49171804e5_b.jpg' width='100%'>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-flickr fab fa-flickr'><\/i>\r\n\t\t\t\t\t\t\t\t\t<!--<i class='pw-heart far fa-heart'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-comment far fa-comment'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<figcaption><p class='pw-caption'> ABC XYZ<\/p><\/figcaption>-->\r\n\t\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class='brick' style='width:526.89607978188px;'>\r\n\t\t\t\t\t\t\t<a class=\"grid pw-lightbox\" target=\"_new\" href=\"https:\/\/live.staticflickr.com\/7811\/40208745023_693a329bd9_b.jpg\" rel=\"noopener\">\r\n\t\t\t\t\t\t\t\t<figure class='snip1467'><img src='https:\/\/live.staticflickr.com\/7811\/40208745023_693a329bd9_b.jpg' width='100%'>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-flickr fab fa-flickr'><\/i>\r\n\t\t\t\t\t\t\t\t\t<!--<i class='pw-heart far fa-heart'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-comment far fa-comment'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<figcaption><p class='pw-caption'> ABC XYZ<\/p><\/figcaption>-->\r\n\t\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class='brick' style='width:498.9350165934px;'>\r\n\t\t\t\t\t\t\t<a class=\"grid pw-lightbox\" target=\"_new\" href=\"https:\/\/live.staticflickr.com\/7907\/33298308048_9692311217_b.jpg\" rel=\"noopener\">\r\n\t\t\t\t\t\t\t\t<figure class='snip1467'><img src='https:\/\/live.staticflickr.com\/7907\/33298308048_9692311217_b.jpg' width='100%'>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-flickr fab fa-flickr'><\/i>\r\n\t\t\t\t\t\t\t\t\t<!--<i class='pw-heart far fa-heart'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-comment far fa-comment'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<figcaption><p class='pw-caption'> ABC XYZ<\/p><\/figcaption>-->\r\n\t\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class='brick' style='width:476.80461584907px;'>\r\n\t\t\t\t\t\t\t<a class=\"grid pw-lightbox\" target=\"_new\" href=\"https:\/\/live.staticflickr.com\/7826\/33298308138_52e705a567_b.jpg\" rel=\"noopener\">\r\n\t\t\t\t\t\t\t\t<figure class='snip1467'><img src='https:\/\/live.staticflickr.com\/7826\/33298308138_52e705a567_b.jpg' width='100%'>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-flickr fab fa-flickr'><\/i>\r\n\t\t\t\t\t\t\t\t\t<!--<i class='pw-heart far fa-heart'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-comment far fa-comment'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<figcaption><p class='pw-caption'> ABC XYZ<\/p><\/figcaption>-->\r\n\t\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class='brick' style='width:207.85823662666px;'>\r\n\t\t\t\t\t\t\t<a class=\"grid pw-lightbox\" target=\"_new\" href=\"https:\/\/live.staticflickr.com\/7912\/33298308408_1e4869faa7_b.jpg\" rel=\"noopener\">\r\n\t\t\t\t\t\t\t\t<figure class='snip1467'><img src='https:\/\/live.staticflickr.com\/7912\/33298308408_1e4869faa7_b.jpg' width='100%'>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-flickr fab fa-flickr'><\/i>\r\n\t\t\t\t\t\t\t\t\t<!--<i class='pw-heart far fa-heart'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-comment far fa-comment'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<figcaption><p class='pw-caption'> ABC XYZ<\/p><\/figcaption>-->\r\n\t\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class='brick' style='width:558.61552905227px;'>\r\n\t\t\t\t\t\t\t<a class=\"grid pw-lightbox\" target=\"_new\" href=\"https:\/\/live.staticflickr.com\/7807\/40208745433_64ccc3b2d6_b.jpg\" rel=\"noopener\">\r\n\t\t\t\t\t\t\t\t<figure class='snip1467'><img src='https:\/\/live.staticflickr.com\/7807\/40208745433_64ccc3b2d6_b.jpg' width='100%'>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-flickr fab fa-flickr'><\/i>\r\n\t\t\t\t\t\t\t\t\t<!--<i class='pw-heart far fa-heart'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-comment far fa-comment'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<figcaption><p class='pw-caption'> ABC XYZ<\/p><\/figcaption>-->\r\n\t\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class='brick' style='width:150.19337239219px;'>\r\n\t\t\t\t\t\t\t<a class=\"grid pw-lightbox\" target=\"_new\" href=\"https:\/\/live.staticflickr.com\/7837\/40208745603_8705b82001_b.jpg\" rel=\"noopener\">\r\n\t\t\t\t\t\t\t\t<figure class='snip1467'><img src='https:\/\/live.staticflickr.com\/7837\/40208745603_8705b82001_b.jpg' width='100%'>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-flickr fab fa-flickr'><\/i>\r\n\t\t\t\t\t\t\t\t\t<!--<i class='pw-heart far fa-heart'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-comment far fa-comment'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<figcaption><p class='pw-caption'> ABC XYZ<\/p><\/figcaption>-->\r\n\t\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class='brick' style='width:326.64978854668px;'>\r\n\t\t\t\t\t\t\t<a class=\"grid pw-lightbox\" target=\"_new\" href=\"https:\/\/live.staticflickr.com\/7879\/32231718757_94aa071aa7_b.jpg\" rel=\"noopener\">\r\n\t\t\t\t\t\t\t\t<figure class='snip1467'><img src='https:\/\/live.staticflickr.com\/7879\/32231718757_94aa071aa7_b.jpg' width='100%'>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-flickr fab fa-flickr'><\/i>\r\n\t\t\t\t\t\t\t\t\t<!--<i class='pw-heart far fa-heart'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-comment far fa-comment'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<figcaption><p class='pw-caption'> ABC XYZ<\/p><\/figcaption>-->\r\n\t\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class='brick' style='width:345.48689028969px;'>\r\n\t\t\t\t\t\t\t<a class=\"grid pw-lightbox\" target=\"_new\" href=\"https:\/\/live.staticflickr.com\/7860\/33298250248_d41f91a672_b.jpg\" rel=\"noopener\">\r\n\t\t\t\t\t\t\t\t<figure class='snip1467'><img src='https:\/\/live.staticflickr.com\/7860\/33298250248_d41f91a672_b.jpg' width='100%'>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-flickr fab fa-flickr'><\/i>\r\n\t\t\t\t\t\t\t\t\t<!--<i class='pw-heart far fa-heart'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<i class='pw-comment far fa-comment'>  <\/i>\r\n\t\t\t\t\t\t\t\t\t<figcaption><p class='pw-caption'> ABC XYZ<\/p><\/figcaption>-->\r\n\t\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\r\n\t<\/div>\r\n\t\r\n\t\t<!-- progress button load more -->\r\n\t<div class=\"pw-loader-wrapper\">\r\n\t\t<!-- begin folding modal -->\r\n\t\t\t<div id=\"alw-loader-more\" class=\"folding\" style=\"display:none;\">\r\n\t\t\t\t<div class=\"sk-cube1 sk-cube\"><\/div>\r\n\t\t\t\t<div class=\"sk-cube2 sk-cube\"><\/div>\r\n\t\t\t\t<div class=\"sk-cube4 sk-cube\"><\/div>\r\n\t\t\t\t<div class=\"sk-cube3 sk-cube\"><\/div>\r\n\t\t\t<\/div>\r\n\t\t<div id=\"progress-button\" class=\"lg_load_more progress-button\" style=\"display:none;\">\r\n\t\t\t<!-- button with text -->\r\n\t\t\t<button><span>Load More<\/span><\/button>\r\n\t\t<\/div>\r\n\t\t<input type=\"hidden\" id=\"lg_limit_start\" name=\"lg_limit_start\" value=\"9\" class=\"btn\" \/>\r\n\t\t<input type=\"hidden\" id=\"lg_limit_end\" name=\"lg_limit_end\" value=\"18\" class=\"btn\" \/>\r\n\t\t<input type=\"hidden\" id=\"lg_total_images\" name=\"lg_total_images\" value=\"50\" class=\"btn\" \/>\r\n\t\t<p class=\"lg_no_more\" style=\"display:none\">No more images.<\/p>\r\n\t<\/div>\r\n\t<!-- progress-button load more -->\r\n\t<script type=\"text\/javascript\">\r\njQuery(window).load(function() {\r\n\t\/\/ show gallery after page load and hide loader\r\n\tjQuery('.alw-pre-loader').hide();\r\n\tjQuery('#freewall').show();\r\n\tjQuery('.progress-button').show();\r\n\tvar wall = new Freewall(\"#freewall\");\r\n\twall.reset({\r\n\t\tanimate: true,\r\n\t\tcellW: 50, \/\/ function(container) {return 100;} 50 to 300\r\n\t\tcellH: 'auto', \/\/ function(container) {return 100;}\r\n\t\tdelay: 50, \/\/ slowdown active block;\r\n\t\tengine: 'giot',\r\n\t\tfixSize: null, \/\/ resize + adjust = fill gap;\r\n\t\t\/\/fixSize: 0, resize but keep ratio = no fill gap;\r\n\t\t\/\/fixSize: 1, no resize + no adjust = no fill gap;\r\n\t\tgutterX: 0, \/\/ width spacing between blocks;\r\n\t\tgutterY: 0, \/\/ height spacing between blocks;\r\n\t\tkeepOrder: false,\r\n\t\tselector: '.brick',\r\n\t\tdraggable: false,\r\n\t\tcacheSize: true, \/\/ caches the original size of block;\r\n\t\trightToLeft: false,\r\n\t\tbottomToTop: false,\r\n\t\tonGapFound: function() {},\r\n\t\tonComplete: function() {},\r\n\t\tonResize: function() {\r\n\t\t\twall.fitWidth();\r\n\t\t},\r\n\t\tonBlockDrag: function() {},\r\n\t\tonBlockMove: function() {},\r\n\t\tonBlockDrop: function() {},\r\n\t\tonBlockReady: function() {},\r\n\t\tonBlockFinish: function() {},\r\n\t\tonBlockActive: function() {},\r\n\t\tonBlockResize: function() {}\t\t\r\n\t});\r\n\r\n\twall.container.find('.brick').resize();\r\n\t\r\n\tvar images = wall.container.find('.brick');\r\n\timages.find('img').load(function() {\r\n\t\twall.fitWidth();\r\n\t});\r\n\t\r\n\t\/\/load more js\r\n\t\tjQuery(\".lg_load_more\").click(function(){\r\n\t\tjQuery(\"#progress-button\").hide();\r\n\t\tjQuery(\"#alw-loader-more\").show();\r\n\t\t\r\n\t\tvar lg_limit_start = parseInt(jQuery(\"#lg_limit_start\").val());\r\n\t\tvar lg_limit_end = parseInt(jQuery(\"#lg_limit_end\").val());\r\n\t\tvar lg_total_images = parseInt(jQuery(\"#lg_total_images\").val());\r\n\t\t\r\n\t\tif(lg_total_images > lg_limit_start) {\r\n\t\t\tjQuery.ajax({\r\n\t\t\t\tdataType : 'html',\r\n\t\t\t\ttype: 'POST',\r\n\t\t\t\turl : location.href,\r\n\t\t\t\tcache: false,\r\n\t\t\t\tdata : '&lg_security=' + '3f844927cd' + '&lg_limit_start=' + lg_limit_start + '&lg_limit_end=' + lg_limit_end ,\r\n\t\t\t\tcomplete : function() {},\r\n\t\t\t\tsuccess: function(response) {\r\n\t\t\t\t\t\t\tvar images = wall.container.find('.brick');\r\n\t\t\t\t\t\t\/\/\twall.container.find('.brick').resize();\r\n\t\t\t\t\t\t\t\/\/ images.find('img').load(function() {\r\n\t\t\t\t\t\t\t\t\/\/ wall.fitWidth();\r\n\t\t\t\t\t\t\t\/\/ });\r\n\t\t\t\t\t\t\tvar html = jQuery(response).find('div.pw_load_more_result');\r\n\t\t\t\t\t\t\twall.appendBlock(html);\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\/\/wall.container.find('.brick').resize();\r\n\t\t\t\t\t\t\t  setTimeout(function() {\r\n\t\t\t\t\t\t\t\t  \r\n\t\t\t\t\t\t\t\t\twall.fitWidth();\r\n\t\t\t\t\t\t\t\t\tjQuery(\".pw_load_more_result\").addClass('animate');\r\n\t\t\t\t\t\t\t\t\t jQuery(\".pw_load_more_result\").css({visibility: 'visible'});\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t}, 600);\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\tjQuery(\"#alw-loader-more\").hide();\r\n\t\t\t\t\t\t\tjQuery(\"#progress-button\").show();\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\/\/selecter\r\n\t\t\t\t\t\t\tvar new_lg_start_limit = lg_limit_end;\r\n\t\t\t\t\t\t\tvar new_lg_end_limit = parseInt(lg_limit_end) +  parseInt(9);\r\n\t\t\t\t\t\t\tjQuery(\"#lg_limit_start\").val(new_lg_start_limit);\r\n\t\t\t\t\t\t\tjQuery(\"#lg_limit_end\").val(new_lg_end_limit);\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\/\/ lightbox\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tjQuery(\".pw-lightbox\").colorbox({\r\n\t\t\t\t\t\t\t\trel:'pw-lightbox',\r\n\t\t\t\t\t\t\t});\t\r\n\t\t\t\t\t\t\tjQuery(\".youtube\").colorbox({iframe:true, innerWidth:640, innerHeight:390});\r\n\t\t\t\t\t\t\tjQuery(\".vemio\").colorbox({iframe:true, innerWidth:640, innerHeight:390});\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\t\t\r\n\t\t\t});\r\n\t\t} else {\r\n\t\t\tjQuery(\"#alw-loader-more\").hide();\r\n\t\t\tjQuery(\".lg_load_more\").hide();\r\n\t\t\tjQuery(\".lg_no_more\").show();\r\n\t\t}\t\t\r\n\t});\r\n\t\t\/\/ lightbox\r\n\t\t\t\tjQuery(\".pw-lightbox\").colorbox({\r\n\t\t\trel:'pw-lightbox',\r\n\t\t});\t\r\n\t\tjQuery(\".youtube\").colorbox({iframe:true, innerWidth:640, innerHeight:390});\r\n\t\tjQuery(\".vemio\").colorbox({iframe:true, innerWidth:640, innerHeight:390});\r\n\t\t});\r\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>FLICKR FEED WITH MOSAIC Show your Flickr\u00a0feed with a beautiful mosaic layout &nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-291","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/awplife.com\/demo\/animated-live-wall-premium\/wp-json\/wp\/v2\/pages\/291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/awplife.com\/demo\/animated-live-wall-premium\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/awplife.com\/demo\/animated-live-wall-premium\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/awplife.com\/demo\/animated-live-wall-premium\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/awplife.com\/demo\/animated-live-wall-premium\/wp-json\/wp\/v2\/comments?post=291"}],"version-history":[{"count":1,"href":"https:\/\/awplife.com\/demo\/animated-live-wall-premium\/wp-json\/wp\/v2\/pages\/291\/revisions"}],"predecessor-version":[{"id":293,"href":"https:\/\/awplife.com\/demo\/animated-live-wall-premium\/wp-json\/wp\/v2\/pages\/291\/revisions\/293"}],"wp:attachment":[{"href":"https:\/\/awplife.com\/demo\/animated-live-wall-premium\/wp-json\/wp\/v2\/media?parent=291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}