<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; } #pictureframe { padding: 0px; margin: 0px auto; border: none; width: 640px; height: 1280px; } #instabox { margin: 0 auto; display: table; border: none; margin-top: 0px; text-align: left; float:left; } #box { margin: 0 auto; margin-top: 40px; display: table; /* border: black solid 1px;*/ border: none; } #headline { font-weight: bold; } .super { float: left; margin: 0px; width: 320px; height: 320px; } .container { width: 320px; height: 320px; margin: 0px auto; display: table-cell; vertical-align: middle; text-align: center; } </style> <script type="text/javascript" src="instafeed.min.js"></script> <script> var consdebug = false; var url,id; var numPics = 0; var id; var maxImages = 8; var currentIndex = 0; // which picture are we updating next? inStore = new Array(); // make maxImages img-nodes function mkImages(maxImages) { for (numPics=0; numPics < maxImages;numPics++) { var parent = document.getElementById('showcase'); var superdiv = document.createElement('div'); superdiv.setAttribute('class','super'); var newdiv = document.createElement('div'); newdiv.setAttribute('class','container'); newdiv.setAttribute('style','vertical-align: middle;'); var newimg = document.createElement('img'); var imgIdName = 'img'+numPics; newimg.setAttribute('id',imgIdName); newimg.setAttribute('src','keepcalm2' + ("00" + numPics).slice(-2) + '.jpg'); newimg.setAttribute('width',320); newimg.setAttribute('height',320); newimg.setAttribute('style','opacity: 1'); newdiv.appendChild(newimg); superdiv.appendChild(newdiv); parent.appendChild(superdiv); } var newdiv = document.createElement('div'); newdiv.setAttribute('style','clear:both;'); parent.appendChild(newdiv); } // flips images out and back in // sluggish on slow machines.. the RPI will suffer function animateOut(t,n) { //t.src=n; return true; // uncomment this line if the there are _lots_ of pictures coming in var target = t; maxh = 320; maxw = 320; minh = 0; var b = t; var h = t.style.height; h = h.replace('px',''); if (!h) { h = 1; } var direction = 0; var timer = setInterval( function() { if (h > minh && !direction) { h = parseInt(h * 0.8); b.style.height = h+'px'; b.style.width = h+'px'; } else if (h == 0) { b.src=n; direction == 1; clearInterval(timer); h = 1; if (consdebug) { console.log('og så blæser vi op igen..' + h); } var t2 = setTimeout( function() { var timer2 = setInterval( function() { if (h < maxh) { h = h*1.2; if (h > maxh) { h = maxh; } b.style.height = parseInt(h)+'px'; b.style.width = parseInt(h)+'px'; } else if (h == maxh) { clearInterval(timer2); } }, 1 ); },800 ); } }, 30 ); } </script> </head> <body onLoad="javascript:mkImages(maxImages);"> <div style="width:95%;margin: 0 auto; border: none; padding: 0px; text-align: center;"> <div id="box"> <div id="instafeed" style="display:none"></div><!-- hidden div for instafeed to output to --> <div id="debug" style="display:none"></div> <!-- debug - hidden. duh --> <div id="pictureframe"> <div id="showcase" style="margin: 0px auto; border: none;"></div> <!-- contains the actual pictures --> <div style="clear:both"></div> </div> </div> </div> <script type="text/javascript"> function setMotion(s) { var parent = document.getElementById('showcase'); var n = s.split("|"); n.pop(); var debug = ''; var newImages = 0; if (consdebug) { console.log(n.length-1 + ' items fetched'); } for (i=n.length-1;i>=0;i--) { // sort with oldest first debug = debug + '<br>' + n[i]; if (inStore.indexOf(n[i]) == -1) { // add image to showcase on currentIndex // make some fancy in/out-animation when replacing image animateOut(parent.childNodes[currentIndex].childNodes[0].childNodes[0],n[i]); // parent.childNodes[currentIndex].src=n[i]; currentIndex++; if (currentIndex > maxImages-1) { currentIndex = 0; } inStore.unshift(n[i]); // add the url at the beginning of inStore if (inStore.length > maxImages) { inStore.pop(); } newImages++; } //else { console.log('not new');} } if (consdebug ) { console.log(newImages + ' images added'); } document.getElementById('debug').innerHTML = debug + 'inStore: ' + inStore.length; } var options = { get: 'tagged', tagName: 'rfchange', sortBy: 'most-recent', links: 'false', limit: '8', resolution: 'low_resolution', clientId: '48e3a611d4484383bb87ca5c528c7cef', template: '{{image}}|', target: 'instafeed', after: function() { setMotion(document.getElementById('instafeed').innerHTML); }, } var feed = new Instafeed(options); setTimeout(function() { feed.run(); var interval = setInterval(function() { feed.run(); }, 4000); },5000); </script> </body> </html>