{"id":5509,"date":"2014-08-26T14:13:23","date_gmt":"2014-08-26T12:13:23","guid":{"rendered":"https:\/\/tazintosh.com\/fonction-de-comparaison-avantapres-code-source-2\/"},"modified":"2018-02-09T13:50:43","modified_gmt":"2018-02-09T12:50:43","slug":"before-after-comparison-source-code","status":"publish","type":"post","link":"https:\/\/vpn.tazintosh.com\/en\/before-after-comparison-source-code\/","title":{"rendered":"Before|After Comparison \u2022 Source Code"},"content":{"rendered":"<figure id=\"taz_beforeAfter-618456335\" class=\"taz_beforeAfter taz_largeImage\"><div class=\"taz_imageWrapper _BA_comparisonArea taz_shadow taz_rounded taz_fitHeight\" style=\"background-color:#624547\" data-showhandle=\"yes\" data-initialslicepos=\"80\" data-labelbefore=\"\" data-labelafter=\"\"><img decoding=\"async\" class=\"taz_image _BA_element _BA_afterElement\" alt=\"\" src=\"https:\/\/vpn.tazintosh.com\/wordpress\/wp-content\/themes\/Tazintosh\/inc\/taz_imagePlaceholder.php?width=960&height=409\" data-src=\"\/wordpress\/wp-content\/uploads\/article-20111212-comparisonFeatureSourceCode-featured.jpg\"><img decoding=\"async\" class=\"taz_image _BA_element _BA_beforeElement\" alt=\"\" src=\"https:\/\/vpn.tazintosh.com\/wordpress\/wp-content\/themes\/Tazintosh\/inc\/taz_imagePlaceholder.php?width=960&height=409\" data-src=\"\/wordpress\/wp-content\/uploads\/article-20111212-comparisonFeatureSourceCode-RAW-featured.jpg\"><\/div><figcaption class=\"taz_beforeAfter-caption\"><\/figcaption><\/figure>\r\n<div class=\"taz_row\">\r\n\t<div class=\"taz_column taz_column-twoThirds\">\r\n\t\t<h1>What is it, what's for?<\/h1>\r\n\t\t<p>Before|After is a comparison feature between two images. I originally developed this tool to allow my readers to be able to very quickly and with high efficiency, compare my photographies before and after the post-processing. This allows me to support beginners and amateurs in a logic of learning photography in an opened way. This habit is still uncommon, it is especially in contrast to nauseous methods so many people still adopt, suggesting \u2014\u00a0to the most novice and\/or naive\u00a0\u2014 that their photos are unedited, right from the camera, etc. A pseudo attempt at self-preservation, very ridiculous, but also human too\u2026<br>\r\n\t\tThe function is particularly simple to use: just place the mouse cursor over the image to be compared and the function is activated immediately, thus allowing, while you ride the cursor, to compare two different states.<\/p>\r\n\t\t<h2>Small but powerful<\/h2>\r\n\t\t<div class=\"taz_row\">\r\n\t\t\t[taz_embeddedcolumn width=\"50\"]\r\n\t\t\t\t<ul class=\"taz_list\"><li class=\"taz_listItem\"><i class=\"fa-li fa fa-euro\"><\/i>Free.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-magic\"><\/i>Easy tool, efficient and fun.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-lightbulb-o\"><\/i>Compare just anything you want.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-signal\"><\/i>For personal & pro. projects<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-apple\"><\/i>Cross-platform.<\/li><\/ul>\r\n\t\t\t[\/taz_embeddedcolumn]\r\n\t\t\t[taz_embeddedcolumn width=\"50\"]\r\n\t\t\t\t<ul class=\"taz_list\"><li class=\"taz_listItem\"><i class=\"fa-li fa fa-check\"><\/i>Tablets and Smartphones.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-gears\"><\/i>Many options.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-file-text\"><\/i>Complete documentation.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-tint\"><\/i>Customize each comparison.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-code\"><\/i>Adapt the code to your needs.<\/li><\/ul>\r\n\t\t\t[\/taz_embeddedcolumn]\r\n\t\t<\/div>\r\n\t<\/div>\r\n\t<div class=\"taz_column taz_column-oneThird\">\r\n\t\t<div role=\"alert\" class=\"taz_alert taz_alert-success\"><div class=\"taz_alert-content\">I give free access to the source code of this tool so that people that want to share their work based on this principle, can easily do so.<\/div><\/div>\r\n\t\t<div class=\"taz_panel taz_panel-default\"><div class=\"taz_panel-header\"><h3 class=\"taz_panel-title\">License<\/h3><\/div><div class=\"taz_panel-bodyWrapper\"><div class=\"taz_panel-body\">\r\n\t\t\t<span xmlns:dct=\"https:\/\/purl.org\/dc\/terms\/\" href=\"https:\/\/purl.org\/dc\/dcmitype\/Dataset\" property=\"dct:title\" rel=\"dct:type\">\u201cBefore|After \u2022 Comparison Feature\u201d<\/span><br \/>by <a xmlns:cc=\"http:\/\/creativecommons.org\/ns#\" href=\"http:\/\/tazintosh.com\" property=\"cc:attributionName\" rel=\"cc:attributionURL\">\u00c9douard Puginier<\/a> is licensed under a <a rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/\">Creative Commons Attribution-ShareAlike 3.0 Unported License<\/a>. Permissions beyond the scope of this license may be available at <a xmlns:cc=\"https:\/\/creativecommons.org\/ns#\" href=\"\/?page_id=1557\" rel=\"cc:morePermissions\">http:\/\/tazintosh.com\/en\/contact\/<\/a><br \/><br \/><img decoding=\"async\" alt=\"Creative Commons License\" style=\"border-width:0; float:right\" src=\"http:\/\/i.creativecommons.org\/l\/by-sa\/3.0\/88x31.png\" \/>\r\n\t\t<\/div><\/div><\/div>\r\n\t<\/div>\r\n<\/div>\r\n<div class=\"taz_row\">\r\n\t<div class=\"taz_column taz_column-oneThird\">\r\n\t\t<h1>Demos and ideas<\/h1>\r\n\t\t<p>Everything that can answer to the concept of Before|After fits this tools. Examples below against are only a minimal part of the feature potential.<br>\r\n\t\tIt's just up to you!<\/p>\r\n\t\t<ul class=\"taz_list\"><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i>Before|After photo adjustments<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i>Before|After funny<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i>Before|After 3D Compositing<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i>Before|After Colorization<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i>Before|After Make-Up<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i>Before|After laboratory experiment<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i>Before|After culinary<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i>Before|After hairdressing<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i>Before|After cleaning-up<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i>etc.<\/li><\/ul>\r\n\t\t<p>Each example provided here has specifics settings to demonstrates the tool features. Check-out the code under each to discover them.<\/p>\r\n\t<\/div>\r\n\t<div class=\"taz_column taz_column-twoThirds\">\r\n\t\t<div class=\"taz_carousel\" style=\"max-width:100%\" data-shownavigation=\"true\" data-autoplay=\"true\" data-interval=\"3\" data-transitionspeed=\"0.6\" data-wrap=\"true\" data-currentslidenumber=\"1\"><div class=\"taz_carousel-slidesWrapper\"><div class=\"taz_carousel-slide taz_isActive taz_isCurrent\"><figure id=\"taz_beforeAfter-1051245997\" class=\"taz_beforeAfter\"><div class=\"taz_imageWrapper _BA_comparisonArea taz_shadow taz_rounded taz_fitHeight\" style=\"background-color:#98A6A9\" data-showhandle=\"yes\" data-handlesize=\"30\" data-showslice=\"yes\" data-initialslicepos=\"20\" data-keepinplace=\"yes\" data-showlabels=\"yes\" data-labelbefore=\"BEFORE\" data-labelafter=\"AFTER\"><img decoding=\"async\" class=\"taz_image _BA_element _BA_afterElement\" alt=\"\" src=\"https:\/\/vpn.tazintosh.com\/wordpress\/wp-content\/themes\/Tazintosh\/inc\/taz_imagePlaceholder.php?width=640&height=426\" data-src=\"\/wordpress\/wp-content\/uploads\/photo-7D-IMG_1093-640x427.jpg\"><img decoding=\"async\" class=\"taz_image _BA_element _BA_beforeElement\" alt=\"\" src=\"https:\/\/vpn.tazintosh.com\/wordpress\/wp-content\/themes\/Tazintosh\/inc\/taz_imagePlaceholder.php?width=640&height=426\" data-src=\"\/wordpress\/wp-content\/uploads\/photo-7D-IMG_1093-RAW-640x427.jpg\"><\/div><figcaption class=\"taz_beforeAfter-caption\"><\/figcaption><\/figure>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n&lt;div class=&quot;_BA_comparisonArea&quot; style=&quot;max-width:630px&quot;&gt;\r\n\t&lt;img class=&quot;_BA_afterElement&quot; src=&quot;pathToTheAfterPicture&quot; alt=&quot;&quot;&gt;\r\n\t&lt;img class=&quot;_BA_beforeElement&quot; src=&quot;pathToTheBeforePicture&quot; alt=&quot;&quot;&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div><div class=\"taz_carousel-slide\"><figure id=\"taz_beforeAfter-1464656760\" class=\"taz_beforeAfter\"><div class=\"taz_imageWrapper _BA_comparisonArea taz_shadow taz_rounded taz_fitHeight\" style=\"background-color:#746B7A\" data-showhandle=\"yes\" data-initialslicepos=\"50\" data-horizontalslice=\"yes\" data-labelbefore=\"Wedding\" data-labelafter=\"After Wedding\"><img decoding=\"async\" class=\"taz_image _BA_element _BA_afterElement\" alt=\"\" src=\"https:\/\/vpn.tazintosh.com\/wordpress\/wp-content\/themes\/Tazintosh\/inc\/taz_imagePlaceholder.php?width=640&height=426\" data-src=\"\/wordpress\/wp-content\/uploads\/photo-5DMkII-IMG_4274-640x427.jpg\"><img decoding=\"async\" class=\"taz_image _BA_element _BA_beforeElement\" alt=\"\" src=\"https:\/\/vpn.tazintosh.com\/wordpress\/wp-content\/themes\/Tazintosh\/inc\/taz_imagePlaceholder.php?width=640&height=426\" data-src=\"\/wordpress\/wp-content\/uploads\/photo-20110619-5DMkII-IMG_4277-640x427.jpg\"><\/div><figcaption class=\"taz_beforeAfter-caption\"><\/figcaption><\/figure>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n&lt;div class=&quot;_BA_comparisonArea&quot; style=&quot;max-width:630px&quot; data-horizontalslice=&quot;true&quot; data-initialslicepos=&quot;50&quot; data-labelbefore=&quot;Wedding&quot; data-labelafter=&quot;After Wedding&quot;&gt;\r\n\t&lt;img class=&quot;_BA_afterElement&quot; src=&quot;pathToTheAfterPicture&quot; alt=&quot;&quot;&gt;\r\n\t&lt;img class=&quot;_BA_beforeElement&quot; src=&quot;pathToTheBeforePicture&quot; alt=&quot;&quot;&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div><div class=\"taz_carousel-slide\"><figure id=\"taz_beforeAfter-950005194\" class=\"taz_beforeAfter\"><div class=\"taz_imageWrapper _BA_comparisonArea taz_shadow taz_rounded taz_fitHeight\" style=\"background-color:#686260\" data-labelbefore=\"\" data-labelafter=\"\"><img decoding=\"async\" class=\"taz_image _BA_element _BA_afterElement\" alt=\"\" src=\"https:\/\/vpn.tazintosh.com\/wordpress\/wp-content\/themes\/Tazintosh\/inc\/taz_imagePlaceholder.php?width=640&height=426\" data-src=\"\/wordpress\/wp-content\/uploads\/2D3D-CompositingLMP-Composite-640x427.jpg\"><img decoding=\"async\" class=\"taz_image _BA_element _BA_beforeElement\" alt=\"\" src=\"https:\/\/vpn.tazintosh.com\/wordpress\/wp-content\/themes\/Tazintosh\/inc\/taz_imagePlaceholder.php?width=640&height=426\" data-src=\"\/wordpress\/wp-content\/uploads\/2D3D-CompositingLMP-Lighting-640x427.jpg\"><\/div><figcaption class=\"taz_beforeAfter-caption\"><\/figcaption><\/figure>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n&lt;div class=&quot;_BA_comparisonArea&quot; style=&quot;max-width:630px&quot; data-keepinplace=&quot;false&quot; data-showhandle=&quot;false&quot; data-showslice=&quot;false&quot; data-showlabels=&quot;false&quot;&gt;\r\n\t&lt;img class=&quot;_BA_afterElement&quot; src=&quot;pathToTheAfterPicture&quot; alt=&quot;&quot;&gt;\r\n\t&lt;img class=&quot;_BA_beforeElement&quot; src=&quot;pathToTheBeforePicture&quot; alt=&quot;&quot;&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div><div class=\"taz_carousel-slide\"><figure id=\"taz_beforeAfter-1107089816\" class=\"taz_beforeAfter\"><div class=\"taz_imageWrapper _BA_comparisonArea taz_shadow taz_rounded taz_fitHeight\" style=\"background-color:#787568\" data-showhandle=\"yes\" data-handlesize=\"15\" data-initialslicepos=\"35\" data-labelbefore=\"\" data-labelafter=\"\" data-alwaysshowlabels=\"yes\"><img decoding=\"async\" class=\"taz_image _BA_element _BA_afterElement\" alt=\"\" src=\"https:\/\/vpn.tazintosh.com\/wordpress\/wp-content\/themes\/Tazintosh\/inc\/taz_imagePlaceholder.php?width=640&height=426\" data-src=\"\/wordpress\/wp-content\/uploads\/2D-Sketch-Kingfisher-Color-640x427.jpg\"><img decoding=\"async\" class=\"taz_image _BA_element _BA_beforeElement\" alt=\"\" src=\"https:\/\/vpn.tazintosh.com\/wordpress\/wp-content\/themes\/Tazintosh\/inc\/taz_imagePlaceholder.php?width=640&height=426\" data-src=\"\/wordpress\/wp-content\/uploads\/2D-Sketch-Kingfisher-Rought-640x427.jpg\"><\/div><figcaption class=\"taz_beforeAfter-caption\"><\/figcaption><\/figure>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n&lt;div class=&quot;_BA_comparisonArea&quot; style=&quot;max-width:630px&quot; data-initialslicepos=&quot;35&quot; data-handlesize=&quot;15&quot; data-alwaysshowlabels=&quot;true&quot;&gt;\r\n\t&lt;img class=&quot;_BA_afterElement&quot; src=&quot;pathToTheAfterPicture&quot; alt=&quot;&quot;&gt;\r\n\t&lt;img class=&quot;_BA_beforeElement&quot; src=&quot;pathToTheBeforePicture&quot; alt=&quot;&quot;&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/div><\/div><div class=\"taz_carousel-controls\"><ol class=\"taz_carousel-markersWrapper\"><li class=\"taz_carousel-marker taz_isActive taz_isCurrent\"><\/li><li class=\"taz_carousel-marker\"><\/li><li class=\"taz_carousel-marker\"><\/li><li class=\"taz_carousel-marker\"><\/li><\/ol><div class=\"taz_carousel-nextPrevControls\"><a class=\"taz_carousel-control taz_carousel-control-prev\"><\/a><a class=\"taz_carousel-control taz_carousel-control-next\"><\/a><\/div><\/div><\/div>\r\n\t<\/div>\r\n<\/div>\r\n<h1>What's new on the last version?<\/h1>\r\n<div class=\"taz_panel-accordion taz_isGrouped\">\r\n\t<div class=\"taz_panel taz_panel-default\"><div class=\"taz_panel-header\"><h3 class=\"taz_panel-title\">Version 1.5.1 - 30\/09\/2014<\/h3><\/div><div class=\"taz_panel-bodyWrapper\"><div class=\"taz_panel-body\">\r\n\t\t<ul class=\"taz_list\"><li class=\"taz_listItem\"><i class=\"fa-li fa fa-angle-right\"><\/i>Added a CSS attribute to avoid a possible overflow of the handle.<\/li><\/ul>\r\n\t<\/div><\/div><\/div>\r\n\t<div class=\"taz_panel taz_panel-default\"><div class=\"taz_panel-header\"><h3 class=\"taz_panel-title\">Version 1.5 - 26\/08\/2014<\/h3><\/div><div class=\"taz_panel-bodyWrapper\"><div class=\"taz_panel-body\">\r\n\t\t<ul class=\"taz_list\"><li class=\"taz_listItem\"><i class=\"fa-li fa fa-angle-right\"><\/i>Touch events! The tool now works on tablets and smartphones.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-angle-right\"><\/i>Option to display a handled to encourage manipulation.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-angle-right\"><\/i>Option for the handle size.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-angle-right\"><\/i>Option to display a slice line between the two elements to compare.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-angle-right\"><\/i>Option to set the default position of the slice.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-angle-right\"><\/i>Option for horizontal or vertical comparison.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-angle-right\"><\/i>Option to keep the comparison in place even if the mouse or the finger leave the area.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-angle-right\"><\/i>CSS Classes have been prefixed to avoid compatibility problem. You'll have to update your existing comparisons, I'm sorry about that, but it's for a good cause\u00a0;)<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-angle-right\"><\/i>Option to display or not labels \u201cBefore\u201d, \u201cAfter\u201d.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-angle-right\"><\/i>Option to customize labels.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-angle-right\"><\/i>Option to keep labels always visible or only when comparing.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-angle-right\"><\/i>Each option can be applyed independently on each comparison.<\/li><\/ul>\r\n\t<\/div><\/div><\/div>\r\n\t<div class=\"taz_panel taz_panel-default\"><div class=\"taz_panel-header\"><h3 class=\"taz_panel-title\">Version 1.0 - 25\/04\/2012<\/h3><\/div><div class=\"taz_panel-bodyWrapper\"><div class=\"taz_panel-body\">\r\n\t\t<ul class=\"taz_list\"><li class=\"taz_listItem\"><i class=\"fa-li fa fa-angle-right\"><\/i>Initial public release of Before|After comparison feature.<\/li><\/ul>\r\n\t<\/div><\/div><\/div>\r\n<\/div>\r\n<h1>Three steps install<\/h1>\r\n<div class=\"taz_panel taz_panel-default\"><div class=\"taz_panel-bodyWrapper\"><div class=\"taz_panel-body\">\r\n\t<p>The tool is composed as follows: the HTML code basically constituted of the two images to compare, included in a container; a CSS stylesheet; the Javascript (jQuery) code to handle the user interaction.<\/p>\r\n\t<div role=\"alert\" class=\"taz_alert taz_alert-danger\"><div class=\"taz_alert-content\">With a Creative Commons license (see above), I keep my copyright but allow people to copy and distribute my code provided they give me credit \u2014 and only on the conditions specified on the license.<\/div><\/div>\r\n<\/div><\/div><\/div>\r\n<h2><strong>#1 <\/strong>HTML<\/h2>\r\n<p>A two images comparison is built upon 4 lines of codes. It's possible to add as many comparison as needed on a page. By default, all of them are displayed with the default options set in the Javascript (lines 10 to 19). However, each comparison can be set independently with specifics options (see above examples).<\/p>\r\n<div role=\"alert\" class=\"taz_alert taz_alert-warning\"><div class=\"taz_alert-content\">You'll have to edit, <strong>lines 2 and 3<\/strong>, the <code>src<\/code> property with your own image path.<\/div><\/div>\r\n<div role=\"alert\" class=\"taz_alert taz_alert-info\"><div class=\"taz_alert-content\">\r\n\t<p>I recommend you to set the width of your comparisons. This can prevent rendering problems depending your stylesheets and website structure.<br>\r\n\tTo do this, <strong>line 1<\/strong>, add <code> style=\"max-width:<\/code><code>width of the comparison<\/code><code>px\"<\/code><\/p>\r\n<\/div><\/div>\r\n<div role=\"alert\" class=\"taz_alert taz_alert-info\"><div class=\"taz_alert-content\">\r\n\t<p>Custom options (for each comparison) are set <strong>line 1<\/strong>.<br>\r\n\tWrite them like following <code>data<\/code><code>-<\/code><code>option name<\/code><code>=<\/code><code>\"value\"<\/code><br>\r\n\tGlobal settings are set lines 10 to 19 of the Javascript.<\/p>\r\n\t<h6>Available options:<\/h6>\r\n\t<div class=\"taz_row\">\r\n\t\t<div class=\"taz_column taz_column-50\">\r\n\t\t\t<ul class=\"taz_list\"><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i><code>data-showhandle=\"true\"<\/code><small> (default)<\/small><br>\r\n\t\t\t\t<code>false<\/code> to hide the handle.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i><code>data-handlesize=\"30\"<\/code><small> (default)<\/small><br>\r\n\t\t\t\tHandle diameter in pixel.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i><code>data-showslice=\"true\"<\/code><small> (default)<\/small><br>\r\n\t\t\t\t<code>false<\/code> to hide the separation slice between the two elements to compare.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i><code>data-initialslicepos=\"20\"<\/code><small> (default)<\/small><br>\r\n\t\t\t\tInitial position of the comparison (% of the width).<br>\r\n\t\t\t\t\t<code>0<\/code> shows 100% of the <strong>\u201cafter\u201d<\/strong> image,<br>\r\n\t\t\t\t\t<code>60<\/code> shows 60% of \u201cbefore\u201d and 40% of \u201cafter\u201d,<br>\r\n\t\t\t\t\t<code>100<\/code> shows 100% of <strong>\u201cbefore\u201d<\/strong> image.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i><code>data-horizontalslice=\"false\"<\/code><small> (default)<\/small><br>\r\n\t\t\t\t<code>true<\/code> for a top to bottom comparison.<\/li><\/ul>\r\n\t\t<\/div>\r\n\t\t<div class=\"taz_column taz_column-50\">\r\n\t\t\t<ul class=\"taz_list\"><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i><code>data-keepinplace=\"true\"<\/code><small> (default)<\/small><br>\r\n\t\t\t\t<code>false<\/code> display 100% of the <strong>\u201cafter\u201d<\/strong> image when the finger or cursor leaves the comparison area.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i><code>data-showlabels=\"true\"<\/code><small> (default)<\/small><br>\r\n\t\t\t\t<code>false<\/code> hides labels.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i><code>data-labelbefore=\"BEFORE\"<\/code><small> (default)<\/small><br>\r\n\t\t\t\t\u201cBefore\u201d image label.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i><code>data-labelafter=\"AFTER\"<\/code><small> (default)<\/small><br>\r\n\t\t\t\t\u201cAfter\u201d image label.<\/li><li class=\"taz_listItem\"><i class=\"fa-li fa fa-chevron-right\"><\/i><code>data-alwaysshowlabels=\"false\"<\/code><small> (default)<\/small><br>\r\n\t\t\t\t<code>true<\/code> always shows labels, even if the finger or cursor leaves the comparison area.<\/li><\/ul>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div><\/div>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-highlight=\"2,3\">\r\n&lt;div class=&quot;_BA_comparisonArea&quot; style=&quot;max-width:630px&quot;&gt;\r\n\t&lt;img class=&quot;_BA_afterElement&quot; src=&quot;pathToTheAfterPicture&quot; alt=&quot;&quot;&gt;\r\n\t&lt;img class=&quot;_BA_beforeElement&quot; src=&quot;pathToTheBeforePicture&quot; alt=&quot;&quot;&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-highlight=\"1\">\r\n&lt;div class=&quot;_BA_comparisonArea&quot; style=&quot;max-width:630px&quot; data-showhandle=&quot;false&quot; data-initialslicepos=&quot;50&quot;&gt;\r\n\t&lt;img class=&quot;_BA_afterElement&quot; src=&quot;pathToTheAfterPicture&quot; alt=&quot;&quot;&gt;\r\n\t&lt;img class=&quot;_BA_beforeElement&quot; src=&quot;pathToTheBeforePicture&quot; alt=&quot;&quot;&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\r\n<h2><strong>#2 <\/strong>CSS<\/h2>\r\n<p>The stylesheet provides the look to the comparaison and also make them work the good way. It applies to all comparisons on screen. If you know about CSS, you can modify this style to your needs (specialy to adapt colors to your visual identity).<br>\r\nYou may add the CSS to the <code>&lt;head&gt;<\/code> of your website. A method is to copy\/paste the following code on a file <code>_BA_styles.css<\/code> you'll then call on the head like this: <code>&lt;link rel=\"stylesheet\" href=\"pathToMyFile\/_BA_styles.css\"&gt;<\/code>.<\/p>\r\n<div role=\"alert\" class=\"taz_alert taz_alert-info\"><div class=\"taz_alert-content\">Example <strong>line 41<\/strong>, changing the <code>background-color:<\/code><code> yellow;<\/code> value to <code> red;<\/code> for the class <code>._BA_handle<\/code> will modify the handle color from yellow to red.<\/div><\/div>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-highlight=\"41\">\r\n._BA_comparisonArea {\r\n\tcursor: ew-resize;\r\n\tposition: relative;\r\n\toverflow: hidden;\r\n}\r\n._BA_comparisonArea.hasHorizontalSlice {\r\n\tcursor: ns-resize;\r\n}\r\n\r\n._BA_afterElement,\r\n._BA_beforeElement {\r\n\tdisplay: block;\r\n\tmargin-left: auto;\r\n\tmargin-right: auto;\r\n\tleft: 0;\r\n\tright: 0;\r\n\ttop: 0;\r\n}\r\n\r\n._BA_beforeElement {\r\n\tposition: absolute !important;\r\n}\r\n\r\n._BA_slice {\r\n\tposition: absolute;\r\n\twidth: 1px;\r\n\theight: 100%;\r\n\ttop: 0;\r\n\tleft: auto;\r\n\tbackground-color: rgba(0, 0, 0, 0.3);\r\n}\r\n._BA_comparisonArea.hasHorizontalSlice ._BA_slice {\r\n\twidth: 100%;\r\n\theight: 1px;\r\n\ttop: auto;\r\n\tleft: 0;\r\n}\r\n\r\n._BA_handle {\r\n\tposition: absolute;\r\n\tbackground-color: yellow;\r\n\tbox-shadow: 0 0 2px rgba(0, 0, 0, 0.4);\r\n}\r\n\r\n._BA_label {\r\n\tposition: absolute;\r\n\tfont-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;\r\n\tfont-weight: bold;\r\n\tfont-size: 9px;\r\n\tline-height: 12px;\r\n\tletter-spacing: 1px;\r\n\ttop: 48%;\r\n\tpadding: 4px;\r\n\tborder-radius: 4px;\r\n\tcolor: white;\r\n\tbackground-color: rgba(0, 0, 0, 0.5);\r\n}\r\n._BA_comparisonArea.hasHorizontalSlice ._BA_label {\r\n\tmargin-left: auto;\r\n\tmargin-right: auto;\r\n}\r\n._BA_label-left {\r\n\tleft: 10px;\r\n}\r\n._BA_comparisonArea.hasHorizontalSlice ._BA_label-left {\r\n\ttop: auto;\r\n\tbottom: 10px;\r\n}\r\n._BA_label-right {\r\n\tright: 10px;\r\n}\r\n._BA_comparisonArea.hasHorizontalSlice ._BA_label-right {\r\n\ttop: 10px;\r\n}\r\n<\/pre>\r\n<h2><strong>#3 <\/strong>Javascript<\/h2>\r\n<p>The script may be added into the <code>&lt;head&gt;<\/code> of your website. A method is to copy\/paste the following code on a file <code>_BA_scripts.js<\/code> that you'll call on the head <strong>after<\/strong> the jQuery library call, like this: <code>&lt;script src=\"cheminVersLeFichier\/_BA_scripts.js\"&gt;&lt;\/script&gt;<\/code>.<\/p>\r\n<div role=\"alert\" class=\"taz_alert taz_alert-warning\"><div class=\"taz_alert-content\">I assume you know about jQuery and have installed it for the following code to work. <a href=\"http:\/\/jquery.com\/\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">More informations<\/a>.<\/div><\/div>\r\n<div role=\"alert\" class=\"taz_alert taz_alert-info\"><div class=\"taz_alert-content\"><strong>Lines 10 to 19<\/strong>, defaults options (applied to all comparisons), that you can modify to your needs.<br>\r\nIf you call the function into your own script and want to re-execute it (ie. after a <em>window resize<\/em>, if your image size has changed), you can pass the <code>true<\/code> parameter.<br>\r\n<code>setupComparison(beforeElement, true);<\/code><\/div><\/div>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-highlight=\"10,11,12,13,14,15,16,17,18,19\">\r\n\/* ==================================================================================== *\/\r\n\/* Before|After \u2022 Comparison Feature v1.5.1 \u2014 \u00a9 \u00c9douard Puginier \u2014 https:\/\/tazintosh.com *\/\r\n\/* Under Creative Common license Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)     *\/\r\n\/* ==================================================================================== *\/\r\n\r\nfunction setupComparison(comparisonArea, reset){\r\n\tjQuery(function($){\r\n\r\n\t\t\/* ========================= Defaults *\/\r\n\t\tvar showHandle = true, \/\/ false\r\n\t\t\thandleSize = 30, \/\/ Diameter in px\r\n\t\t\tshowSlice = true, \/\/ false\r\n\t\t\tinitialSlicePos = 20, \/\/ Percent\r\n\t\t\thorizontalSlice = false, \/\/ true for top to bottom comparison\r\n\t\t\tkeepInPlace = true, \/\/ false. Will make \u201cafter\u201d image 100% visible when leaving the comparison area\r\n\t\t\tshowLabels = true, \/\/ false\r\n\t\t\tlabelBefore = 'BEFORE', \/\/ Desired label for the before image\r\n\t\t\tlabelAfter = 'AFTER', \/\/ Desired label for the after image\r\n\t\t\talwaysShowLabels = false; \/\/ Will show labels even while not hover\r\n\r\n\t\t\/* ========================= Init *\/\r\n\t\tvar pointer = '',\r\n\t\t\tposX = 0,\r\n\t\t\tposY = 0,\r\n\t\t\tslice = null,\r\n\t\t\thandle = null,\r\n\t\t\tlabels = null,\r\n\t\t\toffset = '',\r\n\t\t\tbeforeElement = $(comparisonArea).find('._BA_beforeElement'),\r\n\t\t\telementWidth = $(beforeElement).width(),\r\n\t\t\telementHeight = $(beforeElement).height();\r\n\r\n\t\tif (reset){\r\n\t\t\t$(comparisonArea).removeClass('hasOverlay');\r\n\t\t\t$(comparisonArea).find('._BA_slice').remove();\r\n\t\t\t$(comparisonArea).find('._BA_handle').remove();\r\n\t\t\t$(comparisonArea).find('._BA_label').remove();\r\n\t\t}\r\n\r\n\t\t\/* ========================= Get values *\/\r\n\t\tshowHandle = ($(comparisonArea).attr('data-showhandle')) ? $(comparisonArea).data('showhandle') : showHandle;\r\n\t\thandleSize = ($(comparisonArea).attr('data-handlesize')) ? $(comparisonArea).data('handlesize') : handleSize;\r\n\t\tshowSlice = ($(comparisonArea).attr('data-showslice')) ? $(comparisonArea).data('showslice') : showSlice;\r\n\t\tinitialSlicePos = ($(comparisonArea).attr('data-initialslicepos')) ? $(comparisonArea).data('initialslicepos') : initialSlicePos;\r\n\t\thorizontalSlice = ($(comparisonArea).attr('data-horizontalslice')) ? $(comparisonArea).data('horizontalslice') : horizontalSlice;\r\n\t\tkeepInPlace = ($(comparisonArea).attr('data-keepinplace')) ? $(comparisonArea).data('keepinplace') : keepInPlace;\r\n\t\tshowLabels = ($(comparisonArea).attr('data-showlabels')) ? $(comparisonArea).data('showlabels') : showLabels;\r\n\t\tlabelBefore = ($(comparisonArea).attr('data-labelbefore')) ? $(comparisonArea).data('labelbefore') : labelBefore;\r\n\t\tlabelAfter = ($(comparisonArea).attr('data-labelafter')) ? $(comparisonArea).data('labelafter') : labelAfter;\r\n\t\talwaysShowLabels = ($(comparisonArea).attr('data-alwaysshowlabels')) ? $(comparisonArea).data('alwaysshowlabels') : alwaysShowLabels;\r\n\r\n\t\tfunction getEvent(event){\r\n\t\t\treturn event.originalEvent.targetTouches ? event.originalEvent.targetTouches[0] : event;\r\n\t\t}\r\n\r\n\t\t\/* ========================= Allows to append only once *\/\r\n\t\tif (!$(comparisonArea).hasClass('hasOverlay')){\r\n\t\t\tif (showSlice){\r\n\t\t\t\tbeforeElement.parent().append('<div class=\"_BA_slice\"><\/div>');\r\n\t\t\t\tslice = $(comparisonArea).find('._BA_slice');\r\n\t\t\t}\r\n\t\t\tif (showHandle){\r\n\t\t\t\tbeforeElement.parent().append('<div class=\"_BA_handle\"><\/div>');\r\n\t\t\t\thandle = $(comparisonArea).find('._BA_handle');\r\n\t\t\t}\r\n\t\t\tif (showLabels){\r\n\t\t\t\tbeforeElement.parent().append('<div class=\"_BA_label _BA_label-left\"><\/div><div class=\"_BA_label _BA_label-right\"><\/div>');\r\n\t\t\t\tlabels = $(comparisonArea).find('._BA_label');\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (showSlice || showHandle || showLabels){ $(comparisonArea).addClass('hasOverlay'); }\r\n\t\tif (horizontalSlice){ $(comparisonArea).addClass('hasHorizontalSlice'); }\r\n\r\n\t\t\/* ========================= Slice display *\/\r\n\t\tif ((showSlice) && (slice !== null)){\r\n\t\t\tif (initialSlicePos === 0){ slice.css('display', 'none'); }\r\n\t\t\tif (!horizontalSlice){\r\n\t\t\t\tposX = elementWidth*initialSlicePos\/100;\r\n\t\t\t\tslice.css('left', posX + 'px');\r\n\t\t\t} else {\r\n\t\t\t\tposY = elementHeight*initialSlicePos\/100;\r\n\t\t\t\tslice.css('top', posY + 'px');\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t\/* ========================= Handle display *\/\r\n\t\tif ((showHandle) && (handle !== null)){\r\n\t\t\thandle.css({\r\n\t\t\t\t'width': handleSize + 'px',\r\n\t\t\t\t'height': handleSize + 'px',\r\n\t\t\t\t'border-radius': handleSize + 'px'\r\n\t\t\t});\r\n\t\t\tif (!horizontalSlice){\r\n\t\t\t\tposY = (elementHeight-handleSize)\/2;\r\n\t\t\t\thandle.css({\r\n\t\t\t\t\t'margin-left': handleSize \/ -2 + 'px',\r\n\t\t\t\t\t'top': posY + 'px',\r\n\t\t\t\t\t'left': posX + 'px'\r\n\t\t\t\t});\r\n\t\t\t} else {\r\n\t\t\t\tposX = (elementWidth-handleSize)\/2;\r\n\t\t\t\thandle.css({\r\n\t\t\t\t\t'margin-top': handleSize \/ -2 + 'px',\r\n\t\t\t\t\t'top': posY + 'px',\r\n\t\t\t\t\t'left': posX + 'px'\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tif (!horizontalSlice){\r\n\t\t\t\tposX = elementWidth*initialSlicePos\/100;\r\n\t\t\t} else {\r\n\t\t\t\tposY = elementHeight*initialSlicePos\/100;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t\/* ========================= Labels display *\/\r\n\t\tif ((showLabels) && (labels !== null)){\r\n\t\t\t$(comparisonArea).find('._BA_label-left').html(labelBefore);\r\n\t\t\t$(comparisonArea).find('._BA_label-right').html(labelAfter);\r\n\t\t\tif (!alwaysShowLabels) {\r\n\t\t\t\tlabels.css('display', 'none');\r\n\t\t\t}\r\n\t\t\tif (horizontalSlice && showLabels){\r\n\t\t\t\tlabels.each(function(){\r\n\t\t\t\t\t$(this).css({ \/\/ Center labels horizontaly (other attributes are set in the stylesheet)\r\n\t\t\t\t\t\t'width': $(this).outerWidth(),\r\n\t\t\t\t\t\t'left': 0,\r\n\t\t\t\t\t\t'right': 0\r\n\t\t\t\t\t});\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (!horizontalSlice){\r\n\t\t\tbeforeElement.css('clip', 'rect(auto,' + posX + 'px , auto, auto)');\r\n\t\t} else {\r\n\t\t\tbeforeElement.css('clip', 'rect(' + posY + 'px, auto, auto, auto)');\r\n\t\t}\r\n\r\n\t\t\/* ========================= Comparison starts *\/\r\n\t\t$(comparisonArea).on('mouseenter touchstart', function() {\r\n\t\t\tif (!keepInPlace) {\r\n\t\t\t\tif (showSlice){ slice.css('display', 'block'); }\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\t\/* ========================= Comparison is running *\/\r\n\t\t$(comparisonArea).on('mousemove touchmove', function(event) {\r\n\t\t\tevent.preventDefault();\r\n\t\t\tpointer = getEvent(event);\r\n\t\t\toffset = $(this).offset();\r\n\t\t\tposX = pointer.pageX - (offset.left);\r\n\t\t\tposY = pointer.pageY - (offset.top);\r\n\r\n\t\t\tif (!horizontalSlice){\r\n\t\t\t\tbeforeElement.css('clip', 'rect(auto,' + posX + 'px, auto, auto)');\r\n\t\t\t} else {\r\n\t\t\t\tbeforeElement.css('clip', 'rect(' + posY + 'px, auto, auto, auto)');\r\n\t\t\t}\r\n\t\t\tif ((showSlice) && (slice !== null)){\r\n\t\t\t\tif (!horizontalSlice){\r\n\t\t\t\t\tslice.css('left', posX + 'px');\r\n\t\t\t\t} else {\r\n\t\t\t\t\tslice.css('top', posY + 'px');\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tif ((showHandle) && (handle !== null)){\r\n\t\t\t\thandle.css({\r\n\t\t\t\t\t'display': 'none',\r\n\t\t\t\t\t'left': posX + 'px',\r\n\t\t\t\t\t'top': posY + 'px'\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t\tif ((showLabels) && (labels !== null)){ labels.css('display', 'block'); }\r\n\t\t});\r\n\r\n\t\t\/* ========================= Comparison ends *\/\r\n\t\t$(comparisonArea).on('mouseleave touchend touchcancel', function() {\r\n\t\t\tif (!keepInPlace) {\r\n\t\t\t\tbeforeElement.css('clip', 'rect(auto, 0px, auto, auto)');\r\n\t\t\t\tif (showSlice){ slice.css('display', 'none'); }\r\n\t\t\t} else {\r\n\t\t\t\tif (showHandle){ handle.css('display', 'block'); }\r\n\t\t\t}\r\n\t\t\tif ((showLabels) && (!alwaysShowLabels)){ labels.css('display', 'none'); }\r\n\t\t});\r\n\t});\r\n}\r\n\r\njQuery(function($){\r\n\t$(window).load(function(){\r\n\t\t\/* ========================= Detecting available comparisons *\/\r\n\t\t$('._BA_comparisonArea').each(function(){\r\n\t\t\tsetupComparison(this);\r\n\t\t});\r\n\t});\r\n});\r\n<\/pre>\r\n<div class=\"taz_jumbotron taz_jumbotron-center\"><h1 class=\"taz_jumbotron-title\">They are using it!<\/h1><p class=\"taz_jumbotron-content\">If you too, are using this tool, let me know and I'll update this list with your name, website and Twitter.<br>\r\nA good way to make your work known!<\/p><\/div>\r\n<div class=\"taz_row\">\r\n\t<div class=\"taz_column taz_column-oneThird\">\r\n\t\t<dl class=\"taz_iconTeaser\"><i class=\"taz_iconTeaser-icon fa fa-camera taz_pull-left\" style=\"font-size:1em;margin-top:1em;\"><\/i><dt class=\"taz_iconTeaser-title\">St\u00e9phane Vilcoq<\/dt><dd class=\"taz_iconTeaser-def\">\r\n\t\t\tPhotographer<br>\r\n\t\t\t<a href=\"http:\/\/www.negarimes.com\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">Website<\/a> | <a href=\"https:\/\/www.facebook.com\/stephane.vilcoq\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">Facebook<\/a>\r\n\t\t<\/dd><\/dl>\r\n\t<\/div>\r\n\t<div class=\"taz_column taz_column-oneThird\">\r\n\t\t<dl class=\"taz_iconTeaser\"><i class=\"taz_iconTeaser-icon fa fa-camera taz_pull-left\" style=\"font-size:1em;margin-top:1em;\"><\/i><dt class=\"taz_iconTeaser-title\">Florian Commaille<\/dt><dd class=\"taz_iconTeaser-def\">\r\n\t\t\tPhotographer<br>\r\n\t\t\t<a href=\"http:\/\/umpo.fr\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">Website<\/a> | <a href=\"https:\/\/twitter.com\/flo_commaille\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">@Flo_Commaille<\/a>\r\n\t\t<\/dd><\/dl>\r\n\t<\/div>\r\n\t<div class=\"taz_column taz_column-oneThird\">\r\n\t\t<dl class=\"taz_iconTeaser\"><i class=\"taz_iconTeaser-icon fa fa-camera taz_pull-left\" style=\"font-size:1em;margin-top:1em;\"><\/i><dt class=\"taz_iconTeaser-title\">Muriel Auvray<\/dt><dd class=\"taz_iconTeaser-def\">\r\n\t\t\tPhotographer<br>\r\n\t\t\t<a href=\"http:\/\/www.murielauvray.com\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">Website<\/a> | <a href=\"https:\/\/twitter.com\/murielauvray\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">@murielauvray<\/a>\r\n\t\t<\/dd><\/dl>\r\n\t<\/div>\r\n<\/div>\r\n<div class=\"taz_row\">\r\n\t<div class=\"taz_column taz_column-oneThird\">\r\n\t\t<dl class=\"taz_iconTeaser\"><i class=\"taz_iconTeaser-icon fa fa-camera taz_pull-left\" style=\"font-size:1em;margin-top:1em;\"><\/i><dt class=\"taz_iconTeaser-title\">S\u00e9bastien Cour<\/dt><dd class=\"taz_iconTeaser-def\">\r\n\t\t\tPhotographer<br>\r\n\t\t\t<a href=\"http:\/\/oscour.smugmug.com\/\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">Website<\/a>\r\n\t\t<\/dd><\/dl>\r\n\t<\/div>\r\n\t<div class=\"taz_column taz_column-oneThird\">\r\n\t\t<dl class=\"taz_iconTeaser\"><i class=\"taz_iconTeaser-icon fa fa-camera taz_pull-left\" style=\"font-size:1em;margin-top:1em;\"><\/i><dt class=\"taz_iconTeaser-title\">Julien Tordjman<\/dt><dd class=\"taz_iconTeaser-def\">\r\n\t\t\tPhotographer<br>\r\n\t\t\t<a href=\"http:\/\/julientordjman.fr\/\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">Website<\/a> | <a href=\"https:\/\/twitter.com\/neoweb001\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">@neoweb001<\/a>\r\n\t\t<\/dd><\/dl>\r\n\t<\/div>\r\n\t<div class=\"taz_column taz_column-oneThird\">\r\n\t\t<dl class=\"taz_iconTeaser\"><i class=\"taz_iconTeaser-icon fa fa-terminal taz_pull-left\" style=\"font-size:1em;margin-top:1em;\"><\/i><dt class=\"taz_iconTeaser-title\">TheKeptPromise<\/dt><dd class=\"taz_iconTeaser-def\">\r\n\t\t\tCr\u00e9ateur de logiciels<br>\r\n\t\t\t<a href=\"http:\/\/www.TheKeptPromise.com\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">Website<\/a> | <a href=\"https:\/\/twitter.com\/TheKeptPromise\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">@TheKeptPromise<\/a>\r\n\t\t<\/dd><\/dl>\r\n\t<\/div>\r\n<\/div>\r\n<div class=\"taz_row\">\r\n\t<div class=\"taz_column taz_column-oneThird\">\r\n\t\t<dl class=\"taz_iconTeaser\"><i class=\"taz_iconTeaser-icon fa fa-camera taz_pull-left\" style=\"font-size:1em;margin-top:1em;\"><\/i><dt class=\"taz_iconTeaser-title\">Christophe Bailleux<\/dt><dd class=\"taz_iconTeaser-def\">\r\n\t\t\tPhotographer<br>\r\n\t\t\t<a href=\"http:\/\/www.cbphoto.fr\/blog\/\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">Website<\/a> | <a href=\"https:\/\/twitter.com\/CBAphoto\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">@CBAphoto<\/a>\r\n\t\t<\/dd><\/dl>\r\n\t<\/div>\r\n\t<div class=\"taz_column taz_column-oneThird\">\r\n\t\t<dl class=\"taz_iconTeaser\"><i class=\"taz_iconTeaser-icon fa fa-camera taz_pull-left\" style=\"font-size:1em;margin-top:1em;\"><\/i><dt class=\"taz_iconTeaser-title\">Olivier Duval<\/dt><dd class=\"taz_iconTeaser-def\">\r\n\t\t\tPhotographer<br>\r\n\t\t\t<a href=\"http:\/\/sharpness.me\/\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">Website<\/a> | <a href=\"https:\/\/twitter.com\/oduval\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">@oduval<\/a>\r\n\t\t<\/dd><\/dl>\r\n\t<\/div>\r\n\t<div class=\"taz_column taz_column-oneThird\">\r\n\t\t<dl class=\"taz_iconTeaser\"><i class=\"taz_iconTeaser-icon fa fa-camera taz_pull-left\" style=\"font-size:1em;margin-top:1em;\"><\/i><dt class=\"taz_iconTeaser-title\">Yannick Lefevre<\/dt><dd class=\"taz_iconTeaser-def\">\r\n\t\t\tPhotographer<br>\r\n\t\t\t<a href=\"http:\/\/yannick-lefevre.fr\/\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">Website<\/a> | <a href=\"https:\/\/twitter.com\/Yannick_Lefevre\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">@Yannick_Lefevre<\/a>\r\n\t\t<\/dd><\/dl>\r\n\t<\/div>\r\n<\/div>\r\n<div class=\"taz_row\">\r\n\t<div class=\"taz_column taz_column-oneThird\">\r\n\t\t<dl class=\"taz_iconTeaser\"><i class=\"taz_iconTeaser-icon fa fa-camera taz_pull-left\" style=\"font-size:1em;margin-top:1em;\"><\/i><dt class=\"taz_iconTeaser-title\">Gr\u00e9goire Delatte<\/dt><dd class=\"taz_iconTeaser-def\">\r\n\t\t\tPhotographer<br>\r\n\t\t\t<a href=\"http:\/\/wabgs.blogspot.com\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">Website<\/a> | <a href=\"https:\/\/twitter.com\/wabgs\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">@wabgs<\/a>\r\n\t\t<\/dd><\/dl>\r\n\t<\/div>\r\n\t<div class=\"taz_column taz_column-oneThird\">\r\n\t\t<dl class=\"taz_iconTeaser\"><i class=\"taz_iconTeaser-icon fa fa-camera taz_pull-left\" style=\"font-size:1em;margin-top:1em;\"><\/i><dt class=\"taz_iconTeaser-title\">Me ^^<\/dt><dd class=\"taz_iconTeaser-def\">\r\n\t\t\tPhotographer - CGArtist<br>\r\n\t\t\t<a href=\"https:\/\/tazintosh.com\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">Website<\/a> | <a href=\"https:\/\/twitter.com\/tazintosh\" target=\"_blank\" class=\"taz_link taz_link-default\"disabled=\"disabled\">@tazintosh<\/a>\r\n\t\t<\/dd><\/dl>\r\n\t<\/div>\r\n\t<div class=\"taz_column taz_column-oneThird\">\r\n\t\t\r\n\t<\/div>\r\n<\/div>\r\n<h1>What else?<\/h1>\r\n<div class=\"taz_panel taz_panel-default\"><div class=\"taz_panel-bodyWrapper\"><div class=\"taz_panel-body\">\r\n\t<div class=\"taz_row\">\r\n\t\t<div class=\"taz_column taz_column-oneThird\">\r\n\t\t\t<p>Use the form following or post a comment at the bottom of this article to share your ideas\/needs. If you make changes to the code, thank you for sharing them by posting a comment explaining the work done, or by sending me an email using this form. You can even attach a file.<\/p>\r\n\t\t\t<p>Many hours have been needed to develop this tool and present it here. Even if it's provided for free, if you think it gives a great service to your readers or customers, you can offer me <em>littl'somethin'<\/em>.<\/p>\r\n\t\t\t<div class=\"taz_buyMeACoffeeLayouter\"><div class=\"taz_buyMeACoffee\"><div class=\"taz_buyMeACoffee_visual\"><\/div><div class=\"taz_buyMeACoffee_text\"><p>This symbolic coffee would be a true expression of your appreciation of this work.<\/p><form action=\"https:\/\/www.paypal.com\/cgi-bin\/webscr\" method=\"post\"><input type=\"hidden\" name=\"cmd\" value=\"_s-xclick\"><input type=\"hidden\" name=\"encrypted\" value=\"-----BEGIN PKCS7-----MIIHTwYJKoZIhvcNAQcEoIIHQDCCBzwCAQExggEwMIIBLAIBADCBlDCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20CAQAwDQYJKoZIhvcNAQEBBQAEgYCRcIqfLE9eZCG7DMgRh2Csm4Ygw\/i10b6q7L0bWfHAiDB06+vMKzZUl8ylBQs\/90g7N4XtFRCV3GJdYzC+em0e50fpQTAg6zqimMUTwQaCxlP6fQ5kzuZK2km9QFKZlIf6hkN9QHNqeJci2FY5MWHMq3d7RrUpO0M2mZBDk+Gt2jELMAkGBSsOAwIaBQAwgcwGCSqGSIb3DQEHATAUBggqhkiG9w0DBwQIfQrPe+LG0v2AgaijAcVZxfVDHWcVRc+d9Mkh2UI3E5mCHraihqvAG3+wNi6ok1infUoEv384QBfbup6n11SlPmcwjZS2KFlMLt0rmzvLY8dM4rRCH35ETYIzizH+elcn8Yg4kRoFFHiTEjuDfcPeF1Po1MWqzLZU+TlwwfvoWYYKvUbJdKjJZJ5HrL4TLg1AR\/VGSWa9shVnGNZQmUlQ+Uw9jh0qtIsbR4KRw3Yv8tF7XPugggOHMIIDgzCCAuygAwIBAgIBADANBgkqhkiG9w0BAQUFADCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20wHhcNMDQwMjEzMTAxMzE1WhcNMzUwMjEzMTAxMzE1WjCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20wgZ8wDQYJKoZIhvcNAQEBBQADgY0AMIGJAoGBAMFHTt38RMxLXJyO2SmS+Ndl72T7oKJ4u4uw+6awntALWh03PewmIJuzbALScsTS4sZoS1fKciBGoh11gIfHzylvkdNe\/hJl66\/RGqrj5rFb08sAABNTzDTiqqNpJeBsYs\/c2aiGozptX2RlnBktH+SUNpAajW724Nv2Wvhif6sFAgMBAAGjge4wgeswHQYDVR0OBBYEFJaffLvGbxe9WT9S1wob7BDWZJRrMIG7BgNVHSMEgbMwgbCAFJaffLvGbxe9WT9S1wob7BDWZJRroYGUpIGRMIGOMQswCQYDVQQGEwJVUzELMAkGA1UECBMCQ0ExFjAUBgNVBAcTDU1vdW50YWluIFZpZXcxFDASBgNVBAoTC1BheVBhbCBJbmMuMRMwEQYDVQQLFApsaXZlX2NlcnRzMREwDwYDVQQDFAhsaXZlX2FwaTEcMBoGCSqGSIb3DQEJARYNcmVAcGF5cGFsLmNvbYIBADAMBgNVHRMEBTADAQH\/MA0GCSqGSIb3DQEBBQUAA4GBAIFfOlaagFrl71+jq6OKidbWFSE+Q4FqROvdgIONth+8kSK\/\/Y\/4ihuE4Ymvzn5ceE3S\/iBSQQMjyvb+s2TWbQYDwcp129OPIbD9epdr4tJOUNiSojw7BHwYRiPh58S1xGlFgHFXwrEBb3dgNbMUa+u4qectsMAXpVHnD9wIyfmHMYIBmjCCAZYCAQEwgZQwgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tAgEAMAkGBSsOAwIaBQCgXTAYBgkqhkiG9w0BCQMxCwYJKoZIhvcNAQcBMBwGCSqGSIb3DQEJBTEPFw0xMjAxMzAwODM4NDJaMCMGCSqGSIb3DQEJBDEWBBSLiWyQtrrCuUCezpU3LCF35ocOsTANBgkqhkiG9w0BAQEFAASBgEuIHdySrnyRZsKvkZrkJYQbwqoe5lC0QyGXwhw0qsT\/zfpaRejc52MOE0xXhRrZCMaNewttOu5ytsyyMA8PwnP3hdQFRCnjKNt0gHY7vZSs3r\/5yTNCvyHNGJByY9tRwVbkmlgddMHzsi3F2ItKTdCOw0KNnkM76SwUgaUC2SYa-----END PKCS7-----\"><input type=\"image\" src=\"http:\/\/tazintosh.com\/images\/buyMeACoffeeButton-En.png\" border=\"0\" name=\"submit\" alt=\"PayPal - The safer, easier way to pay online!\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" border=\"0\" src=\"https:\/\/www.paypalobjects.com\/fr_FR\/i\/scr\/pixel.gif\" width=\"1\" height=\"1\"><\/form><\/div><\/div><\/div>\r\n\t\t<\/div>\r\n\t\t<div class=\"taz_column taz_column-twoThirds\">\r\n\t\t\t<h2>Participate<\/h2>\r\n\t\t\t<div class=\"frm_forms  with_frm_style frm_style_formidable-style\" id=\"frm_form_68_container\" >\n<form enctype=\"multipart\/form-data\" method=\"post\" class=\"frm-show-form  frm_js_validate  frm_ajax_submit  frm_pro_form \" id=\"form_feedback-code\" >\n<div class=\"frm_form_fields \">\n<fieldset>\n\r\n<div class=\"frm_fields_container\">\n<input type=\"hidden\" name=\"frm_action\" value=\"create\" \/>\n<input type=\"hidden\" name=\"form_id\" value=\"68\" \/>\n<input type=\"hidden\" name=\"frm_hide_fields_68\" id=\"frm_hide_fields_68\" value=\"\" \/>\n<input type=\"hidden\" name=\"form_key\" value=\"feedback-code\" \/>\n<input type=\"hidden\" name=\"item_meta[0]\" value=\"\" \/>\n<input type=\"hidden\" id=\"frm_submit_entry_68\" name=\"frm_submit_entry_68\" value=\"2466aeffa4\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/posts\/5509\" \/><div id=\"frm_field_1654_container\" class=\"frm_form_field form-field  frm_required_field frm_none_container frm_first frm_half\">\r\n    <label for=\"field_qh4icy44\" class=\"frm_primary_label\">Name or Nickname\r\n        <span class=\"frm_required\">*<\/span>\r\n    <\/label>\r\n    <input  type=\"text\" id=\"field_qh4icy44\" name=\"item_meta[1654]\" value=\"\"  placeholder=\"Name or Nickname *\" data-reqmsg=\"Name or Nickname cannot be blank.\" aria-required=\"true\" data-invmsg=\"Name or Nickname is invalid\" aria-invalid=\"false\"   \/>\r\n    \r\n    \r\n<\/div>\n<div id=\"frm_field_1655_container\" class=\"frm_form_field form-field  frm_none_container frm_half\">\r\n    <label for=\"field_itt5me44\" class=\"frm_primary_label\">Website\r\n        <span class=\"frm_required\"><\/span>\r\n    <\/label>\r\n    <input type=\"url\" id=\"field_itt5me44\" name=\"item_meta[1655]\" value=\"\"  placeholder=\"Website\" data-invmsg=\"Invalid Website Format.\" aria-invalid=\"false\"  \/>\r\n    \r\n    \r\n<\/div>\n<div id=\"frm_field_1656_container\" class=\"frm_form_field form-field  frm_required_field frm_none_container frm_half frm_first\">\r\n    <label for=\"field_29yf4d44\" class=\"frm_primary_label\">Email\r\n        <span class=\"frm_required\">*<\/span>\r\n    <\/label>\r\n    <input type=\"email\" id=\"field_29yf4d44\" name=\"item_meta[1656]\" value=\"\"  placeholder=\"Email *\" data-reqmsg=\"Email cannot be blank.\" aria-required=\"true\" data-invmsg=\"Invalid Email Format.\" aria-invalid=\"false\"  \/>\r\n    \r\n    \r\n<\/div>\n<div id=\"frm_field_conf_1656_container\" class=\"frm_form_field frm_hidden_container frm_conf_field form-field  frm_required_field frm_none_container frm_half \">\r\n    <label for=\"field_conf_29yf4d44\" class=\"frm_conf_label frm_primary_label\">Confirm Email\r\n        <span class=\"frm_required\">*<\/span>\r\n    <\/label>\r\n    <input type=\"email\" id=\"field_conf_29yf4d44\" name=\"item_meta[conf_1656]\" value=\"\"  placeholder=\"Confirm Email\" data-reqmsg=\"Confirm Email cannot be blank.\" aria-required=\"true\" data-confmsg=\"The entered values do not match\" data-invmsg=\"Invalid Email Format.\" aria-invalid=\"false\"  \/>\r\n    \r\n    \r\n<\/div>\n<div id=\"frm_field_1657_container\" class=\"frm_form_field form-field  frm_top_container\">\r\n    <label for=\"field_oglo0u34\" class=\"frm_primary_label\">Attach a file\r\n        <span class=\"frm_required\"><\/span>\r\n    <\/label>\r\n    <input type=\"hidden\"  data-invmsg=\"Attach a file is invalid\" aria-invalid=\"false\"   name=\"item_meta[1657]\"  value=\"\" data-frmfile=\"1657\" \/>\n\n<div class=\"frm_dropzone frm_single_upload frm_clearfix\" id=\"file1657_dropzone\" role=\"group\" >\n\t<div class=\"fallback\">\n\t\t<input type=\"file\" name=\"file1657\" id=\"field_oglo0u34\"\n\t\t\t data-invmsg=\"Attach a file is invalid\" aria-invalid=\"false\"  \t\t\t\/>\n\t\t\t\t<div class=\"frm_clearfix \"><\/div>\n\t<\/div>\n\t<div class=\"dz-message needsclick\">\n\t\t\t\t<svg  viewBox=\"0 0 18 18\" class=\"frmsvg frm-svg-icon\">\n\t<path viewBox=\"0 0 18 18\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.2 4v8a.8.8 0 001.5 0V4l2.1 2.2A.7.7 0 1013 5L9.5 1.7a.7.7 0 00-1.1 0L5.1 5.2a.8.8 0 001 1l2.1-2zm7.6 4.3c.4 0 .7.3.7.7v6.8c0 .4-.3.7-.8.7H2.3a.8.8 0 01-.8-.8V9A.8.8 0 013 9v6h12V9c0-.4.3-.8.8-.8z\"><\/path>\n<\/svg>\t\t<span class=\"frm_upload_text\"><button type=\"button\" aria-label=\"Attach a file. Drop a file here or click to upload. Maximum file size: 268.44MB\">Drop a file here or click to upload<\/button><\/span>\n\t\t<span class=\"frm_compact_text\"><button type=\"button\" aria-label=\"Attach a file. Choose File. Maximum file size: 268.44MB\">Choose File<\/button><\/span>\n\t\t<div class=\"frm_small_text\">\n\t\t\t<p>Maximum file size: 268.44MB<\/p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\t\r\n    \r\n    \r\n<\/div>\n<div id=\"frm_field_1658_container\" class=\"frm_form_field form-field  frm_required_field frm_top_container\">\r\n    <label for=\"field_9jv0r144\" class=\"frm_primary_label\">ChangeLog\r\n        <span class=\"frm_required\">*<\/span>\r\n    <\/label>\r\n    <textarea name=\"item_meta[1658]\" id=\"field_9jv0r144\" rows=\"5\"  data-reqmsg=\"ChangeLog cannot be blank.\" aria-required=\"true\" data-invmsg=\"ChangeLog is invalid\" aria-invalid=\"false\"  ><\/textarea>\r\n    \r\n    \r\n<\/div>\n<div id=\"frm_field_1659_container\" class=\"frm_form_field form-field  frm_none_container taz_recaptcha\">\r\n    <label  class=\"frm_primary_label\">reCAPTCHA\r\n        <span class=\"frm_required\"><\/span>\r\n    <\/label>\r\n    <div  id=\"field_zlmll\" class=\"frm-g-recaptcha\" data-sitekey=\"6Lfe1ysUAAAAAAF7aTql6UJ-MoeGu8gIk1hTJtGa\" data-size=\"invisible\" data-theme=\"light\"><\/div>\r\n    \r\n    \r\n<\/div>\n\t<input type=\"hidden\" name=\"item_key\" value=\"\" \/>\n\t\t\t<div id=\"frm_field_1796_container\">\n\t\t\t<label for=\"field_le5ho\"  style=\"display:none;\">\n\t\t\t\tIf you are human, leave this field blank.\t\t\t<\/label>\n\t\t\t<input  id=\"field_le5ho\" type=\"text\" class=\"frm_form_field form-field frm_verify\" name=\"item_meta[1796]\" value=\"\"  style=\"display:none;\" \/>\n\t\t<\/div>\n\t\t<input name=\"frm_state\" type=\"hidden\" value=\"bGeenNkzkpLybfypBkM4joGGGMb\/JLPB9kfexTiKFi4KaeKE8jGqvMPIYadgCB0d\" \/><div class=\"frm_submit\">\r\n\r\n<input type=\"submit\" value=\"Submit\"  class=\"frm_final_submit\" formnovalidate=\"formnovalidate\" \/>\r\n<img decoding=\"async\" class=\"frm_ajax_loading\" src=\"https:\/\/vpn.tazintosh.com\/wordpress\/wp-content\/plugins\/formidable\/images\/ajax_loader.gif\" alt=\"Sending\" style=\"visibility:hidden;\" \/>\r\n\r\n<\/div><\/div>\n<\/fieldset>\n<\/div>\n\n<p style=\"display: none !important;\" class=\"akismet-fields-container\" data-prefix=\"ak_\"><label>&#916;<textarea name=\"ak_hp_textarea\" cols=\"45\" rows=\"8\" maxlength=\"100\"><\/textarea><\/label><input type=\"hidden\" id=\"ak_js_1\" name=\"ak_js\" value=\"5\"\/><script>document.getElementById( \"ak_js_1\" ).setAttribute( \"value\", ( new Date() ).getTime() );<\/script><\/p><\/form>\n<\/div>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div><\/div><\/div>\r\n<h1>Also discover:<\/h1>\r\n<figure id=\"taz_imageElem-293961440\" class=\"taz_imageElem taz_largeImage\"><div class=\"taz_imageWrapper taz_shadow taz_rounded\" style=\"position: relative; background-color:#545047;\"><a href=\"\/?p=5994\" target=\"_blank\" class=\"taz_imageLink\"><img decoding=\"async\" class=\"taz_image\" src=\"https:\/\/vpn.tazintosh.com\/wordpress\/wp-content\/themes\/Tazintosh\/inc\/taz_imagePlaceholder.php?width=968&height=405\" data-src=\"\/wordpress\/wp-content\/uploads\/article-animationFeatureSourceCode-featured.jpg\" ><\/a><\/div><\/figure>","protected":false},"excerpt":{"rendered":"<p class=\"taz_post-excerpt\">Available for free: the source code of my Before|After adjustment comparison feature.<br \/>\nWith a gesture and greatest ease, compare two different processing of a picture.<br \/>\nIdeal to offer your readers a tool to make them appreciate your work, furthermore in a fun way!<\/p>\n","protected":false},"author":1,"featured_media":12106,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1237,1255,1238,1258,2047],"tags":[2058,2011,2059,2057,2055,2056],"class_list":["post-5509","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-article-tutorials-diy","category-free-downloads","category-article-tutorials-diy-photography","category-free-downloads-ui-web-design","category-webdesign-en","tag-css-en","tag-free","tag-html-en","tag-javascript-en","tag-jquery-en","tag-mootools-en"],"acf":[],"_links":{"self":[{"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/posts\/5509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/comments?post=5509"}],"version-history":[{"count":0,"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/posts\/5509\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/media\/12106"}],"wp:attachment":[{"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/media?parent=5509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/categories?post=5509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vpn.tazintosh.com\/en\/wp-json\/wp\/v2\/tags?post=5509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}