getty-embeddy
Version:
Embed Gettyimages photos (iFrame) using Oembed.
48 lines (43 loc) • 3.53 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>getty-embeddy</title>
</head>
<body>
<div id="parent">
<div class="js-getty-embeddy-el" data-getty-embeddy-id="83454805">Holder...</div>
<div class="js-getty-embeddy-el" data-getty-embeddy-id="604533586999999">Holder...</div>
<div class="js-getty-embeddy-el">Holder...</div>
<div class="js-getty-embeddy-el" data-getty-embeddy-id="603705212">Holder...</div>
<div class="js-getty-embeddy-el" data-getty-embeddy-id="603563138">Holder...</div>
</div>
<div class="js-getty-embeddy-el" data-getty-embeddy-id="603557788">I have no parent :'(</div>
<div id="embed" class="js-getty-embeddy-el" data-getty-embeddy-id="511550168">Me too, but I will be embedded soon!</div>
<div id="embed_id" class="js-getty-embeddy-el">I don't even have an id :O</div>
<script src="http://localhost:8080/dist/getty-embeddy.js"></script>
<script>
var gettyEmbeddy = new GettyEmbeddy({
parentEl: document.getElementById('parent'),
selectorClass: 'js-getty-embeddy-el',
dataAttr: 'getty-embeddy-id',
//loaderImgSrc: false,
loaderImgSrc: 'data:image/gif;base64,R0lGODlhkAGQAcIHALMAErMAE7QAErQAE7QAFLUAE7UAFP///yH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggR0lNUCBvbiBhIE1hYwAh+QQFBQAHACwAAAAAkAGQAQAD/ni63P4wykmrvTjrzbv/YCiOZGmeaKqubOu+cCzPdG3feK7vfO//wKBwSCwaj8ikcslsOp/QqHRKrVqv2Kx2y+16v+CweEwum8/otHrNbrvf8Lh8Tq/b7/i8fs/v+/+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbnJ2en6ChoqOkpaanqKmqq6ytrq+wsbKztLW2t7i5uru8vb6/wMHCw8TFxsfIycrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6uvs7e7v8PHy8/T19vf4+fr7/P3+/wADChxIsKDBgwgTKlzIsKHDhxAjSpxIsaLFixgzatzI/rGjx48gQ4ocSbKkyZMoU6pcybKly5cwY8qcSbOmzZs4c+rcybOnz59AgwodSrSo0aNIkypdyrSp06dQo0qdSrWq1atYs2rdyrWr169gw4odS7as2bNo06pdy7at27dw48qdS7eu3bt48+rdy7ev37+AAwseTLiw4cOIEytezHiqgAKQDRRovACy5cuTFw/AzHmAYs6gFW8GfXkx6cueE48+nTkxa8iLH7NmLJu0AcasBTR+3bg2aAK0XwfAzdv0a93GWd/+/Lp1YgLNGa8mnTp5aMoHAKxGjr279+/gw4sfT768+fPo06tfz769+/fw48ufT7++/fv48+vfz7+/oP//AAYo4IAEFmjggQgmqOCCDDbo4IMQRijhhBRWaOGFGGao4YYcdujhhyCGKOKIJJZo4okopqjiiiy26OKLMMYo44w01mjjjTjmqOOOPPbo449ABinkkEQWaeSRSCap5JJMNunkk1BGKeWUVFZp5ZVYZqnlllx26eWXYIYp5phklmnmmWimqeaabLbp5ptwxinnnHTWaeedeOap555YJgAAIfkEBQUABwAsxwC9AAkAFgAAAy14UnD+ULxCawnH6k0Hd5oEVgRUDVBWpCD7YCwFm1RJU+JoTZvO/ZzZI/dKJQAAIfkEBQUABwAsyAC9AAkAFgAAAyhYUtdeELpJ64y4jMz58Q1GSVY5lJBQYeeTqV+3dYwFU4RlhOJE3I4EACH5BAUFAAcALMcAvQALABYAAAMleGfa/hCOSKtVJevNu88CpgmTIwQWUXFl8xXiK8MXhda4JdBPAgAh+QQFBQAHACzHAL0ADAAWAAADIVgq1/4wykmrveMexfvyIAF6wmia5VkwWjupbpTFxwBMCQAh+QQFBQAHACzHAL0ACwAWAAADIHhnpf4wyknrLDjrZqWIwgAJQUV0ioiuLFu2itEKHJQAACH5BAUFAAcALMcAvQAKABYAAAMYeCfa/tCFSKu9OKtix2Xdd3maA5YlcTYJACH5BAEFAAcALMgAvQAIABYAAAMgKAXX7uLJSd+oL0oyL/5HUIkUR2lg6hRsy04ktBZxkwAAOw==', //provide another base64 encoded loader or false to disable
onLoadFail: function(el, reason) {
if (el) {
el.innerHTML = '<div style="color:red;">I should fail, this is why:' + reason + '</div>';
}
},
loaderCss: 'margin:auto;display:block;top:50%;position:relative;width:50px;border:solid 1px red', // the css to use for the loader element
embedDelayDuration: 0, // the time (in milliseconds) to delay the embedAll process for better performance, set to 0 to disable
});
gettyEmbeddy.embedAll();
setTimeout(function() {
gettyEmbeddy.embed(document.getElementById('embed'));
}, 3000);
setTimeout(function() {
gettyEmbeddy.embed(document.getElementById('embed_id'), '465896106');
}, 5000);
</script>
</body>
</html>