{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","params":[],"results":{"codes":[]},"settings":""},"next":{"description":"","pages":[]},"title":"Play and Stop GIFs","type":"basic","slug":"tutorial-play-and-stop-gifs","excerpt":"","body":"When loading multiple GIFs on a page, it's often better to only have them animate when a user performs a function.\n\nThis is a demo of using Embedly Display with animate=false to only animate the GIF when the user hovers over the image. Hover over the images below to see this in action.\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Fgdk6r6qL%2F1%2F%3Fheight%3D450%26tabs%3Dresult%2Cjs%2Chtml%2Ccss&src=https%3A%2F%2Fjsfiddle.net%2Fgdk6r6qL%2F1%2Fembedded%2Fresult%2Cjs%2Chtml%2Ccss%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\\\" width=\\\"600\\\" height=\\\"450\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://jsfiddle.net/gdk6r6qL/1/?height=450&tabs=result,js,html,css\",\n  \"title\": \"Edit fiddle - JSFiddle\",\n  \"favicon\": \"https://jsfiddle.net/favicon.png\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" $.embedly.defaults.key = '1d5c48f7edc34c54bdae4c37b681ea2b';\\n\\n    $('.gifs a').embedly({\\n        display: function(obj) {\\n            if (obj.type === 'photo') {\\n\\n                var $this = $(this);\\n\\n                // Create the static image src with Embedly Display.\\n                var src = $.embedly.display.display(obj.url, {\\n                    query: {\\n                        animate: false\\n                    }\\n                });\\n\\n                // Add static gif placeholder to the parent\\n                $this.html('<img class=\\\"gif-holder\\\" src=\\\"' + src + '\\\" />');\\n\\n                // Start preloading the actually gif.\\n                $this.append('<img class=\\\"gif-preload\\\" src=\\\"' + obj.url + '\\\" />');\\n\\n                // Create a promise so we can keep track of state.\\n                $this.data('promise', $.Deferred());\\n\\n                // Get the element we added.\\n                var elem = $this.find('.gif-preload').get(0);\\n\\n                // If the image is not in cache then onload will fire when it is.\\n                elem.onload = function() {\\n                    $this.data('promise').resolve();\\n                };\\n\\n                // If the image is already in the browsers cache call the handler.\\n                if (elem.complete) {\\n                    $this.data('promise').resolve();\\n                }\\n                // Set the static gif url so we can use it later.\\n                $(this).data('static_url', src);\\n            } else {\\n                // remove li if it's not an image.\\n                $(this).parent().remove();\\n            }\\n        }\\n    }).on('mouseenter', function() {\\n        var $this = $(this);\\n        animationStart($this)\\n\\n\\n\\n    }).on('mouseleave', function() {\\n        var $this = $(this);\\n        animationEnd($this);\\n    });\\n\\n    function animationStart($this){\\n        // Set the hover state to true so that the load function knows to run.\\n        $this.data('hover', true);\\n\\n        // Create a function to load the gif into the image.\\n        var load = function() {\\n            if ($this.data('hover') === true) {\\n                // Remove the loading image if there is one\\n                $this.find('.gif-loading').remove();\\n\\n                // Swap out the static src for the actually gif.\\n                $this.find('img.gif-holder').attr('src', $this.data('embedly').url);\\n            }\\n        };\\n        // Add the load function to the done callback. If it's already resolved\\n        // this will fire immediately.\\n        $this.data('promise').done(load);\\n\\n        // Add a spinner if it's not going to play right away.\\n        if ($this.data('promise').state() === 'pending') {\\n            // Add a loading spinner.\\n            $this.append('<i class=\\\"gif-loading fa fa-spinner fa fa-spin\\\"></i>');\\n\\n            // we need to center it over the image.\\n            $this.find('.gif-loading').css({\\n                top: $this.height() / 2 - 20,\\n                left: $this.width() / 2 - 20\\n            });\\n        }\\n    }\\n\\n    function animationEnd($this){\\n        // Make sure the load function knows we are no longer in a hover state.\\n        $this.data('hover', false);\\n\\n        // Remove the spiner if it's there.\\n        $this.find('.gif-loading').remove();\\n\\n        // Set the src to the static url.\\n        $this.find('img.gif-holder').attr('src', $this.data('static_url'));\\n    }\",\n      \"language\": \"javascript\"\n    },\n    {\n      \"code\": \".gifs a {\\n  position: relative;\\n  display: block;\\n}\\n\\n.gif-preload {\\n  display: none;\\n}\\n\\n.gif-loading {\\n  position: absolute;\\n  width: 40px;\\n  height: 40px;\\n  font-size: 40px;\\n  color: #fff;\\n  top: 0;\\n  left: 0;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]","updates":["57b5898cb9d98117004b9e62"],"order":3,"isReference":true,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"568bdbf9e3e30f0d0021e07c","category":{"sync":{"isSync":false,"url":""},"pages":["5666dda06819320d000c2e19","567856b9e5da8d0d00591c66","567861b8e5da8d0d00591c7c","568bdbf9e3e30f0d0021e07c","568be56983d2061900d86ce9","5697f7a60b09a41900b245d7","56abb8b49327b30d00f7c234","56d088977c2e100b000af8f0"],"title":"Tutorials","slug":"tutorials","order":4,"from_sync":false,"reference":true,"_id":"5666dac5d784a70d00397bcb","createdAt":"2015-12-08T13:27:33.662Z","__v":8,"project":"564de2dbfe07a81700b5c3a5","version":"564de2dbfe07a81700b5c3a8"},"createdAt":"2016-01-05T15:06:33.884Z","githubsync":"","version":{"version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["564de2ddfe07a81700b5c3a9","564df317826645210097a890","564df3217c8f372b00b934df","564e5227c3553e0d003e53ba","5666dac5d784a70d00397bcb","56cd08ddd98d851d00c0c3bd","56e9a50946bfd60e008840a7","5718e37bf8f7de1900683fad","58c3308dfedf070f0043b72c","58ce99c75457d02300560c0a"],"_id":"564de2dbfe07a81700b5c3a8","project":"564de2dbfe07a81700b5c3a5","__v":10,"createdAt":"2015-11-19T14:55:23.838Z","releaseDate":"2015-11-19T14:55:23.837Z"},"__v":7,"project":"564de2dbfe07a81700b5c3a5","user":"564de2b4fe07a81700b5c3a4","parentDoc":null}

Documentation

API

JavaScript

Player.js

Tutorials

Video

Integrations

Play and Stop GIFs

When loading multiple GIFs on a page, it's often better to only have them animate when a user performs a function. This is a demo of using Embedly Display with animate=false to only animate the GIF when the user hovers over the image. Hover over the images below to see this in action. [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Fgdk6r6qL%2F1%2F%3Fheight%3D450%26tabs%3Dresult%2Cjs%2Chtml%2Ccss&src=https%3A%2F%2Fjsfiddle.net%2Fgdk6r6qL%2F1%2Fembedded%2Fresult%2Cjs%2Chtml%2Ccss%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\" width=\"600\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://jsfiddle.net/gdk6r6qL/1/?height=450&tabs=result,js,html,css", "title": "Edit fiddle - JSFiddle", "favicon": "https://jsfiddle.net/favicon.png" } [/block] [block:code] { "codes": [ { "code": " $.embedly.defaults.key = '1d5c48f7edc34c54bdae4c37b681ea2b';\n\n $('.gifs a').embedly({\n display: function(obj) {\n if (obj.type === 'photo') {\n\n var $this = $(this);\n\n // Create the static image src with Embedly Display.\n var src = $.embedly.display.display(obj.url, {\n query: {\n animate: false\n }\n });\n\n // Add static gif placeholder to the parent\n $this.html('<img class=\"gif-holder\" src=\"' + src + '\" />');\n\n // Start preloading the actually gif.\n $this.append('<img class=\"gif-preload\" src=\"' + obj.url + '\" />');\n\n // Create a promise so we can keep track of state.\n $this.data('promise', $.Deferred());\n\n // Get the element we added.\n var elem = $this.find('.gif-preload').get(0);\n\n // If the image is not in cache then onload will fire when it is.\n elem.onload = function() {\n $this.data('promise').resolve();\n };\n\n // If the image is already in the browsers cache call the handler.\n if (elem.complete) {\n $this.data('promise').resolve();\n }\n // Set the static gif url so we can use it later.\n $(this).data('static_url', src);\n } else {\n // remove li if it's not an image.\n $(this).parent().remove();\n }\n }\n }).on('mouseenter', function() {\n var $this = $(this);\n animationStart($this)\n\n\n\n }).on('mouseleave', function() {\n var $this = $(this);\n animationEnd($this);\n });\n\n function animationStart($this){\n // Set the hover state to true so that the load function knows to run.\n $this.data('hover', true);\n\n // Create a function to load the gif into the image.\n var load = function() {\n if ($this.data('hover') === true) {\n // Remove the loading image if there is one\n $this.find('.gif-loading').remove();\n\n // Swap out the static src for the actually gif.\n $this.find('img.gif-holder').attr('src', $this.data('embedly').url);\n }\n };\n // Add the load function to the done callback. If it's already resolved\n // this will fire immediately.\n $this.data('promise').done(load);\n\n // Add a spinner if it's not going to play right away.\n if ($this.data('promise').state() === 'pending') {\n // Add a loading spinner.\n $this.append('<i class=\"gif-loading fa fa-spinner fa fa-spin\"></i>');\n\n // we need to center it over the image.\n $this.find('.gif-loading').css({\n top: $this.height() / 2 - 20,\n left: $this.width() / 2 - 20\n });\n }\n }\n\n function animationEnd($this){\n // Make sure the load function knows we are no longer in a hover state.\n $this.data('hover', false);\n\n // Remove the spiner if it's there.\n $this.find('.gif-loading').remove();\n\n // Set the src to the static url.\n $this.find('img.gif-holder').attr('src', $this.data('static_url'));\n }", "language": "javascript" }, { "code": ".gifs a {\n position: relative;\n display: block;\n}\n\n.gif-preload {\n display: none;\n}\n\n.gif-loading {\n position: absolute;\n width: 40px;\n height: 40px;\n font-size: 40px;\n color: #fff;\n top: 0;\n left: 0;\n}", "language": "css" } ] } [/block]