{"id":7862,"date":"2018-11-11T07:01:29","date_gmt":"2018-11-11T07:01:29","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=7862"},"modified":"2022-11-23T06:32:46","modified_gmt":"2022-11-23T06:32:46","slug":"jquery-images-compare","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/jquery-images-compare\/","title":{"rendered":"JQUERY IMAGES COMPARE"},"content":{"rendered":"<div class=\"info-box\">\n<div class=\"info info-author\"><em><span style=\"text-decoration: underline;\"><strong>Made by:<\/strong><\/span><\/em><\/p>\n<ul>\n<li>Sylvain Combes<\/li>\n<li class=\".last-child\"><time>June 6, 2016<\/time><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><em><span style=\"text-decoration: underline;\"><strong><span class=\"about-the-item\">About the plugin:<\/span><\/strong><\/span><\/em><\/p>\n<p>This is an amazing and cool jQuery plugin for comparing two images.<\/p>\n<p><em><span style=\"text-decoration: underline;\"><strong><span class=\"about-the-item\">Features:<\/span><\/strong><\/span><\/em><\/p>\n<ul class=\"article-list\">\n<li>compatibility: ie9+<\/li>\n<li>effort to put appearance via css (easier to skin\/override)<\/li>\n<li>touch friendly, mouse drag, with a big thanks to Hammerjs<\/li>\n<li>responsive<\/li>\n<li>you can listen to change event to add some of your logic<\/li>\n<li>you can change the value from external code<\/li>\n<li>animation option when changing the value<\/li>\n<li>optional alternative interaction modes: drag by default (the recommended one), click and mousemove (warning desktop friendly only for this settings)<\/li>\n<li class=\".last-child\">size: ~2k of js and ~0.5k of css (minified and gzipped)<\/li>\n<\/ul>\n<a href=\"https:\/\/github.com\/sylvaincombes\/jquery-images-compare\/archive\/master.zip\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n<a href=\"https:\/\/github.com\/sylvaincombes\/jquery-images-compare\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Github Page<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Made by: Sylvain Combes June 6, 2016 About the plugin: This is an amazing and cool jQuery plugin for comparing two images. Features: compatibility: ie9+ effort to put appearance via css (easier to skin\/override) touch friendly, mouse drag, with a big thanks to Hammerjs responsive you can listen to change event to add some of your logic you can change the value from external code animation option when changing the value optional alternative interaction modes: drag by default (the recommended one), click and mousemove (warning desktop friendly only for this settings) size: ~2k of js and ~0.5k of css (minified and gzipped)<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":7864,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2009],"tags":[583,2011,2015],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/7862"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=7862"}],"version-history":[{"count":2,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/7862\/revisions"}],"predecessor-version":[{"id":35473,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/7862\/revisions\/35473"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/7864"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=7862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=7862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=7862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}