{"id":213,"date":"2019-02-14T06:48:01","date_gmt":"2019-02-14T06:48:01","guid":{"rendered":"https:\/\/awplife.com\/demo\/photo-wall-premium\/?page_id=213"},"modified":"2019-02-21T13:21:31","modified_gmt":"2019-02-21T13:21:31","slug":"instagram-masonry","status":"publish","type":"page","link":"https:\/\/awplife.com\/demo\/animated-live-wall-premium\/instagram-masonry\/","title":{"rendered":"Instagram Masonry"},"content":{"rendered":"<h1 style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-189\" style=\"display: inline-block;\" src=\"https:\/\/awplife.com\/demo\/photo-wall-premium\/wp-content\/uploads\/sites\/66\/2019\/02\/Instagram_icon.png\" alt=\"\" width=\"67\" height=\"67\" srcset=\"https:\/\/awplife.com\/demo\/animated-live-wall-premium\/wp-content\/uploads\/sites\/66\/2019\/02\/Instagram_icon.png 512w, https:\/\/awplife.com\/demo\/animated-live-wall-premium\/wp-content\/uploads\/sites\/66\/2019\/02\/Instagram_icon-150x150.png 150w, https:\/\/awplife.com\/demo\/animated-live-wall-premium\/wp-content\/uploads\/sites\/66\/2019\/02\/Instagram_icon-300x300.png 300w\" sizes=\"auto, (max-width: 67px) 100vw, 67px\" \/><\/h1>\n<h1 style=\"text-align: center;\">INSTAGRAM FEED MASONRY<\/h1>\n<p style=\"text-align: center;\">Show your Instagram feed with Masonry 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 #333333;\r\n\t\tcolor: #333333\t}\r\n\t.progress-button button:hover {\r\n\t\tbackground-color: #333333\t}\r\n\t.ri-grid ul li {\r\n\t\tmargin: 0\t}\r\n\t<\/style>\r\n\t\t<style type=\"text\/css\">\r\n\t.brick {\r\n\t\tbackground: #f5f5f5;\r\n\t\tbox-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);\r\n\t\tcolor: #333;\r\n\t\tborder: none;\r\n\t\tmin-height:auto !important;\r\n\t\t\ttransition: transform .65s ease;\r\n\t}\r\n\t.brick {\r\n\t\twidth: 221.2px;\r\n\t\t\r\n\t}\r\n\t.info {\r\n\t\tpadding: 15px;\r\n\t\tcolor: #333;\r\n\t}\r\n\t.brick img {\r\n\t\tmargin: 0px;\r\n\t\tpadding: 0px;\r\n\t\tdisplay: block;\r\n\t}\r\n\t\r\n\t\r\n\t.free-wall .pw_load_more_result {\r\n\t\topacity: 0;\r\n\t-webkit-transform: scale(0);\r\n\ttransform: scale(0);\r\n\r\n\t}\r\n\t.free-wall .animate {\r\n\t-webkit-transform: scale(1);\r\n\ttransform: scale(1);\r\n\ttransition: transform .8s ease;\r\n\t\r\n\t}\r\n\t.free-wall .brick[data-state=\"init\"] {\r\n\t\tdisplay: none;\r\n\t}\r\n\r\n\t.free-wall .brick[data-state=\"start\"]  {\r\n\t\tdisplay: block;\r\n\t\tanimation: start 0.5s;\r\n\t\t-webkit-animation: start 0.5s;\r\n\t}\r\n\r\n\t.free-wall .brick[data-state=\"move\"]  {\r\n\t\ttransition: transform .65s ease;\r\n\t\t-webkit-transition: transform .65s ease;\r\n\t}\r\n\t \r\n\t\r\n\t<\/style>\r\n\t<!-- begin loader -->\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\tSorry! No image gallery found :[ALW id=248]\t\r\n\t<\/div>\r\n\r\n\t<!-- progress button load more -->\r\n\t<div class=\"pw-loader-wrapper\">\r\n\t\t<!-- begin folding modal -->\r\n\t\t<div id=\"alw-loader-more\" class=\"folding\" style=\"display:none;\">\r\n\t\t\t<div class=\"sk-cube1 sk-cube\"><\/div>\r\n\t\t\t<div class=\"sk-cube2 sk-cube\"><\/div>\r\n\t\t\t<div class=\"sk-cube4 sk-cube\"><\/div>\r\n\t\t\t<div class=\"sk-cube3 sk-cube\"><\/div>\r\n\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=\"4\" class=\"btn\" \/>\r\n\t\t<input type=\"hidden\" id=\"lg_limit_end\" name=\"lg_limit_end\" value=\"8\" class=\"btn\" \/>\r\n\t\t<input type=\"hidden\" id=\"lg_total_images\" name=\"lg_total_images\" value=\"\" 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: false,\r\n\t\tcellW: 300, \/\/ function(container) {return 100;} 200 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: 15, \/\/ width spacing between blocks;\r\n\t\tgutterY: 15, \/\/ 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 a').load(function() {\r\n\t\twall.fitWidth();\r\n\t});\r\n\twall.container.find('.brick a').resize();\t\r\n\r\n\r\n\/\/ Show if Lod More On\r\n\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\tjQuery(\".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(4);\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\r\n\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\r\n\t\r\n\t\t\/\/ lightbox\r\n\tjQuery(\".pw-lightbox\").colorbox({\r\n\t\trel:'pw-lightbox',\r\n\t\ttitle: true,\r\n\t\tscalePhotos: true,\r\n\t\t\/\/maxHeight: '500px',\r\n\t\tscrolling: false,\r\n\t\tfixed: true,\r\n\t\tretinaImage: true\r\n\t});\t\r\n\tjQuery(\".youtube\").colorbox({iframe:true, innerWidth:640, innerHeight:390});\r\n\tjQuery(\".vemio\").colorbox({iframe:true, innerWidth:640, innerHeight:390});\r\n\t\r\n\t\t\r\n});\r\n\r\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>INSTAGRAM FEED MASONRY Show your Instagram feed with Masonry 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-213","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/awplife.com\/demo\/animated-live-wall-premium\/wp-json\/wp\/v2\/pages\/213","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=213"}],"version-history":[{"count":5,"href":"https:\/\/awplife.com\/demo\/animated-live-wall-premium\/wp-json\/wp\/v2\/pages\/213\/revisions"}],"predecessor-version":[{"id":261,"href":"https:\/\/awplife.com\/demo\/animated-live-wall-premium\/wp-json\/wp\/v2\/pages\/213\/revisions\/261"}],"wp:attachment":[{"href":"https:\/\/awplife.com\/demo\/animated-live-wall-premium\/wp-json\/wp\/v2\/media?parent=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}