{"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}