{"__v":5,"_id":"568bdbf9e3e30f0d0021e07c","category":{"__v":8,"_id":"5666dac5d784a70d00397bcb","pages":["5666dda06819320d000c2e19","567856b9e5da8d0d00591c66","567861b8e5da8d0d00591c7c","568bdbf9e3e30f0d0021e07c","568be56983d2061900d86ce9","5697f7a60b09a41900b245d7","56abb8b49327b30d00f7c234","56d088977c2e100b000af8f0"],"project":"564de2dbfe07a81700b5c3a5","version":"564de2dbfe07a81700b5c3a8","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-12-08T13:27:33.662Z","from_sync":false,"order":6,"slug":"tutorials","title":"Tutorials"},"parentDoc":null,"project":"564de2dbfe07a81700b5c3a5","user":"564de2b4fe07a81700b5c3a4","version":{"__v":8,"_id":"564de2dbfe07a81700b5c3a8","project":"564de2dbfe07a81700b5c3a5","createdAt":"2015-11-19T14:55:23.838Z","releaseDate":"2015-11-19T14:55:23.837Z","categories":["564de2ddfe07a81700b5c3a9","564df317826645210097a890","564df3217c8f372b00b934df","564e5227c3553e0d003e53ba","5666dac5d784a70d00397bcb","56cd08ddd98d851d00c0c3bd","56e9a50946bfd60e008840a7","5718e37bf8f7de1900683fad"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"createdAt":"2016-01-05T15:06:33.884Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"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\": \"$('.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, {query: {animate:false} });\\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 \\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}).on('mouseleave', function(){\\n  var $this = $(this);\\n \\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]","excerpt":"","slug":"tutorial-play-and-stop-gifs","type":"basic","title":"Play and Stop GIFs"}

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": "$('.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, {query: {animate:false} });\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 \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}).on('mouseleave', function(){\n var $this = $(this);\n \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]