{"id":148,"date":"2014-11-09T10:25:16","date_gmt":"2014-11-09T10:25:16","guid":{"rendered":"http:\/\/topdevs.net\/before-after-viewer\/?page_id=148"},"modified":"2016-10-14T12:02:56","modified_gmt":"2016-10-14T12:02:56","slug":"2-2","status":"publish","type":"page","link":"https:\/\/topdevs.net\/before-after-viewer\/","title":{"rendered":"Before After 2"},"content":{"rendered":"<h2>Easy Before After WordPress\u00a0Images<\/h2>\n<p>This easy Before After WordPress visual <a title=\"Wikipedia\" href=\"http:\/\/en.wikipedia.org\/wiki\/Diff\">diff<\/a> tool is perfect to showcase your work, where it&#8217;s essential to visualize the difference between two images. Create unlimited instances on a single page. All you need is simply wrap any two images with [ before-after ] shortcode opening and closing tags inside WordPress editor. It&#8217;s that easy! The rest is taken care of &#8211; fully responsive, that means that it will look great on all devices, tablet, desktop and even mobile. Highly customizable, you pick the colors, label text and position, handle offset\u00a0and orientation, handle move on drag or hover. Everything you could wish for to match the\u00a0awesome design of your website.<\/p>\n<p>&nbsp;<\/p>\n<div class=\"column-grid column-grid-12\"><div class=\"column column-span-4 column-push-0 column-first\"><\/p>\n<h2>Features<\/h2>\n<ul>\n<li>Fully Responsive<\/li>\n<li>Touch &amp; Mobile Friendly<\/li>\n<li>Extremely Easy to Use<\/li>\n<li>Shortcode Generator<\/li>\n<li>Highly Customizable<\/li>\n<li>Custom Labels and Colors<\/li>\n<li>Built-in Colorpicker<\/li>\n<li>Drag or Hover Interaction<\/li>\n<li>Horizontal and Vertical Orientations<\/li>\n<li>Multiple Instances On One Page<\/li>\n<li>Detailed Documentation<\/li>\n<li>Polite Support<\/li>\n<li>Template Tag<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><a class=\"button buy-it\" title=\"\" href=\"http:\/\/codecanyon.net\/item\/smart-before-after-viewer\/7672815?ref=topdevs\"><i class=\"icon-shopping-cart icon-large\"><\/i> Get on CodeCanyon &#8211; $17<\/a><\/p>\n<p>\n<\/div>\n<div class=\"column column-span-8 column-push-0 column-last\"><\/p>\n<div id=\"twentytwenty-VX0Wix\" class=\"sbav-container twentytwenty-hover \"><div class=\"twentytwenty-container\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-106 size-full\" src=\"http:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-plugin-112.jpg\" alt=\"Before After WordPress Gallery\" width=\"907\" height=\"557\" srcset=\"https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-plugin-112.jpg 907w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-plugin-112-300x184.jpg 300w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-plugin-112-100x61.jpg 100w\" sizes=\"auto, (max-width: 907px) 100vw, 907px\" \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-107 size-full\" src=\"http:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-plugin-221.jpg\" alt=\"Comparison\" width=\"907\" height=\"557\" srcset=\"https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-plugin-221.jpg 907w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-plugin-221-300x184.jpg 300w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-plugin-221-100x61.jpg 100w\" sizes=\"auto, (max-width: 907px) 100vw, 907px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><\/div><\/div>\t\t<script type=\"text\/javascript\">\n\t\t\tjQuery(window).load(function(){\n\t\t\t\tjQuery(\"#twentytwenty-VX0Wix .twentytwenty-container\").twentytwenty({\n\t\t\t\t\tdefault_offset_pct: 0.5, \n\t\t\t\t\torientation: 'horizontal',\n\t\t\t\t\tmove_on_hover: false,\n\t\t\t\t\tis_wiggle: true,\n\t\t\t\t\twiggle_timeout: 1000\t\t\t\t});\n\t\t\t});\n\t\t<\/script>\n\t\t\t\t<style>\n\t\t\t#twentytwenty-VX0Wix {\n\t\t\t\twidth: 100%;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t\t#twentytwenty-VX0Wix.twentytwenty-hover .twentytwenty-overlay:hover {\n\t\t\t    background: rgba(0,0,0, 0.5);\n\t\t\t}\n\t\t\t#twentytwenty-VX0Wix .twentytwenty-before-label:before, \n\t\t\t#twentytwenty-VX0Wix .twentytwenty-after-label:before {\n\t\t\t\tbackground: rgba(255,255,255, 0.3);\n\t\t\t}\n\t\t\t#twentytwenty-VX0Wix .twentytwenty-before-label:before {\n\t\t\t\tcontent: \"Before\"; \n\t\t\t}\n\t\t\t#twentytwenty-VX0Wix .twentytwenty-after-label:before {\n\t\t\t\tcontent: \"After\";\n\t\t\t}\n\t\t\t#twentytwenty-VX0Wix .twentytwenty-horizontal .twentytwenty-handle:before, \n\t\t\t#twentytwenty-VX0Wix .twentytwenty-horizontal .twentytwenty-handle:after, \n\t\t\t#twentytwenty-VX0Wix .twentytwenty-vertical .twentytwenty-handle:before, \n\t\t\t#twentytwenty-VX0Wix .twentytwenty-vertical .twentytwenty-handle:after {\n\t\t\t\tbackground: #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-VX0Wix .twentytwenty-before-label:before, \n\t\t\t#twentytwenty-VX0Wix .twentytwenty-after-label:before {\n\t\t\t\tcolor: #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-VX0Wix .twentytwenty-handle {\n\t\t\t\tborder: 3px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-VX0Wix .twentytwenty-horizontal .twentytwenty-handle:before {\n\t\t\t\t-webkit-box-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-VX0Wix .twentytwenty-horizontal .twentytwenty-handle:after {\n\t\t\t\t-webkit-box-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-VX0Wix .twentytwenty-vertical .twentytwenty-handle:before {\n\t\t\t\t-webkit-box-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t}\n\t\t\t#twentytwenty-VX0Wix .twentytwenty-vertical .twentytwenty-handle:after {\n\t\t\t\t-webkit-box-shadow: -3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: -3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: -3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-VX0Wix .twentytwenty-left-arrow {\n\t\t\t\tborder-right: 6px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-VX0Wix .twentytwenty-right-arrow {\n\t\t\t\tborder-left: 6px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-VX0Wix .twentytwenty-up-arrow {\n\t\t\t\tborder-bottom: 6px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-VX0Wix .twentytwenty-down-arrow {\n\t\t\t\tborder-top: 6px solid #ffffff;\n\t\t\t}\n\t\t\t<\/style>\n\t\t\n<p>\n<\/div><\/div>\n<p>&nbsp;<\/p>\n<div class=\"column-grid column-grid-12\"><div class=\"column column-span-6 column-push-0 column-first\"><\/p>\n<h2>Custom Labels Texts<\/h2>\n<p>Add\u00a0your own label texts like &#8220;Winter&#8221; &#8211; &#8220;Summer&#8221; or &#8220;New&#8221; &#8211; &#8220;Old&#8221; on overlay to describe changes between two images.<\/p>\n<div id=\"twentytwenty-UAXgkK\" class=\"sbav-container twentytwenty-hover \"><div class=\"twentytwenty-container\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-99 size-full\" src=\"http:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-image-viewer-2.jpg\" alt=\"Before After WordPress Plugin\" width=\"848\" height=\"503\" srcset=\"https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-image-viewer-2.jpg 848w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-image-viewer-2-300x177.jpg 300w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-image-viewer-2-100x59.jpg 100w\" sizes=\"auto, (max-width: 848px) 100vw, 848px\" \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-100 size-full\" src=\"http:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-image-viewer-1.jpg\" alt=\"Comparison image\" width=\"848\" height=\"503\" srcset=\"https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-image-viewer-1.jpg 848w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-image-viewer-1-300x177.jpg 300w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-image-viewer-1-100x59.jpg 100w\" sizes=\"auto, (max-width: 848px) 100vw, 848px\" \/><\/p>\n<p><\/div><\/div>\t\t<script type=\"text\/javascript\">\n\t\t\tjQuery(window).load(function(){\n\t\t\t\tjQuery(\"#twentytwenty-UAXgkK .twentytwenty-container\").twentytwenty({\n\t\t\t\t\tdefault_offset_pct: 0.5, \n\t\t\t\t\torientation: 'horizontal',\n\t\t\t\t\tmove_on_hover: false,\n\t\t\t\t\tis_wiggle: false,\n\t\t\t\t\twiggle_timeout: 1000\t\t\t\t});\n\t\t\t});\n\t\t<\/script>\n\t\t\t\t<style>\n\t\t\t#twentytwenty-UAXgkK {\n\t\t\t\twidth: 100%;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t\t#twentytwenty-UAXgkK.twentytwenty-hover .twentytwenty-overlay:hover {\n\t\t\t    background: rgba(0,0,0, 0.5);\n\t\t\t}\n\t\t\t#twentytwenty-UAXgkK .twentytwenty-before-label:before, \n\t\t\t#twentytwenty-UAXgkK .twentytwenty-after-label:before {\n\t\t\t\tbackground: rgba(255,255,255, 0.3);\n\t\t\t}\n\t\t\t#twentytwenty-UAXgkK .twentytwenty-before-label:before {\n\t\t\t\tcontent: \"1963\"; \n\t\t\t}\n\t\t\t#twentytwenty-UAXgkK .twentytwenty-after-label:before {\n\t\t\t\tcontent: \"2014\";\n\t\t\t}\n\t\t\t#twentytwenty-UAXgkK .twentytwenty-horizontal .twentytwenty-handle:before, \n\t\t\t#twentytwenty-UAXgkK .twentytwenty-horizontal .twentytwenty-handle:after, \n\t\t\t#twentytwenty-UAXgkK .twentytwenty-vertical .twentytwenty-handle:before, \n\t\t\t#twentytwenty-UAXgkK .twentytwenty-vertical .twentytwenty-handle:after {\n\t\t\t\tbackground: #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-UAXgkK .twentytwenty-before-label:before, \n\t\t\t#twentytwenty-UAXgkK .twentytwenty-after-label:before {\n\t\t\t\tcolor: #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-UAXgkK .twentytwenty-handle {\n\t\t\t\tborder: 3px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-UAXgkK .twentytwenty-horizontal .twentytwenty-handle:before {\n\t\t\t\t-webkit-box-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-UAXgkK .twentytwenty-horizontal .twentytwenty-handle:after {\n\t\t\t\t-webkit-box-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-UAXgkK .twentytwenty-vertical .twentytwenty-handle:before {\n\t\t\t\t-webkit-box-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t}\n\t\t\t#twentytwenty-UAXgkK .twentytwenty-vertical .twentytwenty-handle:after {\n\t\t\t\t-webkit-box-shadow: -3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: -3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: -3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-UAXgkK .twentytwenty-left-arrow {\n\t\t\t\tborder-right: 6px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-UAXgkK .twentytwenty-right-arrow {\n\t\t\t\tborder-left: 6px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-UAXgkK .twentytwenty-up-arrow {\n\t\t\t\tborder-bottom: 6px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-UAXgkK .twentytwenty-down-arrow {\n\t\t\t\tborder-top: 6px solid #ffffff;\n\t\t\t}\n\t\t\t<\/style>\n\t\t\n<p>\n<\/div>\n<div class=\"column column-span-6 column-push-0 column-last\"><\/p>\n<h2>Custom Colors and Positions<\/h2>\n<p>Choose labels position, handle and label colors using built-in colorpicker in the shortcode generator.<\/p>\n<div id=\"twentytwenty-gCN0Es\" class=\"sbav-container twentytwenty-hover twentytwenty-labels-two \"><div class=\"twentytwenty-container\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-100 size-full\" src=\"http:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-image-viewer-1.jpg\" alt=\"WordPress Before After Plugin\" width=\"848\" height=\"503\" srcset=\"https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-image-viewer-1.jpg 848w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-image-viewer-1-300x177.jpg 300w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-image-viewer-1-100x59.jpg 100w\" sizes=\"auto, (max-width: 848px) 100vw, 848px\" \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-99 size-full\" src=\"http:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-image-viewer-2.jpg\" alt=\"Comparison image 2\" width=\"848\" height=\"503\" srcset=\"https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-image-viewer-2.jpg 848w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-image-viewer-2-300x177.jpg 300w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-wordpress-image-viewer-2-100x59.jpg 100w\" sizes=\"auto, (max-width: 848px) 100vw, 848px\" \/><\/p>\n<p><\/div><\/div>\t\t<script type=\"text\/javascript\">\n\t\t\tjQuery(window).load(function(){\n\t\t\t\tjQuery(\"#twentytwenty-gCN0Es .twentytwenty-container\").twentytwenty({\n\t\t\t\t\tdefault_offset_pct: 0.5, \n\t\t\t\t\torientation: 'horizontal',\n\t\t\t\t\tmove_on_hover: false,\n\t\t\t\t\tis_wiggle: false,\n\t\t\t\t\twiggle_timeout: 1000\t\t\t\t});\n\t\t\t});\n\t\t<\/script>\n\t\t\t\t<style>\n\t\t\t#twentytwenty-gCN0Es {\n\t\t\t\twidth: 100%;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t\t#twentytwenty-gCN0Es.twentytwenty-hover .twentytwenty-overlay:hover {\n\t\t\t    background: rgba(0,0,0, 0.5);\n\t\t\t}\n\t\t\t#twentytwenty-gCN0Es .twentytwenty-before-label:before, \n\t\t\t#twentytwenty-gCN0Es .twentytwenty-after-label:before {\n\t\t\t\tbackground: rgba(41,128,185, 0.3);\n\t\t\t}\n\t\t\t#twentytwenty-gCN0Es .twentytwenty-before-label:before {\n\t\t\t\tcontent: \"2014\"; \n\t\t\t}\n\t\t\t#twentytwenty-gCN0Es .twentytwenty-after-label:before {\n\t\t\t\tcontent: \"1963\";\n\t\t\t}\n\t\t\t#twentytwenty-gCN0Es .twentytwenty-horizontal .twentytwenty-handle:before, \n\t\t\t#twentytwenty-gCN0Es .twentytwenty-horizontal .twentytwenty-handle:after, \n\t\t\t#twentytwenty-gCN0Es .twentytwenty-vertical .twentytwenty-handle:before, \n\t\t\t#twentytwenty-gCN0Es .twentytwenty-vertical .twentytwenty-handle:after {\n\t\t\t\tbackground: #ffea00;\n\t\t\t}\n\t\t\t#twentytwenty-gCN0Es .twentytwenty-before-label:before, \n\t\t\t#twentytwenty-gCN0Es .twentytwenty-after-label:before {\n\t\t\t\tcolor: #ffea00;\n\t\t\t}\n\t\t\t#twentytwenty-gCN0Es .twentytwenty-handle {\n\t\t\t\tborder: 3px solid #ffea00;\n\t\t\t}\n\t\t\t#twentytwenty-gCN0Es .twentytwenty-horizontal .twentytwenty-handle:before {\n\t\t\t\t-webkit-box-shadow: 0 3px 0 #ffea00, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 0 3px 0 #ffea00, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 0 3px 0 #ffea00, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-gCN0Es .twentytwenty-horizontal .twentytwenty-handle:after {\n\t\t\t\t-webkit-box-shadow: 0 -3px 0 #ffea00, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 0 -3px 0 #ffea00, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 0 -3px 0 #ffea00, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-gCN0Es .twentytwenty-vertical .twentytwenty-handle:before {\n\t\t\t\t-webkit-box-shadow: 3px 0 0 #ffea00, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 3px 0 0 #ffea00, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 3px 0 0 #ffea00, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t}\n\t\t\t#twentytwenty-gCN0Es .twentytwenty-vertical .twentytwenty-handle:after {\n\t\t\t\t-webkit-box-shadow: -3px 0 0 #ffea00, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: -3px 0 0 #ffea00, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: -3px 0 0 #ffea00, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-gCN0Es .twentytwenty-left-arrow {\n\t\t\t\tborder-right: 6px solid #ffea00;\n\t\t\t}\n\t\t\t#twentytwenty-gCN0Es .twentytwenty-right-arrow {\n\t\t\t\tborder-left: 6px solid #ffea00;\n\t\t\t}\n\t\t\t#twentytwenty-gCN0Es .twentytwenty-up-arrow {\n\t\t\t\tborder-bottom: 6px solid #ffea00;\n\t\t\t}\n\t\t\t#twentytwenty-gCN0Es .twentytwenty-down-arrow {\n\t\t\t\tborder-top: 6px solid #ffea00;\n\t\t\t}\n\t\t\t<\/style>\n\t\t\n<p>\n<\/div><\/div>\n<p>&nbsp;<\/p>\n<div class=\"column-grid column-grid-12\"><div class=\"column column-span-4 column-push-0 column-first\"><\/p>\n<h2>Custom Offset<\/h2>\n<p>Choose how much of the &#8216;before&#8217; image is visible\u00a0once the page is loaded.<\/p>\n<div id=\"twentytwenty-EhiLyY\" class=\"sbav-container twentytwenty-hover \"><div class=\"twentytwenty-container\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-63 size-full\" src=\"http:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-1.jpg\" alt=\"WP before after gallery samlpe\" width=\"442\" height=\"710\" srcset=\"https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-1.jpg 442w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-1-186x300.jpg 186w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-1-62x100.jpg 62w\" sizes=\"auto, (max-width: 442px) 100vw, 442px\" \/> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-64 size-full\" src=\"http:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-2.jpg\" alt=\"before after WP sample\" width=\"442\" height=\"710\" srcset=\"https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-2.jpg 442w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-2-186x300.jpg 186w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-2-62x100.jpg 62w\" sizes=\"auto, (max-width: 442px) 100vw, 442px\" \/><\/p>\n<p><\/div><\/div>\t\t<script type=\"text\/javascript\">\n\t\t\tjQuery(window).load(function(){\n\t\t\t\tjQuery(\"#twentytwenty-EhiLyY .twentytwenty-container\").twentytwenty({\n\t\t\t\t\tdefault_offset_pct: 0.7, \n\t\t\t\t\torientation: 'vertical',\n\t\t\t\t\tmove_on_hover: false,\n\t\t\t\t\tis_wiggle: false,\n\t\t\t\t\twiggle_timeout: 1000\t\t\t\t});\n\t\t\t});\n\t\t<\/script>\n\t\t\t\t<style>\n\t\t\t#twentytwenty-EhiLyY {\n\t\t\t\twidth: 100%;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t\t#twentytwenty-EhiLyY.twentytwenty-hover .twentytwenty-overlay:hover {\n\t\t\t    background: rgba(0,0,0, 0.5);\n\t\t\t}\n\t\t\t#twentytwenty-EhiLyY .twentytwenty-before-label:before, \n\t\t\t#twentytwenty-EhiLyY .twentytwenty-after-label:before {\n\t\t\t\tbackground: rgba(255,255,255, 0.3);\n\t\t\t}\n\t\t\t#twentytwenty-EhiLyY .twentytwenty-before-label:before {\n\t\t\t\tcontent: \"Before\"; \n\t\t\t}\n\t\t\t#twentytwenty-EhiLyY .twentytwenty-after-label:before {\n\t\t\t\tcontent: \"After\";\n\t\t\t}\n\t\t\t#twentytwenty-EhiLyY .twentytwenty-horizontal .twentytwenty-handle:before, \n\t\t\t#twentytwenty-EhiLyY .twentytwenty-horizontal .twentytwenty-handle:after, \n\t\t\t#twentytwenty-EhiLyY .twentytwenty-vertical .twentytwenty-handle:before, \n\t\t\t#twentytwenty-EhiLyY .twentytwenty-vertical .twentytwenty-handle:after {\n\t\t\t\tbackground: #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-EhiLyY .twentytwenty-before-label:before, \n\t\t\t#twentytwenty-EhiLyY .twentytwenty-after-label:before {\n\t\t\t\tcolor: #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-EhiLyY .twentytwenty-handle {\n\t\t\t\tborder: 3px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-EhiLyY .twentytwenty-horizontal .twentytwenty-handle:before {\n\t\t\t\t-webkit-box-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-EhiLyY .twentytwenty-horizontal .twentytwenty-handle:after {\n\t\t\t\t-webkit-box-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-EhiLyY .twentytwenty-vertical .twentytwenty-handle:before {\n\t\t\t\t-webkit-box-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t}\n\t\t\t#twentytwenty-EhiLyY .twentytwenty-vertical .twentytwenty-handle:after {\n\t\t\t\t-webkit-box-shadow: -3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: -3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: -3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-EhiLyY .twentytwenty-left-arrow {\n\t\t\t\tborder-right: 6px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-EhiLyY .twentytwenty-right-arrow {\n\t\t\t\tborder-left: 6px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-EhiLyY .twentytwenty-up-arrow {\n\t\t\t\tborder-bottom: 6px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-EhiLyY .twentytwenty-down-arrow {\n\t\t\t\tborder-top: 6px solid #ffffff;\n\t\t\t}\n\t\t\t<\/style>\n\t\t\n<p>\n<\/div>\n<div class=\"column column-span-4 column-push-0\"><\/p>\n<h2>Vertical Orientation<\/h2>\n<p>Change handle orientation for portrait-oriented images.<\/p>\n<div id=\"twentytwenty-6n0xdw\" class=\"sbav-container twentytwenty-hover \"><div class=\"twentytwenty-container\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-63 size-full\" src=\"http:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-1.jpg\" alt=\"before-after-image-wordpress-plugin-1\" width=\"442\" height=\"710\" srcset=\"https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-1.jpg 442w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-1-186x300.jpg 186w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-1-62x100.jpg 62w\" sizes=\"auto, (max-width: 442px) 100vw, 442px\" \/> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-64 size-full\" src=\"http:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-2.jpg\" alt=\"before-after-image-wordpress-plugin-2\" width=\"442\" height=\"710\" srcset=\"https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-2.jpg 442w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-2-186x300.jpg 186w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-2-62x100.jpg 62w\" sizes=\"auto, (max-width: 442px) 100vw, 442px\" \/><\/p>\n<p><\/div><\/div>\t\t<script type=\"text\/javascript\">\n\t\t\tjQuery(window).load(function(){\n\t\t\t\tjQuery(\"#twentytwenty-6n0xdw .twentytwenty-container\").twentytwenty({\n\t\t\t\t\tdefault_offset_pct: 0.5, \n\t\t\t\t\torientation: 'vertical',\n\t\t\t\t\tmove_on_hover: false,\n\t\t\t\t\tis_wiggle: false,\n\t\t\t\t\twiggle_timeout: 1000\t\t\t\t});\n\t\t\t});\n\t\t<\/script>\n\t\t\t\t<style>\n\t\t\t#twentytwenty-6n0xdw {\n\t\t\t\twidth: 100%;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t\t#twentytwenty-6n0xdw.twentytwenty-hover .twentytwenty-overlay:hover {\n\t\t\t    background: rgba(0,0,0, 0.5);\n\t\t\t}\n\t\t\t#twentytwenty-6n0xdw .twentytwenty-before-label:before, \n\t\t\t#twentytwenty-6n0xdw .twentytwenty-after-label:before {\n\t\t\t\tbackground: rgba(255,255,255, 0.3);\n\t\t\t}\n\t\t\t#twentytwenty-6n0xdw .twentytwenty-before-label:before {\n\t\t\t\tcontent: \"Before\"; \n\t\t\t}\n\t\t\t#twentytwenty-6n0xdw .twentytwenty-after-label:before {\n\t\t\t\tcontent: \"After\";\n\t\t\t}\n\t\t\t#twentytwenty-6n0xdw .twentytwenty-horizontal .twentytwenty-handle:before, \n\t\t\t#twentytwenty-6n0xdw .twentytwenty-horizontal .twentytwenty-handle:after, \n\t\t\t#twentytwenty-6n0xdw .twentytwenty-vertical .twentytwenty-handle:before, \n\t\t\t#twentytwenty-6n0xdw .twentytwenty-vertical .twentytwenty-handle:after {\n\t\t\t\tbackground: #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-6n0xdw .twentytwenty-before-label:before, \n\t\t\t#twentytwenty-6n0xdw .twentytwenty-after-label:before {\n\t\t\t\tcolor: #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-6n0xdw .twentytwenty-handle {\n\t\t\t\tborder: 3px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-6n0xdw .twentytwenty-horizontal .twentytwenty-handle:before {\n\t\t\t\t-webkit-box-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-6n0xdw .twentytwenty-horizontal .twentytwenty-handle:after {\n\t\t\t\t-webkit-box-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-6n0xdw .twentytwenty-vertical .twentytwenty-handle:before {\n\t\t\t\t-webkit-box-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t}\n\t\t\t#twentytwenty-6n0xdw .twentytwenty-vertical .twentytwenty-handle:after {\n\t\t\t\t-webkit-box-shadow: -3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: -3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: -3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-6n0xdw .twentytwenty-left-arrow {\n\t\t\t\tborder-right: 6px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-6n0xdw .twentytwenty-right-arrow {\n\t\t\t\tborder-left: 6px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-6n0xdw .twentytwenty-up-arrow {\n\t\t\t\tborder-bottom: 6px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-6n0xdw .twentytwenty-down-arrow {\n\t\t\t\tborder-top: 6px solid #ffffff;\n\t\t\t}\n\t\t\t<\/style>\n\t\t\n<p>\n<\/div>\n<div class=\"column column-span-4 column-push-0 column-last\"><\/p>\n<h2>Move on Hover<\/h2>\n<p>Make handle follow to improve user experience, no\u00a0need to click and drag.<\/p>\n<div id=\"twentytwenty-HfrebA\" class=\"sbav-container twentytwenty-move-on-hover \"><div class=\"twentytwenty-container\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-63 size-full\" src=\"http:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-1.jpg\" alt=\"before-after-image-wordpress-plugin-1\" width=\"442\" height=\"710\" srcset=\"https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-1.jpg 442w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-1-186x300.jpg 186w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-1-62x100.jpg 62w\" sizes=\"auto, (max-width: 442px) 100vw, 442px\" \/> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-64 size-full\" src=\"http:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-2.jpg\" alt=\"before-after-image-wordpress-plugin-2\" width=\"442\" height=\"710\" srcset=\"https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-2.jpg 442w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-2-186x300.jpg 186w, https:\/\/topdevs.net\/before-after-viewer\/files\/2014\/05\/before-after-image-wordpress-plugin-2-62x100.jpg 62w\" sizes=\"auto, (max-width: 442px) 100vw, 442px\" \/><\/p>\n<p><\/div><\/div>\t\t<script type=\"text\/javascript\">\n\t\t\tjQuery(window).load(function(){\n\t\t\t\tjQuery(\"#twentytwenty-HfrebA .twentytwenty-container\").twentytwenty({\n\t\t\t\t\tdefault_offset_pct: 0.3, \n\t\t\t\t\torientation: 'vertical',\n\t\t\t\t\tmove_on_hover: true,\n\t\t\t\t\tis_wiggle: false,\n\t\t\t\t\twiggle_timeout: 1000\t\t\t\t});\n\t\t\t});\n\t\t<\/script>\n\t\t\t\t<style>\n\t\t\t#twentytwenty-HfrebA {\n\t\t\t\twidth: 100%;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t\t#twentytwenty-HfrebA.twentytwenty-hover .twentytwenty-overlay:hover {\n\t\t\t    background: rgba(0,0,0, 0.5);\n\t\t\t}\n\t\t\t#twentytwenty-HfrebA .twentytwenty-before-label:before, \n\t\t\t#twentytwenty-HfrebA .twentytwenty-after-label:before {\n\t\t\t\tbackground: rgba(255,255,255, 0.3);\n\t\t\t}\n\t\t\t#twentytwenty-HfrebA .twentytwenty-before-label:before {\n\t\t\t\tcontent: \"Before\"; \n\t\t\t}\n\t\t\t#twentytwenty-HfrebA .twentytwenty-after-label:before {\n\t\t\t\tcontent: \"After\";\n\t\t\t}\n\t\t\t#twentytwenty-HfrebA .twentytwenty-horizontal .twentytwenty-handle:before, \n\t\t\t#twentytwenty-HfrebA .twentytwenty-horizontal .twentytwenty-handle:after, \n\t\t\t#twentytwenty-HfrebA .twentytwenty-vertical .twentytwenty-handle:before, \n\t\t\t#twentytwenty-HfrebA .twentytwenty-vertical .twentytwenty-handle:after {\n\t\t\t\tbackground: #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-HfrebA .twentytwenty-before-label:before, \n\t\t\t#twentytwenty-HfrebA .twentytwenty-after-label:before {\n\t\t\t\tcolor: #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-HfrebA .twentytwenty-handle {\n\t\t\t\tborder: 3px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-HfrebA .twentytwenty-horizontal .twentytwenty-handle:before {\n\t\t\t\t-webkit-box-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-HfrebA .twentytwenty-horizontal .twentytwenty-handle:after {\n\t\t\t\t-webkit-box-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 0 -3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-HfrebA .twentytwenty-vertical .twentytwenty-handle:before {\n\t\t\t\t-webkit-box-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: 3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t}\n\t\t\t#twentytwenty-HfrebA .twentytwenty-vertical .twentytwenty-handle:after {\n\t\t\t\t-webkit-box-shadow: -3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\t-moz-box-shadow: -3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);\n\t\t\t\tbox-shadow: -3px 0 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5); \n\t\t\t}\n\t\t\t#twentytwenty-HfrebA .twentytwenty-left-arrow {\n\t\t\t\tborder-right: 6px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-HfrebA .twentytwenty-right-arrow {\n\t\t\t\tborder-left: 6px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-HfrebA .twentytwenty-up-arrow {\n\t\t\t\tborder-bottom: 6px solid #ffffff;\n\t\t\t}\n\t\t\t#twentytwenty-HfrebA .twentytwenty-down-arrow {\n\t\t\t\tborder-top: 6px solid #ffffff;\n\t\t\t}\n\t\t\t<\/style>\n\t\t\n<p>\n<\/div><\/div>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><a class=\"button buy-it\" title=\"\" href=\"http:\/\/codecanyon.net\/item\/smart-before-after-viewer\/7672815?ref=topdevs\"><i class=\"icon-shopping-cart icon-large\"><\/i> Get on CodeCanyon &#8211; $17<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2 style=\"text-align: center;\">Not Ready To Buy? See What Plugin Customers Say<\/h2>\n<p style=\"text-align: center;\"><span itemscope itemtype=\"http:\/\/schema.org\/Product\"><span itemprop=\"name\">Smart Before After Viewer<\/span> has <span itemprop=\"aggregateRating\" itemscope itemtype=\"http:\/\/schema.org\/AggregateRating\"><span itemprop=\"ratingValue\"><b>4.95<\/b><\/span> average rating based on <span itemprop=\"ratingCount\">42<\/span> reviews<\/span><\/span><\/p>\n<div class=\"column-grid column-grid-12\"><div class=\"column column-span-4 column-push-0 column-first\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-414\" src=\"http:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/5-stars-wordpress-gallery.png\" alt=\"5-stars-wordpress-gallery\" width=\"90\" height=\"17\" \/><\/p>\n<p><em>&#8220;Simple, clean and does EXACTLY what it says it does. Just good, clean, solid code all the way around. Thanx for your great work!&#8221;<\/em><\/p>\n<p>&#8211;\u00a0<a href=\"http:\/\/codecanyon.net\/user\/jonhardison?ref=topdevs\" rel=\"nofollow\">jonhardison<\/a><\/p>\n<p>\n<\/div>\n<div class=\"column column-span-4 column-push-0\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-414\" src=\"http:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/5-stars-wordpress-gallery.png\" alt=\"5-stars-wordpress-gallery\" width=\"90\" height=\"17\" \/><\/p>\n<p><em>&#8220;I&#8217;ve tried a few other before\/after sliders, this one wins hands down. I wish the back end interface was a little more user-friendly. But it looks great on the front end, which is what matters :)&#8221;<\/em><\/p>\n<p>&#8211;\u00a0<a href=\"http:\/\/codecanyon.net\/user\/sheila589?ref=topdevs\" rel=\"nofollow\">sheila589<\/a><\/p>\n<p>\n<\/div>\n<div class=\"column column-span-4 column-push-0 column-last\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-414 size-full\" src=\"http:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/5-stars-wordpress-gallery.png\" alt=\"5 Stars Responsive WordPress Grid Gallery\" width=\"90\" height=\"17\" \/><\/p>\n<p><em>&#8220;Works great! Customer support contacted me very quickly when I had trouble installing!&#8221;<\/em><\/p>\n<p>&#8211;\u00a0<a href=\"http:\/\/codecanyon.net\/user\/craiggraphicdesign?ref=topdevs\" rel=\"nofollow\">CraigGraphicDesign<\/a><\/p>\n<p>\n<\/div><\/div>\n<p>&nbsp;<br \/>\n&nbsp;<\/p>\n<h2 style=\"text-align: center; margin-bottom: -60px;\">Selling Themes on ThemeForest?<br \/>\n<small>Purchase <strong>Extended License<\/strong> to add\u00a0<strong>Smart Before After Viewer<\/strong> to your ThemeForest item.<\/small><\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Easy Before After WordPress\u00a0Images This easy Before After WordPress visual diff tool is perfect to showcase your work, where it&#8217;s essential to visualize the difference between two images. Create unlimited instances on a single page. All you need is simply wrap any two images with [ before-after ] shortcode opening and closing tags inside WordPress [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"template.page.fullwidth.php","meta":{"footnotes":""},"class_list":["post-148","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/topdevs.net\/before-after-viewer\/wp-json\/wp\/v2\/pages\/148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/topdevs.net\/before-after-viewer\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/topdevs.net\/before-after-viewer\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/topdevs.net\/before-after-viewer\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/topdevs.net\/before-after-viewer\/wp-json\/wp\/v2\/comments?post=148"}],"version-history":[{"count":25,"href":"https:\/\/topdevs.net\/before-after-viewer\/wp-json\/wp\/v2\/pages\/148\/revisions"}],"predecessor-version":[{"id":175,"href":"https:\/\/topdevs.net\/before-after-viewer\/wp-json\/wp\/v2\/pages\/148\/revisions\/175"}],"wp:attachment":[{"href":"https:\/\/topdevs.net\/before-after-viewer\/wp-json\/wp\/v2\/media?parent=148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}