{"id":3960,"date":"2021-07-08T09:31:54","date_gmt":"2021-07-08T09:31:54","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/?page_id=3960"},"modified":"2021-07-08T11:23:56","modified_gmt":"2021-07-08T11:23:56","slug":"gif-slider-by-layout-9","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/gif-slider-by-layout-9\/","title":{"rendered":"GIF Slider By Layout 9"},"content":{"rendered":"<div id=\"sf-9-147\">\r\n\t<div class=\"fullscreen-container-147 hidden-147\">\r\n\t <div class='fullscreen-div-147'>\r\n\t\t<img decoding=\"async\" class=\"remove-fullscreen-147\" 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-147\">\r\n\t  <div id=\"slide-147\">\r\n\t\t<div class=\"counter-147\"><\/div>\r\n\t\t<a class=\"prev-147\">&#x2039;<\/a>\r\n\t\t<a class=\"next-147\">&#x203A;<\/a>\r\n\t\t\t\t\t<img decoding=\"async\" class=\"toggleDiapo-147\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/pause_diapo.png\" width=\"40\" \/>\r\n\t\t\t\t\r\n\t\t<img decoding=\"async\" class=\"fullscreen-147\" 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-147' \/>\r\n\t  <\/div>\r\n\t  <div class=\"caption-container-147\">\r\n\t\t<span id=\"caption-147\"><\/span>\r\n\t  <\/div>\r\n\t  <div id=\"thumbnails\" style=\"text-align:center;\">\r\n\t\t<div class=\"wrapper-147\">\r\n\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-147\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/running-gif.bak_.gif\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-147\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/b513d88e25fe609dcace1c4d6763bce5.gif\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-147\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/b35b43a4691fbd284394745196b9ec34.gif\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-147\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/70367165844693.5b02a9d792fe3.gif\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-147\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/73330f5da8116f53efc1862b435e0cda.gif\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-147\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/03\/iOS-Blog.bak_.gif\" alt=\"\">\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-147 {\r\n\twidth: 100% !important;\t\r\n}\r\n\r\n#img-147 {\r\n\t\r\n}\r\n\r\n.caption-container-147 {\r\n\tbackground-color: #ef4e4e;\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-147 {\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-147::-webkit-scrollbar {\r\n\tdisplay: none;\r\n}\r\n\r\n\/* Hide scrollbar for IE and Edge *\/\r\n.wrapper-147 {\r\n\t-ms-overflow-style: none;\r\n}\r\n\r\n#slide-147 {\r\n\tposition: relative;\r\n\toverflow: hidden;\r\n}\r\n\r\n#preview-147 {\r\n\theight: 700px !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-147 {\r\n\twidth: 170px;\r\n\theight: 100px;\r\n\topacity: 0.5;\r\n\t\tdisplay: unset !important;\r\n\t}\r\n\r\n.selected-147 {\r\n\topacity: 1;\r\n}\r\n\r\n.thumbnail-147:hover {\r\n\topacity: 1;\r\n}\r\n\r\n#sf-9-gallery-147 {\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-147,\r\n.next-147 {\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-147 {\r\n\tright: 0;\r\n}\r\n\r\n.prev-147 {\r\n\tleft: 0;\r\n}\r\n\r\n.toggleDiapo-147 {\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-147 {\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-147:hover,\r\n.next-147:hover,\r\n.toggleDiapo-147:hover,\r\n.fullscreen-147:hover {\r\n\tbackground-color: rgba(0, 0, 0, 0.8);\r\n}\r\n\r\n.counter-147 {\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-147 {\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-147 {\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-147 {\r\n\tdisplay: none;\r\n}\r\n\r\n.counter-147,\r\n.fullscreen-147,\r\n.prev-147,\r\n.next-147,\r\n.toggleDiapo-147 {\r\n\tz-index: 5;\r\n}\r\n\r\n.remove-fullscreen-147 {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tcursor: pointer;\r\n}\r\n\r\n.remove-fullscreen-147:hover {\r\n\tbackground-color: rgba(0, 0, 0, 0.8);\r\n}\r\n\r\n<\/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-147\";\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-147').offset().left;\r\n\t\tvar limitRight = limitLeft + jQuery('.wrapper-147').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-147')[0].scrollLeft;\r\n\t\tif (direction == 'next')\r\n\t\t\tjQuery('.wrapper-147')[0].scrollTo(scroll_left + element_width, 0);\r\n\t\telse if (direction == 'prev')\r\n\t\t\tjQuery('.wrapper-147')[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, 4500);\r\n\t\t\r\n\t\tvar el = jQuery('.selected-147');\r\n\t\tvar counter = jQuery('.counter-147');\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-147:first').trigger('click');\r\n\t\t\tjQuery('.wrapper-147')[0].scrollTo(0, 0);\r\n\t\t\tcounter.text('1');\r\n\t\t}\r\n\t\tjQuery('.toggleDiapo-147').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, 4500);\r\n\r\n\t\tvar el = jQuery('.selected-147');\r\n\t\tvar counter = jQuery('.counter-147');\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-147:last').trigger('click');\r\n\t\t\tjQuery('.wrapper-147')[0].scrollTo(jQuery('.wrapper-147')[0].scrollWidth, 0);\r\n\t\t\tcounter.text(jQuery('.thumbnail-147:last').index() + 1);\r\n\t\t}\r\n\t\tjQuery('.toggleDiapo-147').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-147').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-147');\r\n\t\tvar index = jQuery(this).index();\r\n\t\tjQuery('.selected-147').toggleClass('selected-147');\r\n\t\tjQuery(this).toggleClass('selected-147')\r\n\t\tjQuery(\"#caption-147\").text(jQuery('.selected-147').attr('alt'));\r\n\t\tjQuery('.counter-147').text(index + 1);\r\n\t\tvar src = jQuery(this).attr('src');\r\n\t\tjQuery('#preview-147').fadeOut(400, () => {\r\n\t\t\tjQuery('#preview-147').attr('src', src);\r\n\t\t\tjQuery('#preview-147').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, 4500);\r\n\t\tvar src = jQuery('.toggleDiapo-147').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-147').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-147').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-147').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-147').attr('src');\r\n\t\tvar container = jQuery('.fullscreen-container-147');\r\n\t\tjQuery('.fullscreen-div-147').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-147:first').toggleClass('selected-147');\r\n\tjQuery('.counter-147').text('1');\r\n\tjQuery('#preview-147').attr('src', first.attr('src'));\r\n\tjQuery(\"#caption-147\").text(first.attr('alt'));\r\n\t\/\/ start auto diapo.\r\n\tvar interv;\r\n\t\tinterv = setInterval(showNextImg, 4500);\r\n\t\t\r\n\t\/\/ setup event listeners.\r\n\tjQuery('.next-147').on('click', showNextImg);\r\n\tjQuery('.prev-147').on('click', showPrevImg);\r\n\tjQuery('.thumbnail-147').on('click', previewImg);\r\n\tjQuery('.toggleDiapo-147').on('click', toggleDiapo);\r\n\tjQuery('.fullscreen-147').on('click', goFullscreen);\r\n\r\n});\r\n<\/script>\r\n\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"&#x2039; &#x203A;","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3960","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/3960","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=3960"}],"version-history":[{"count":4,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/3960\/revisions"}],"predecessor-version":[{"id":3995,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/3960\/revisions\/3995"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/media?parent=3960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}