davej Posted September 14, 2013 Share Posted September 14, 2013 (edited) Yahoo is currently rolling out an upgrade to its Yahoo Groups and I participate in a few of these groups. The new upgrade is buggy and annoying but it does have a few new features, and one new feature that I do find impressive is the new slideshow. When the slideshow initializes it seems to set the browser to a full screen menu-less window. Then it sequences through the images while randomly panning them across the screen. What I mean is it oversizes the image and then pans the screen across the image. This looks very nice. The stupid part is that they don't seem to offer an ordinary slideshow anymore. It's fullscreen or nothing. I'd like to figure out how to duplicate something like this. The first step would be -- how do you put a browser window into full screen mode? window.open('','',channelmode=1,fullscreen=1); Does not work. http://www.w3schools.com/jsref/met_win_open.asp Edited September 14, 2013 by davej Link to comment Share on other sites More sharing options...
Ingolme Posted September 14, 2013 Share Posted September 14, 2013 You forgot to surround the parameters with quotation marks. This seems to work for me in Firefox: function openWin(){myWindow=window.open('','','fullscreen=1,channelmode=1');myWindow.document.write("<p>This is 'myWindow'</p>");myWindow.focus();} I haven't tested all browsers, so I'm not completely sure how much control other browsers might give to developers. Link to comment Share on other sites More sharing options...
davej Posted September 14, 2013 Author Share Posted September 14, 2013 (edited) Oh, maybe I'm not describing this correctly. What I should have said is I want a borderless full screen window. But just now I did find this... https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode And it works... function slideshow(){var elem = document.getElementById("img1");if (elem.requestFullscreen) { elem.requestFullscreen();}else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen();}else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen();}else{alert('No full screen support');}} So now the next question is -- how did they accomplish the panning and zooming? Edited September 15, 2013 by davej Link to comment Share on other sites More sharing options...
davej Posted September 15, 2013 Author Share Posted September 15, 2013 (edited) This works on FF23, and the panning and zooming must simply require substituting the canvas... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Fullscreen Slideshow</title><style>/*img1:-webkit-full-screen #img1 {//safariwidth: 100%;height: 100%;}*/</style><script src='jonerror.js'></script><script>window.onload = init;function init(){document.getElementById('btn1').onclick = slideshow1;document.getElementById('btn2').onclick = slideshow2;}function slideshow1(){var h = screen.availHeight;var w = screen.availWidth;myWindow = window.open('','','fullscreen=1,channelmode=1,height='+h+',left=0,width='+w+',titlebar=0','');h = myWindow.innerHeight;w = myWindow.innerWidth;var str = '<img style="margin:0;padding:0;" height="'+ h +'" src="" id="img1" alt=""/>';myWindow.document.write(str);myWindow.focus();ss(myWindow.document.getElementById('img1'));}function slideshow2(){var elem = document.getElementById("img1");if (elem.requestFullscreen) { elem.requestFullscreen();}else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen();}else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen();}else{alert('No full screen support');}ss(elem);}var i = 0;function ss(img){paths = ['http://i.imgur.com/GbguM.png','http://i3.mirror.co.uk/incoming/article1443701.ece/ALTERNATES/s615/Skydiving%20cats-1443701','http://i.huffpost.com/gen/1043009/thumbs/o-LIL-BUB-AND-FRIENDZ-TRAILER-facebook.jpg','http://images4.fanpop.com/image/photos/16000000/Cheeky-Cat-cats-16096856-500-313.jpg'];img.src = paths[i];i = ++i % paths.length;window.setTimeout(function(){ss(img);},3000);}</script></head><body><input type="button" id="btn1" value="Start Slideshow1"/><input type="button" id="btn2" value="Start Slideshow2"/><br/><img src="" id="img1" width="200" alt=""/></body></html> Edited September 16, 2013 by davej Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now