{"id":1008,"date":"2021-01-28T07:29:52","date_gmt":"2021-01-28T07:29:52","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/?page_id=1008"},"modified":"2021-07-02T12:03:47","modified_gmt":"2021-07-02T12:03:47","slug":"top-10-buildings-in-the-world","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/top-10-buildings-in-the-world\/","title":{"rendered":"Top 10 Skylines In The World"},"content":{"rendered":"<p>[vc_row][vc_column][vc_column_text]<\/p>\n<h5 class=\"wp-block-heading\" style=\"text-align: center;\"><strong>By Layout 9<\/strong><\/h5>\n<h2>\u00a0<\/h2>\n<h2 class=\"has-text-align-center\"><div id=\"sf-9-127\">\r\n\t<div class=\"fullscreen-container-127 hidden-127\">\r\n\t <div class='fullscreen-div-127'>\r\n\t\t<img decoding=\"async\" class=\"remove-fullscreen-127\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/remove_icon.webp\" width=\"60\" \/>\r\n\t  <\/div>\r\n\t<\/div>\r\n\r\n\t<div id=\"sf-9-gallery-127\">\r\n\t  <div id=\"slide-127\">\r\n\t\t<div class=\"counter-127\"><\/div>\r\n\t\t<a class=\"prev-127\">&#x2039;<\/a>\r\n\t\t<a class=\"next-127\">&#x203A;<\/a>\r\n\t\t\t\t\t\t\t<img decoding=\"async\" class=\"toggleDiapo-127\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/play_diapo.png\" width=\"40\" \/>\r\n\t\t\r\n\t\t<img decoding=\"async\" class=\"fullscreen-127\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/fullscreen.png\" width=\"40\" \/>\r\n\t\t<img id='preview-127' \/>\r\n\t  <\/div>\r\n\t  <div class=\"caption-container-127\">\r\n\t\t<span id=\"caption-127\"><\/span>\r\n\t  <\/div>\r\n\t  <div id=\"thumbnails\" style=\"text-align:center;\">\r\n\t\t<div class=\"wrapper-127\">\r\n\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-127\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/Burj-Khalifa-High-Definition-Wallpaper-98727.jpg\" alt=\"1. Burj Khalifa \u2013 2,717 feet\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-127\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/Shanghai-Tower.jpeg\" alt=\"2. Shanghai Tower \u2013 2,073 feet\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-127\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/Abraj-Al-Bait-Royal-Clock-Tower-Mecca-in-Mecca-Saudi-Arabia-by-kiraziku2u-Shutterstock.com_.jpg\" alt=\"3. Abraj Al Bait \u2013 1,972 feet\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-127\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/shenzhen-ping-an-finance-center-dusk.jpg\" alt=\"4. Ping An Finance Center \u2013 1,965 feet\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-127\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/lotte-world-tower.jpeg\" alt=\"5. Lotte World Tower \u2013 1,819 feet\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-127\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/1WTC_Credit-Michael-Mahesh-PANYNJ.jpg\" alt=\"6. One World Trade Center \u2013 1,776 feet\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-127\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/Guangzhou-China-East-Tower-TALLBUILDS0516.jpg\" alt=\"7. Guangzhou CTF Finance Centre \u2013 1,739 feet\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-127\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/Tianjin_CTF_Finance_Center.jpg\" alt=\"8. Tianjin CTF Finance Centre \u2013 1,739 feet\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-127\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/beijing-china-zun-tower.jpg\" alt=\"9. China Zun \u2013 1,731 feet\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-127\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/1200px-Taipei_Taiwan_CBD_Skyline.jpg\" alt=\"10. Taipei 101 \u2013 1,671 feet\">\r\n\t\t\t\t\t\t<\/div>\r\n\t  <\/div>\r\n\t  \r\n\t<\/div>\r\n<\/div>\r\n\r\n<style>\r\n#sf-9-127 {\r\n\twidth: 100% !important;\t\r\n}\r\n\r\n#img-127 {\r\n\t\r\n}\r\n\r\n.caption-container-127 {\r\n\tbackground-color: #24457a;\r\n\ttext-align: center;\r\n\tpadding: 6px 8px;\r\n\tcolor : #ffffff;\r\n\twidth: 100% !important;\r\n}\r\n\r\n#thumbnails {\r\n\twhite-space: nowrap;\r\n\theight: 20%;\r\n\twidth: 100%;\r\n\r\n}\r\n\r\n.wrapper-127 {\r\n\tposition: relative;\r\n\toverflow: scroll;\r\n\tscroll-behavior: smooth;\r\n\twidth: 100% !important;\r\n}\r\n\r\n.wrapper-127::-webkit-scrollbar {\r\n\tdisplay: none;\r\n}\r\n\r\n\/* Hide scrollbar for IE and Edge *\/\r\n.wrapper-127 {\r\n\t-ms-overflow-style: none;\r\n}\r\n\r\n#slide-127 {\r\n\tposition: relative;\r\n\toverflow: hidden;\r\n}\r\n\r\n#preview-127 {\r\n\theight: 800px !important;\r\n\twidth: 100% !important;\r\n   object-fit: fill; \/*Object-fit properties are cover, contain, fit ,scale-down and none. *\/\r\n}\r\n\r\n.thumbnail-127 {\r\n\twidth: 170px;\r\n\theight: 100px;\r\n\topacity: 0.5;\r\n\t\tdisplay: none !important;\r\n\t}\r\n\r\n.selected-127 {\r\n\topacity: 1;\r\n}\r\n\r\n.thumbnail-127:hover {\r\n\topacity: 1;\r\n}\r\n\r\n#sf-9-gallery-127 {\r\n\twidth: 100%;\r\n\tmargin: auto;\r\n\tpadding: auto;\r\n}\r\n\r\n\/* .caption-container {\r\n\tbackground-color :#252525;\r\n\ttext-align: center;\r\n\tpadding: 6px 8px;\r\n\tcolor : red;\r\n} OLD CONTAINER CSS *\/\r\n\r\n.prev-127,\r\n.next-127 {\r\n\tcursor: pointer;\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\twidth: auto;\r\n\tpadding: 16px;\r\n\tmargin-top: -50px;\r\n\tcolor: white !important;\r\n\tfont-weight: bold;\r\n\tfont-size: 100px;\r\n\tborder-radius: 0 3px 3px 0;\r\n\tuser-select: none !important;\r\n\t-webkit-user-select: none !important;\r\n}\r\n\r\n.next-127 {\r\n\tright: 0;\r\n}\r\n\r\n.prev-127 {\r\n\tleft: 0;\r\n}\r\n\r\n.toggleDiapo-127 {\r\n\tposition: absolute;\r\n\tbottom: 0;\r\n\tleft: 50%;\r\n\tmargin-left: -30px;\r\n\tfont-size: 30px;\r\n\tcolor: goldenrod;\r\n\tfont-weight: bold;\r\n\tcursor: pointer;\r\n\tpadding: 5px;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\r\n}\r\n\r\n.fullscreen-127 {\r\n\tposition: absolute;\r\n\ttop: 10px;\r\n\tright: 10px;\r\n\tcursor: pointer;\r\n\tuser-select: none;\r\n}\r\n\r\n.prev-127:hover,\r\n.next-127:hover,\r\n.toggleDiapo-127:hover,\r\n.fullscreen-127:hover {\r\n\tbackground-color: rgba(0, 0, 0, 0.8);\r\n}\r\n\r\n.counter-127 {\r\n\tposition: absolute;\r\n\tborder-radius: 50%;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\ttop: 1.4%;\r\n\tleft: 0.9%;\r\n\tbackground-color: rgba(0, 0, 0, 0.8);\r\n\tborder: 2px solid rgb(212, 207, 207);\r\n\tcolor: white;\r\n\tfont: 1.5em Arial, sans-serif;\r\n}\r\n\r\n.fullscreen-container-127 {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\tbottom: 0;\r\n\tright: 0;\r\n\tz-index: 10 ;\r\n\tbackground-color: rgba(0, 0, 0, 0.9) ;\r\n\tdisplay: block ;\r\n}\r\n\r\n.fullscreen-div-127 {\r\n\twidth: 100% !important; \r\n\theight: 100% !important;\r\n\tdisplay: block ;\r\n\tmargin: auto;\r\n\tposition: relative;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tbox-sizing: content-box;\r\n}\r\n\r\n.hidden-127 {\r\n\tdisplay: none;\r\n}\r\n\r\n.counter-127,\r\n.fullscreen-127,\r\n.prev-127,\r\n.next-127,\r\n.toggleDiapo-127 {\r\n\tz-index: 5;\r\n}\r\n\r\n.remove-fullscreen-127 {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tcursor: pointer;\r\n}\r\n\r\n.remove-fullscreen-127:hover {\r\n\tbackground-color: rgba(0, 0, 0, 0.8);\r\n}\r\n\r\ndiv.caption-container-127 { background-color: #000000 !important; background-image: linear-gradient(147deg, #000000 0%, #04619f 74%); border-radius: 0px 0px 54px 0px; } a.prev-127, a.next-127 { color: #022e57 !important; } div.counter-127 { background-color: #022e57 !important; } #slide-127 { border-radius: 54px 0px 0px 0px; }<\/style>\r\n<script>\r\nwindow.myNameSpace = window.myNameSpace || {};\r\n\r\njQuery(function () {\r\n\r\n\t\/\/ load images\r\n\tjQuery.fn.addImage = function (filename, description) {\r\n\t\tvar img = document.createElement('img');\r\n\t\timg.src = \"images\/\" + filename;\r\n\t\timg.alt = description;\r\n\t\timg.className = \"thumbnail-127\";\r\n\t\tjQuery(this).append(img);\r\n\t}\r\n\r\n\t\/\/ check if element is hidden after scrollbar\r\n\tjQuery.fn.overflown = function () {\r\n\t\tvar limitLeft = jQuery('.wrapper-127').offset().left;\r\n\t\tvar limitRight = limitLeft + jQuery('.wrapper-127').width();\r\n\t\tvar elemOffsetLeft = jQuery(this[0]).offset().left;\r\n\t\tvar elemOffsetRight = elemOffsetLeft + jQuery(this[0]).width() \/ 2;\r\n\t\treturn (elemOffsetRight > limitRight || elemOffsetLeft < limitLeft) ? true : false;\r\n\t}\r\n\r\n\t\/\/ scroll to the end of element\r\n\tfunction scrollToElement(el, direction) {\r\n\t\telement_width = el.width();\r\n\t\tscroll_left = jQuery('.wrapper-127')[0].scrollLeft;\r\n\t\tif (direction == 'next')\r\n\t\t\tjQuery('.wrapper-127')[0].scrollTo(scroll_left + element_width, 0);\r\n\t\telse if (direction == 'prev')\r\n\t\t\tjQuery('.wrapper-127')[0].scrollTo(scroll_left - element_width, 0);\r\n\t}\r\n\r\n\tfunction showNextImg() {\r\n\t\tclearInterval(interv);\r\n\t\t\r\n\t\tinterv = setInterval(showNextImg, 5000);\r\n\t\t\r\n\t\tvar el = jQuery('.selected-127');\r\n\t\tvar counter = jQuery('.counter-127');\r\n\t\tif (el.next().length != 0) {\r\n\t\t\tcounter.text(el.index() + 1);\r\n\t\t\tif (el.next().overflown())\r\n\t\t\t\tscrollToElement(el, 'next');\r\n\t\t\t\/\/el.fadeOut(200, () => {\r\n\t\t\t\tel.next().trigger('click');\r\n\t\t\t\tel.show();\r\n\t\t\t\/\/});\r\n\t\t}\r\n\t\telse {\r\n\t\t\tjQuery('.thumbnail-127:first').trigger('click');\r\n\t\t\tjQuery('.wrapper-127')[0].scrollTo(0, 0);\r\n\t\t\tcounter.text('1');\r\n\t\t}\r\n\t\tjQuery('.toggleDiapo-127').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/pause_diapo.png');\r\n\t}\r\n\r\n\tfunction showPrevImg() {\r\n\t\tclearInterval(interv);\r\n\r\n\t\tinterv = setInterval(showNextImg, 5000);\r\n\r\n\t\tvar el = jQuery('.selected-127');\r\n\t\tvar counter = jQuery('.counter-127');\r\n\t\tif (el.prev().length != 0) {\r\n\t\t\tcounter.text(el.index() + 1);\r\n\t\t\tif (el.prev().overflown())\r\n\t\t\t\tscrollToElement(el, 'prev');\r\n\t\t\tel.prev().trigger('click');\r\n\t\t}\r\n\t\telse {\r\n\t\t\tjQuery('.thumbnail-127:last').trigger('click');\r\n\t\t\tjQuery('.wrapper-127')[0].scrollTo(jQuery('.wrapper-127')[0].scrollWidth, 0);\r\n\t\t\tcounter.text(jQuery('.thumbnail-127:last').index() + 1);\r\n\t\t}\r\n\t\tjQuery('.toggleDiapo-127').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/pause_diapo.png' );\r\n\t}\r\n\r\n\tfunction previewImg(e) {\r\n\t\tif (e.originalEvent !== undefined) {\r\n\t\t\tjQuery('.toggleDiapo-127').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/play_diapo.png');\r\n\t\t\tinterv = clearInterval(interv);\r\n\t\t}\r\n\t\tvar wrapper = jQuery('.wrapper-127');\r\n\t\tvar index = jQuery(this).index();\r\n\t\tjQuery('.selected-127').toggleClass('selected-127');\r\n\t\tjQuery(this).toggleClass('selected-127')\r\n\t\tjQuery(\"#caption-127\").text(jQuery('.selected-127').attr('alt'));\r\n\t\tjQuery('.counter-127').text(index + 1);\r\n\t\tvar src = jQuery(this).attr('src');\r\n\t\tjQuery('#preview-127').fadeOut(400, () => {\r\n\t\t\tjQuery('#preview-127').attr('src', src);\r\n\t\t\tjQuery('#preview-127').fadeIn(400);\r\n\t\t});\r\n\t}\r\n\r\n\tfunction toggleDiapo() {\r\n\t\tinterv = (interv != null) ? clearInterval(interv) : setInterval(showNextImg, 5000);\r\n\t\tvar src = jQuery('.toggleDiapo-127').attr('src');\r\n\t\tif (src == \"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/play_diapo.png\")\r\n\t\t\tjQuery('.toggleDiapo-127').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/pause_diapo.png' );\r\n\t\telse\r\n\t\t\tjQuery('.toggleDiapo-127').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/play_diapo.png');\r\n\t}\r\n\r\n\tfunction goFullscreen() {\r\n\t\tjQuery('.toggleDiapo-127').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/remove_icon.webp' );\r\n\t\tinterv = clearInterval(interv);\r\n\r\n\t\tvar selected = jQuery('.selected-127').attr('src');\r\n\t\tvar container = jQuery('.fullscreen-container-127');\r\n\t\tjQuery('.fullscreen-div-127').css({\r\n\t\t\t'background-image': 'url(' + selected + ')',\r\n\t\t\t'background-size': 'contain',\r\n\t\t\t'background-repeat': 'no-repeat',\r\n\t\t\t'background-position': 'center'\r\n\t\t});\r\n\t\tcontainer.fadeIn('slow');\r\n\t\tcontainer.on('click', function () {\r\n\t\t\tjQuery(this).fadeOut('slow');\r\n\t\t});\r\n\t}\r\n\r\n\t\/\/ show first image.\r\n\tvar first = jQuery('.thumbnail-127:first').toggleClass('selected-127');\r\n\tjQuery('.counter-127').text('1');\r\n\tjQuery('#preview-127').attr('src', first.attr('src'));\r\n\tjQuery(\"#caption-127\").text(first.attr('alt'));\r\n\t\/\/ start auto diapo.\r\n\tvar interv;\r\n\t\t\tinterv = null;\r\n\t\r\n\t\/\/ setup event listeners.\r\n\tjQuery('.next-127').on('click', showNextImg);\r\n\tjQuery('.prev-127').on('click', showPrevImg);\r\n\tjQuery('.thumbnail-127').on('click', previewImg);\r\n\tjQuery('.toggleDiapo-127').on('click', toggleDiapo);\r\n\tjQuery('.fullscreen-127').on('click', goFullscreen);\r\n\r\n});\r\n<\/script>\r\n<\/h2>\n<p>\u00a0<\/p>\n<p><span style=\"color: #000000;\"><strong>Settings Used :<\/strong> Width \u2013 100%, Height \u2013 800px,\u00a0 Auto Play on Load \u2013 ON, Auto Play Speed \u2013 5000ms, Fade Speed \u2013 4000ms, Caption Background Color &#8211; #24457a, Caption Text Color -#fff, Show Thumbnails- OFF, Thumbnail Width -170px, Thumbnail height- 100px\u00a0 with custom CSS<\/span><\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text] By Layout 9 \u00a0 \u00a0 Settings Used : Width \u2013 100%, Height \u2013 800px,\u00a0 Auto Play on Load \u2013 ON, Auto Play Speed \u2013 5000ms, Fade Speed \u2013 4000ms, Caption Background Color &#8211; #24457a, Caption Text Color -#fff, Show Thumbnails- OFF, Thumbnail Width -170px, Thumbnail height- 100px\u00a0 with custom CSS [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":40,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1008","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/1008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/comments?post=1008"}],"version-history":[{"count":9,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/1008\/revisions"}],"predecessor-version":[{"id":3785,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/1008\/revisions\/3785"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/media?parent=1008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}