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