git.sur5r.net Git - i3/i3.github.io/blob - screenshots/index.html.mako

   1 <%!
   2         section = "screens"
   3 %>
   4 <%inherit file="_templates/i3.mako" />
   5
   6 <div id="mask">
   7 </div>
   8
   9 <div id="loading">
  10 </div>
  11
  12 <div id="bigimg">
  13     <div id="maskouter">
  14         <div id="maskinner">
  15             <div id="imgleft">
  16             </div>
  17             <div id="imgright">
  18             </div>
  19         </div>
  20     </div>
  21 </div>
  22
  23 <div id="content">
  24
  25 <h2>Latest Video</h2>
  26
  27 <div id="screencasts">
  28     <div class="video clearfix">
  29         <a href="http://www.youtube.com/watch?v=pKfP7Ws-CN8" title="Watch i3 screencast v3.δ on YouTube">
  30         <img src="/img/screencast-3.d.thumb.png" width="240" height="150" border="0" style="float: left">
  31         </a>
  32         <div style="float: left">
  33             <strong>Screencast of v3.δ</strong>
  34             <p>
  35             This video (5 min) shows the basic features of i3:
  36             </p>
  37             <ul>
  38                 <li>Layouts, Focus, Moving, Workspaces</li>
  39                 <li>dmenu, Floating Windows, Resizing</li>
  40                 <li>Window Borders, Urgency Hint, i3lock, i3status</li>
  41             </ul>
  42             <p>
  43             <a href="http://www.youtube.com/watch?v=pKfP7Ws-CN8">Watch it on YouTube</a> or <a href="/screenshots/screencast-3.d.mkv">download it (2.5 MB)</a>.
  44             </p>
  45         </div>
  46     </div>
  47 <div>
  48
  49 <h2>Screenshots</h2>
  50
  51 <p>
  52 To get a quick impression of i3, have a look at these screenshots.
  53 </p>
  54
  55 <div class="screenshots clearfix">
  56     <div class="shot">
  57         <a href="/screenshots/i3-1.png"><img src="/screenshots/i3-1.thumb.png" width="240" border="0"></a><br>
  58         <span>Vimperator, VIM, MPlayer, dzen2</span>
  59     </div>
  60
  61     <div class="shot">
  62         <a href="/screenshots/i3-2.png"><img src="/screenshots/i3-2.thumb.png" width="240" border="0"></a><br>
  63         <span>Vimperator, VIM, xpdf, bc</span>
  64     </div>
  65
  66     <div class="shot">
  67         <a href="/screenshots/i3-3.png"><img src="/screenshots/i3-3.thumb.png" width="240" border="0"></a><br>
  68         <span>PCManFM, ROXTerm, evince</span>
  69     </div>
  70
  71     <br>
  72
  73     <div class="shot">
  74         <a href="/screenshots/i3-4.png"><img src="/screenshots/i3-4.thumb.png" width="240" border="0"></a><br>
  75         <span>i3 logo out of terminals</span>
  76     </div>
  77
  78     <div class="shot">
  79         <a href="/screenshots/i3-6.png"><img src="/screenshots/i3-6.thumb.png" width="240" border="0"></a><br>
  80         <span>VIM, zsh, i3status (FreeBSD)</span>
  81     </div>
  82
  83     <div class="shot">
  84         <a href="/screenshots/i3-7.png"><img src="/screenshots/i3-7.thumb.png" width="240" border="0"></a><br>
  85         <span>GIMP, urxvt (both floating)</span>
  86     </div>
  87
  88     <br>
  89
  90     <div class="shot">
  91         <a href="/screenshots/i3-5.png"><img src="/screenshots/i3-5.thumb.png" width="240" border="0"></a><br>
  92         <span>mc, xosview, MPlayer, irssi, gajim</span>
  93     </div>
  94
  95     <div class="shot">
  96         <a href="/screenshots/i3-8.jpg"><img src="/screenshots/i3-8.thumb.jpg" width="240" border="0"></a><br>
  97         <span>git, synergy, htop, urxvt</span>
  98     </div>
  99
 100 </div>
 101
 102 </div>
 103
 104 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
 105 </script>
 106 <script type="text/javascript" src="/js/jquery.mousewheel.js">
 107 </script>
 108 <script type="text/javascript" src="/js/jquery.ba-hashchange.js">
 109 </script>
 110 <script type="text/javascript">
 111 $(document).ready(function() {
 112     $('.shot span').css('color', '#888');
 113
 114     $('.shot').mouseover(function() {
 115         $(this).children('span').css('color', 'white');
 116     });
 117
 118     $('.shot').mouseout(function() {
 119         $(this).children('span').css('color', '#888');
 120     });
 121
 122     // build an array of all images (full URLs)
 123     var images = [];
 124     var cnt = 0;
 125     $('.shot a').each(function(idx, element) {
 126         images[cnt++] = $(element).attr('href');
 127     });
 128
 129     // handlers for mousewheel scrolling
 130     // defined here because we need to enable it after the animation finished
 131     $(window).mousewheel(function(event, delta) {
 132         // if we are not in the slideshow mode, process the event as normal
 133         return (!$('#mask').is(':visible'));
 134     });
 135
 136     var wheelhandler = function(event, delta) {
 137         //console.log('event = ' + event + ', delta = ' + delta);
 138
 139         // if we are not in the slideshow mode, process the event as normal
 140         if (!$('#mask').is(':visible')) {
 141             return true;
 142         }
 143
 144         if (delta < 0) {
 145             // scroll down
 146             imgright();
 147             return false;
 148         } else if (delta > 0) {
 149             // scroll up
 150             imgleft();
 151             return false;
 152         }
 153     };
 154
 155     $(window).mousewheel(wheelhandler);
 156
 157     var loadimage = function(url, direction, fromhash) {
 158         // now load the image
 159         var img = new Image();
 160         img.src = url;
 161
 162         var loadcomplete = function() {
 163             var winW = $(window).width();
 164             var winH = $(window).height();
 165             var max_w = winW - (2 * 64);
 166             var max_h = winH - 64;
 167             var dims = {
 168                 'top': 0,
 169                 'left': 0,
 170                 'width': (img.width > max_w ? max_w : img.width),
 171                 'height': img.height
 172             };
 173             dims.height = (dims.width / img.width) * img.height;
 174             if (dims.height > max_h) {
 175                 dims.height = max_h;
 176                 dims.width = (dims.height / img.height) * img.width;
 177             }
 178             dims.top = (winH - dims.height) / 2;
 179             dims.left = ((max_w - dims.width) / 2) + 64;
 180             $('#loading').hide();
 181             var element = $('<img>');
 182             element.attr({ 'src': url, 'width':dims.width });
 183             element.css({ 'position': 'absolute', 'top':dims.top + 'px', 'left':dims.left + 'px' });
 184             if (direction !== undefined) {
 185                 // slide from right to left
 186                 if (direction === 'left') {
 187                     element.css({ 'left':winW + 'px' });
 188                     element.animate({ 'left': '-=' + (winW - dims.left) }, 'fast', function() {
 189                         $(window).mousewheel(wheelhandler);
 190                     });
 191                 } else {
 192                     element.css({ 'left':'-' + winW + 'px' });
 193                     element.animate({ 'left': '+=' + (winW + dims.left) }, 'fast', function() {
 194                         $(window).mousewheel(wheelhandler);
 195                     });
 196                 }
 197             }
 198             $('#maskinner').append(element);
 199             $('#maskinner').show();
 200
 201             $('#bigimg').show();
 202
 203             if (!fromhash && window.history.pushState) {
 204                 window.history.pushState(undefined, 'i3 screenshot: ' + url, "#" + url);
 205             }
 206         };
 207
 208         if (img.complete) {
 209             //console.log('image already in cache');
 210             loadcomplete();
 211         } else {
 212             //console.log('loading image');
 213             img.onload = loadcomplete;
 214         }
 215     };
 216
 217     // clicking anywhere outside the image will bring you back to the page
 218     var masks = $('#mask, #bigimg');
 219
 220     var endshow = function(fromhash) {
 221         masks.hide();
 222         $('#maskinner img').remove();
 223
 224         if (!fromhash && window.history.pushState) {
 225             window.history.pushState(undefined, 'i3 screenshots', '#');
 226         }
 227     };
 228
 229     masks.click(function() {
 230         endshow(false);
 231     });
 232     var showmask = function() {
 233         var winH = $(window).height();
 234         var maskHeight = $(document).height();
 235         var maskWidth = $(window).width();
 236
 237         var mask = $('#mask');
 238         mask.css({ 'width': maskWidth, 'height': maskHeight }).show();
 239     };
 240
 241     $('.shot img').click(function() {
 242         showmask();
 243
 244         var full = $(this).parent().attr('href');
 245         var loading = $('#loading');
 246         loading.show();
 247
 248         loadimage(full, undefined, false);
 249
 250 // TODO: also preload the next image?
 251
 252         // don't follow the link
 253         return false;
 254     });
 255
 256     var imgright = function() {
 257         var idx = $.inArray($('#maskinner img').attr('src'), images);
 258         var next = images[idx+1];
 259
 260         if (next === undefined) {
 261             //console.log('there is no next image');
 262             return false;
 263         }
 264
 265         //console.log('loading next one: ' + next);
 266         // slide out the current image
 267         var winW = $(window).width();
 268         $('#maskinner img').animate({ 'left': '-=' + (winW - 64) }, 'fast', function() {
 269             $(this).remove();
 270         });
 271         loadimage(next, 'left', false);
 272
 273         // disable mousewheel handler during load (will be re-enabled after the animation)
 274         $(window).unmousewheel(wheelhandler);
 275
 276         return true;
 277     };
 278     $('#imgright').click(imgright);
 279
 280     var imgleft = function() {
 281         var idx = $.inArray($('#maskinner img').attr('src'), images);
 282         var prev = images[idx-1];
 283
 284         if (prev === undefined) {
 285             //console.log('there is no next image');
 286             return false;
 287         }
 288
 289         //console.log('loading prev one: ' + prev);
 290         // slide out the current image
 291         var winW = $(window).width();
 292         $('#maskinner img').animate({ 'left': '+=' + winW }, 'fast', function() {
 293             $(this).remove();
 294         });
 295         loadimage(prev, 'right', false);
 296
 297         // disable mousewheel handler during load (will be re-enabled after the animation)
 298         $(window).unmousewheel(wheelhandler);
 299
 300         return false;
 301     };
 302     $('#imgleft').click(imgleft);
 303
 304     // setup key press handlers for the left/right arrow keys
 305     var keydown = function(e) {
 306         switch (e.keyCode) {
 307             // left arrow
 308             case 37:
 309                 imgleft();
 310                 break;
 311             // right arrow
 312             case 39:
 313                 imgright();
 314                 break;
 315             // escape
 316             case 27:
 317                 endshow(false);
 318                 break;
 319         }
 320     };
 321
 322     if ($.browser.mozilla) {
 323         $(document).keypress(keydown);
 324     } else {
 325         $(document).keydown(keydown);
 326     }
 327
 328     if (location.hash.length > 0) {
 329         var url = location.hash.substring(1);
 330         showmask();
 331         loadimage(url, undefined, true);
 332     }
 333
 334     $(window).hashchange(function() {
 335         if (location.hash.length === 0) {
 336             endshow(true);
 337             return;
 338         }
 339         var url = location.hash.substring(1);
 340         if (url.length === 0) {
 341             endshow(true);
 342         } else {
 343             showmask();
 344             loadimage(url, undefined, true);
 345         }
 346     });
 347
 348 });
 349 </script>