CSS Monitor Screen Slideshow

Giving this one away for free.

CLICK HERE TO SEE DEMO

css monitor slide jquery css3 javascript slideshow

Javascript/Jquery

For the slideshow, use the Jquery Cycle2 plugin.

For the zoom, I used Jquery Zoomooz plugin but there may be better options out there now..

HTML

  1. <div>
  2. <div class="story cycle-slideshow" data-cycle-fx="fade" data-cycle-next="#next" data-cycle-prev="#prev" data-cycle-slides="&gt; div" data-cycle-timeout="0" id="badass"><!-- slide -->
  3. <div style="margin-left: 260px;">
  4. <div style="margin: auto; width: 460px;">
  5. <div class="container" style="position: relative">
  6. <div class="screen monitor">
  7. <div class="content">
  8. <div class="zoomTarget" data-closeclick="true" data-duration="1500" data-targetsize="1.0" style="border: 1px solid #999;"><!-- zoom image of website screenshot --><img src="images/throwitaway-screenshot.jpg" style="height: 238px; width: 418px;" /></div>
  9. </div>
  10.  
  11. <div class="base">
  12. <div class="grey-shadow">&nbsp;</div>
  13.  
  14. <div class="foot top">&nbsp;</div>
  15.  
  16. <div class="foot bottom">&nbsp;</div>
  17. </div>
  18. </div>
  19. </div>
  20. </div>
  21.  
  22. <div style="width: 460px; margin: 0 auto; margin-top: 80px; text-align: left;">
  23. <h3>Website: throwitaway.net</h3>
  24.  
  25. <p>Graced with my jQuery plugin–jQuery.popBox.js<a href="<a href="http://throwitaway.net"">http://throwitaway.net"</a> target="_blank">throwitaway.net</a> is a dazzling display home-brewed HTML5 3D effects, <a href="<a href="http://dannix.net/node/25"">http://dannix.net/node/25"</a> target="_blank">beautiful graphics</a>, and a dark virtualized presense of it's inspiration: Nine Inch Nails. I'll be featured in the third episode of the podcast, so stay tuned!</p>
  26. </div>
  27. </div>
  28. <!-- end slide --><!-- slide -->
  29.  
  30. <div style="margin-left: 260px;">
  31. <div style="margin: auto; width: 460px;">
  32. <div class="container" style="position: relative">
  33. <div class="screen monitor">
  34. <div class="content">
  35. <div class="zoomTarget" data-closeclick="true" data-duration="1500" data-targetsize="1.0" style="border: 1px solid #999;"><!-- zoom image of website screenshot --><img src="images/live-stream-player-screenshot.png" style="height: 238px; width: 418px;" /></div>
  36. </div>
  37.  
  38. <div class="base">
  39. <div class="grey-shadow">&nbsp;</div>
  40.  
  41. <div class="foot top">&nbsp;</div>
  42.  
  43. <div class="foot bottom">&nbsp;</div>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48.  
  49. <div style="width: 460px; margin: 0 auto; margin-top: 80px; text-align: left;">
  50. <h3>Web app: KPR Live Stream Player</h3>
  51.  
  52. <p>With a healthy mixture of JQuery, custom PHP and CSS3, the new <a href="<a href="http://www.kansaspublicradio.org/KPRplayer.php"">http://www.kansaspublicradio.org/KPRplayer.php"</a> target="_blank">KPR Live Stream Player</a> now looks as fantastic as it sounds. The JPlayer plugin–with a customized skin–was installed to handle the playback, PHP is used to query the database for the current program on the air, and CSS3 transistions is used for the super smooth rotating album. Lastly, responsive design was implemented to fit and look good on all screens. Rejoice!</p>
  53. </div>
  54. </div>
  55. <!-- end slide --></div>
  56. <!-- end slideshow --><!-- prev/next links -->
  57.  
  58. <div><span id="prev"><img src="images/icons/left-arrow.png" /></span> <span id="next"><img src="images/icons/right-arrow.png" /></span></div>
  59. </div>
  60. <!-- end third -->
  61.  
  62. <h2>CSS3</h2>
  63.  
  64. <p><cpp> /* COMPUTER SCREEN */ .container * { box-sizing: border-box; } .container &gt; .screen { width: 460px; height: 280px; position: relative; background: #ff6860; border: 20px solid #474e5d; border-radius: 10px; -moz-box-sizing:border-box; /* fixes Firefox bug */ } .monitor &gt; div { position: absolute; } .monitor:before, .monitor:after, .laptop:before{ content: ""; position: absolute; left: 50%; } .monitor:before, .laptop:before { top: -10px; margin: -3px 0 0 -3px; width: 6px; height: 6px; border-radius: 6px; background: #a5adbd; } .screen:after { width: 8px; height: 8px; border-radius: 8px; bottom: -10px; margin: 0 0 -4px -4px; background: #e8ebf0; } .content { width: 420px; height: 240px; /*left: 50%; margin-left: -210px;*/ overflow: hidden; } .base { width: 90px; height: 50px; bottom: -70px; left: 50%; margin-left: -45px; background: #e8ebf0; } .base:before, .base:after, .grey-shadow:before, .grey-shadow:after{ content: ""; position: absolute; top: 0; } .base:before { border-left: 13px solid transparent; border-right: 0px solid transparent; border-bottom: 50px solid #e8ebf0; left: -13px; } .base:after { border-right: 13px solid transparent; border-left: 0px solid transparent; border-bottom: 50px solid #e8ebf0; right: -13px; } .base &gt; div { position: absolute; } .grey-shadow { width: 90px; height: 12px; background: #d8dbe1; top: 0; } .grey-shadow:before { border-left: 3px solid transparent; border-right: 0px solid transparent; border-bottom: 12px solid #d8dbe1; left: -3px; z-index: 2 } .grey-shadow:after { border-right: 3px solid transparent; border-left: 0px solid transparent; border-bottom: 12px solid #d8dbe1; right: -3px; z-index: 2 } .foot { background: #e8ebf0; z-index: 1; } .foot.top { width: 116px; height: 5px; bottom: -5px; left: 50%; margin-left: -58px; } .foot.top:before, .foot.top:after, .foot.bottom:before { content: ""; position: absolute; top: 0px; } .foot.top:before { border-left: 16px solid transparent; border-right: 0px solid transparent; border-bottom: 5px solid #e8ebf0; left: -16px; } .foot.top:after { border-right: 16px solid transparent; border-left: 0px solid transparent; border-bottom: 5px solid #e8ebf0; right: -16px; } .foot.bottom { width: 150px; height: 5px; bottom: -10px; left: 50%; margin-left: -75px; z-index: 999; } .keyboard .shadow { bottom: -10px; height: 10px; } .shadow { position: absolute; width: 350px; height: 15px; left: 50%; margin-left: -175px; z-index: -1; bottom: -20px; background: radial-gradient(ellipse at center, rgba(52,172,108,1) 0%,rgba(52,172,108,1) 53%,rgba(46,204,113,1) 55%,rgba(46,204,113,0) 55%,rgba(46,204,113,0) 100%); } /* slideshow controls */ #prev { position: relative; left: -300px; top: -100px; cursor: pointer; } #next { position: relative; left: 300px; top: -100px; cursor: pointer; } #badass { background: url('') 50% 0 no-repeat; height: 300px; position: relative; top: 50px; margin: auto; }