StickerYou Blog

"\u003cstyle\u003e\t\t* {\t\t\tbox-sizing: border-box;\t\t}\t\t.img-comp-container {\t\t\tposition: relative;\t\t\theight: 400px;\t\t\t/*should be the same height as the images*/\t\t}\t\t.img-comp-img {\t\t\tposition: absolute;\t\t\toverflow: hidden;\t\t}\t\t.img-comp-img img {\t\t\tdisplay: block;\t\t\tvertical-align: middle;\t\t}\t\t.img-comp-slider {\t\t\tposition: absolute;\t\t\tz-index: 9;\t\t\tcursor: ew-resize;\t\t\t/*set the appearance of the slider:*/\t\t\twidth: 30px;\t\t\theight: 30px;\t\t\tbackground-color: #01acdc;\t\t\topacity: 1;\t\t\tborder-radius: 50%;\t\t}\t.blog article img {\tmax-width: inherit!important;\t\u003c/style\u003e\u003cscript\u003e\t\tfunction initComparisons() { var x, i; /*find all elements with an \"overlay\" class:*/ x = document.getElementsByClassName(\"img-comp-overlay\"); for (i = 0; i \u003c x.length; i++) { /*once for each \"overlay\" element: pass the \"overlay\" element as a parameter when executing the compareImages function:*/ compareImages(x[i]); } function compareImages(img) { var slider, img, clicked = 0, w, h; /*get the width and height of the img element*/ w = img.offsetWidth; h = img.offsetHeight; /*set the width of the img element to 50%:*/ img.style.width = (w / 2) + \"px\"; /*create slider:*/ slider = document.createElement(\"DIV\"); slider.setAttribute(\"class\", \"img-comp-slider\"); /*insert slider*/ img.parentElement.insertBefore(slider, img); /*position the slider in the middle:*/ slider.style.top = (h / 2) - (slider.offsetHeight / 2) + \"px\"; slider.style.left = (w / 2) - (slider.offsetWidth / 2) + \"px\"; /*execute a function when the mouse button is pressed:*/ slider.addEventListener(\"mousedown\", slideReady); /*and another function when the mouse button is released:*/ window.addEventListener(\"mouseup\", slideFinish); /*or touched (for touch screens:*/ slider.addEventListener(\"touchstart\", slideReady); /*and released (for touch screens:*/ window.addEventListener(\"touchend\", slideFinish); function slideReady(e) { /*prevent any other actions that may occur when moving over the image:*/ e.preventDefault(); /*the slider is now clicked and ready to move:*/ clicked = 1; /*execute a function when the slider is moved:*/ window.addEventListener(\"mousemove\", slideMove); window.addEventListener(\"touchmove\", slideMove); } function slideFinish() { /*the slider is no longer clicked:*/ clicked = 0; } function slideMove(e) { var pos; /*if the slider is no longer clicked, exit this function:*/ if (clicked == 0) return false; /*get the cursor\u0027s x position:*/ pos = getCursorPos(e) /*prevent the slider from being positioned outside the image:*/ if (pos \u003c 0) pos = 0; if (pos \u003e w) pos = w; /*execute a function that will resize the overlay image according to the cursor:*/ slide(pos); } function getCursorPos(e) { var a, x = 0; e = e || window.event; /*get the x positions of the image:*/ a = img.getBoundingClientRect(); /*calculate the cursor\u0027s x coordinate, relative to the image:*/ x = e.pageX - a.left; /*consider any page scrolling:*/ x = x - window.pageXOffset; return x; } function slide(x) { /*resize the image:*/ img.style.width = x + \"px\"; /*position the slider:*/ slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + \"px\"; } }}\t\u003c/script\u003e\u003ch1\u003eBefore \u0026amp; After Images\u003c/h1\u003e\u003cp\u003eClick and slide the blue slider to compare two images:\u003c/p\u003e\u003cdiv class=\"img-comp-container\"\u003e\u003cdiv class=\"img-comp-img\"\u003e\u003cimg src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"//d3ccuprjuqkp1j.cloudfront.net/BlogImages/2020/2021-trends/01 IMG 10-21 5 Packaging Trends You Should Be Leveraging 600x400.jpg\" width=\"600\" height=\"400\" class=\"lazy\"/\u003e\u003c/div\u003e\u003cdiv class=\"img-comp-img img-comp-overlay\"\u003e\u003cimg src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"//d3ccuprjuqkp1j.cloudfront.net/BlogImages/2020/2021-trends/02 IMG 10-21 5 Packaging Trends You Should Be Leveraging 600x400.jpg\" width=\"600\" height=\"400\" class=\"lazy\"/\u003e\u003c/div\u003e\u003c/div\u003e\u003cbr /\u003e\u003cbr /\u003e\u003cdiv class=\"img-comp-container\"\u003e\u003cdiv class=\"img-comp-img\"\u003e\u003cimg src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"//d3ccuprjuqkp1j.cloudfront.net/BlogImages/2020/2021-trends/04%20IMG%2010-21%205%20Packaging%20Trends%20You%20Should%20Be%20Leveraging%20600x400.jpg\" width=\"600\" height=\"400\" class=\"lazy\"/\u003e\u003c/div\u003e\u003cdiv class=\"img-comp-img img-comp-overlay\"\u003e\u003cimg src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"//d3ccuprjuqkp1j.cloudfront.net/BlogImages/2020/2021-trends/05%20IMG%2010-21%205%20Packaging%20Trends%20You%20Should%20Be%20Leveraging%20600x400.jpg\" width=\"600\" height=\"400\" class=\"lazy\"/\u003e\u003c/div\u003e\u003c/div\u003e\u003cscript\u003e\t\t\t\t/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/initComparisons();\t\t\t\u003c/script\u003e\u003cp\u003eMore text before end of blog, did not work on mobile, responsive size and touch slider.\u003c/p\u003e"

StickerYou Blog

TEST TEST

January 1, 2021 |

Before & After Images

Follow Us

Categories

Featured Posts

Top Products

Shop By Format

Shop By Material

Other Sticker Products

Shop Roll Labels

Shop By Application

Other Label Products

Shop Wall Decals

Shop Window Decals

Shop Floor Decals & More

Custom Tattoos

Specialty Tattoos

Solid Iron-Ons

Iron-On Labels

Iron-On Lettering Transfers

Shop Magnets

Car Magnets

Fridge Magnets

Shop Packaging Pouches

Flat Pouches

Stand-Up Pouches

Shop Static Cling Pages

Shop Large Cling Decals

Most Popular

Make Your Own Yard Sign

Shop Yard Sign Templates

StickerYou Blog

Before & After Images

Follow Us

Categories

Featured Posts

Top Products