This assumes everything you store in boom is an image. One of these days I'll submit a proper pull-request to the boom repo, but not today.
boom.html to your home directory.function.sh into your dotfiles, or move to your ~/bin as ~/bin/boomgui and make executable (chmod +x ~/bin/boomgui).boomgui from the command line.| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" charset="utf-8"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script> | |
| <script src="//cdn.jsdelivr.net/jquery.lazyload/1.9.0/jquery.lazyload.min.js"></script> | |
| <script type="text/javascript"> | |
| angular.module('boomApp', []) | |
| .controller('BoomCtrl', function ($scope, $http) { | |
| $http.get(".boom") | |
| .success(function(data){ | |
| $scope.lists = data['lists']; | |
| }) | |
| }).directive('lazy', function($timeout) { | |
| return { | |
| restrict: 'C', | |
| link: function (scope, elm, attrs) { | |
| $timeout(function() { $(elm).lazyload() }, 0); | |
| } | |
| } | |
| }); | |
| </script> | |
| <title>Boom!</title> | |
| </head> | |
| <body> | |
| <div ng-app="boomApp"> | |
| <div id="app" ng-controller="BoomCtrl"> | |
| <div class="list" style="clear:both;" ng-repeat="list in lists"> | |
| <div ng-repeat="(listname,array) in list"> | |
| <h2 style="background-color:#C8C8C8;">{{listname}}</h2> | |
| <div class="arrayitem" style="clear:right;" ng-repeat="item in array"> | |
| <div ng-repeat="(name, url) in item"> | |
| <figure style="float:left;"> | |
| <img class="lazy" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="{{url}}" width="150" height="150" alt="{{name}}" /> | |
| <figcaption><a ng-href="{{url}}">{{name}}</a></figcaption> | |
| <input type="text" onClick="this.select();" value="{{url}}" /> | |
| </figure> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
| function boomgui() { | |
| cd ~ && python -m SimpleHTTPServer & open http://0.0.0.0:8000/boom.html | |
| } |
