css_selector.js

var add_css_list = function (element,names) {
    console.log(element)
     var label = $('<label/>').text('Css:');
     var select = $('<select/>')
         .addClass('ui-widget-content')
         .append($('<option/>').attr('value', 'style.min').text('default'));
     element.append(label).append(select);
     select.change(function() {
            var val = $(this).val()
            $('link:nth(7)').attr('href','/static/css/'+val+'.css')
     });
     for (var i=0; i<names.length; i++) {
         var name = names[i];
         select.append($('<option/>').attr('value', name).text(name));
     }
};

add_css_list(IPython.toolbar.element,['duck','dark'])

custom.js

$.getScript('/static/js/slide_meta.js')

$.getScript('/static/js/css_selector.js')
$.getScript('/static/js/slide_meta.js')

$([IPython.events]).on('notebook_loaded.Notebook', function(){
    IPython.toolbar.add_buttons_group([
                    {
                'label'   : 'run qtconsole',
                'icon'    : 'ui-icon-calculator',
                'callback': function(){IPython.notebook.kernel.execute('%qtconsole')}
                }
            ]);
    IPython.toolbar.add_buttons_group([
		             {
		        'label'   : 'pylab inline',
		        'icon'    : 'ui-icon-calculator',
		        'callback': function(){IPython.notebook.kernel.execute('%pylab inline')}
		         }
		    ]);
    IPython.toolbar.add_buttons_group([
                    {
	            'label'   : 'Share Notebook nbviewer',
	            'icon'    : 'ui-icon-info', 
	            'callback': function(){
                                       IPython.notebook.insert_cell_at_bottom('code');
			                           var code = 'lines = !jist -p ' + IPython.notebook.notebook_name + '.ipynb' +
			                                      '\nprint lines[0].replace("https://gist.github.com", "http://nbviewer.ipython.org")';
			                           IPython.notebook.get_cell(-1).set_text(code);
			                           IPython.notebook.save_notebook();
			                           IPython.notebook.get_cell(-1).execute();
		                               }
	                }]);

});

ipython_notebook_config

# Configuration file for ipython-notebook.

c = get_config()

c.NotebookApp.open_browser = False


PROFILES_PATH='/Users/epi/.ipython/profile_default'
extra_static_paths = ["{0}/{1}".format(PROFILES_PATH, sdir)
                    for sdir in (
                        'css_selector',
                        'slidemode',
                        'init_cell'
                    )]
extra_static_paths.append('/Users/epi/.ipython/profile_default/static')
c.NotebookApp.extra_static_paths = extra_static_paths

js console log

Default extension for metadata editing loaded. default.js:92
Slideshow extension for metadata editing loaded. slideshow.js:56
patching CM for undefined indent notebookmain.js:19
Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:8888/js/css_selector.js?_=1367167731085
Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:8888/js/slide_meta.js?_=1367167731086
Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:8888/js/init_cell.js?_=1367167731086
Kernel started:  f6d33c57-a84c-41cb-864f-a1a93f492be0 kernel.js:102
Starting WebSockets: ws://127.0.0.1:8888/kernels/f6d33c57-a84c-41cb-864f-a1a93f492be0 kernel.js:129

shell log

MacBook-Pro-di-Massimo:unh epi$ sh ipython.sh 
2013-04-28 12:47:49.369 [NotebookApp] Using existing profile dir: u'/Users/epi/.ipython/profile_default'
2013-04-28 12:47:49.378 [NotebookApp] Using local MathJax from /Users/epi/.ipython/profile_default/static/mathjax/MathJax.js
2013-04-28 12:47:49.388 [NotebookApp] Serving notebooks from local directory: /Users/epi/unh
2013-04-28 12:47:49.388 [NotebookApp] The IPython Notebook is running at: http://127.0.0.1:8888/
2013-04-28 12:47:49.388 [NotebookApp] Use Control-C to stop this server and shut down all kernels.
WARNING:root:404 GET /js/css_selector.js?_=1367167675931 (127.0.0.1) 0.28ms
WARNING:root:404 GET /js/init_cell.js?_=1367167675932 (127.0.0.1) 0.28ms
WARNING:root:404 GET /js/slide_meta.js?_=1367167675932 (127.0.0.1) 0.28ms
WARNING:root:404 GET /js/css_selector.js?_=1367167677336 (127.0.0.1) 0.23ms
WARNING:root:404 GET /js/init_cell.js?_=1367167677337 (127.0.0.1) 0.18ms
WARNING:root:404 GET /js/slide_meta.js?_=1367167677337 (127.0.0.1) 0.19ms
2013-04-28 12:47:57.659 [NotebookApp] Connecting to: tcp://127.0.0.1:63305
2013-04-28 12:47:57.659 [NotebookApp] Kernel started: 79da111a-01f3-4bfc-9a4c-10d10e4960a7
2013-04-28 12:47:57.852 [NotebookApp] Connecting to: tcp://127.0.0.1:63302
2013-04-28 12:47:57.858 [NotebookApp] Connecting to: tcp://127.0.0.1:63304
2013-04-28 12:47:57.859 [NotebookApp] Connecting to: tcp://127.0.0.1:63303
[IPKernelApp] To connect another client to this kernel, use:
[IPKernelApp] --existing kernel-79da111a-01f3-4bfc-9a4c-10d10e4960a7.json
WARNING:root:404 GET /js/css_selector.js?_=1367167729417 (127.0.0.1) 0.23ms
WARNING:root:404 GET /js/init_cell.js?_=1367167729418 (127.0.0.1) 0.16ms
WARNING:root:404 GET /js/slide_meta.js?_=1367167729418 (127.0.0.1) 0.16ms
WARNING:root:404 GET /js/css_selector.js?_=1367167731085 (127.0.0.1) 0.28ms
WARNING:root:404 GET /js/slide_meta.js?_=1367167731086 (127.0.0.1) 0.17ms
WARNING:root:404 GET /js/init_cell.js?_=1367167731086 (127.0.0.1) 0.22ms
2013-04-28 12:48:52.145 [NotebookApp] Connecting to: tcp://127.0.0.1:63329
2013-04-28 12:48:52.146 [NotebookApp] Kernel started: f6d33c57-a84c-41cb-864f-a1a93f492be0
2013-04-28 12:48:52.456 [NotebookApp] Connecting to: tcp://127.0.0.1:63326
[IPKernelApp] To connect another client to this kernel, use:
[IPKernelApp] --existing kernel-f6d33c57-a84c-41cb-864f-a1a93f492be0.json
2013-04-28 12:48:52.685 [NotebookApp] Connecting to: tcp://127.0.0.1:63328
2013-04-28 12:48:52.717 [NotebookApp] Connecting to: tcp://127.0.0.1:63327
WARNING:root:404 GET /js/css_selector.js?_=1367167731085 (127.0.0.1) 0.36ms

slide_meta.js

"use strict"

var tminus  = 340
var deltat  = 140
var tplus   = tminus+deltat

var bind_remote = function(selector){
    var invisible_input = $('<input/>')
            .fadeTo(0.2,0)
            .keydown(
                function(event) {
                    if(event.which == IPython.utils.keycodes.LEFT_ARROW){
                        IPython.slideshow.prev()
                    } else if(event.which == IPython.utils.keycodes.RIGHT_ARROW){
                        IPython.slideshow.next()
                    }
                    event.preventDefault()
                    return false
                }
            )
            .focusin(function(){$('#qwerty').button('option','label','Slide Mode Enabled')})
            .focusout(function(){$('#qwerty').button('option','label','Enable Slide Mode')})

     var keyboard_control_button = $('<div/>')
            .attr('id','qwerty')
            .button({label:'slide control'})
            .attr('style','float:right')
            .click(
                function(){ invisible_input.focus() }
            )
            .keydown(
                function(event){
                    event.preventDefault()
                    return false
                }
            )

    $(selector)
        .append(invisible_input)
        .append(keyboard_control_button)
        .fadeTo('slow',0.3)
    .hover(
            function(){$(selector).fadeTo('slow',1)},
            function(){$(selector).fadeTo('slow',0.3)}
    )
}

/**
 * not use yet
 */
var show_line = function(cell,line_number){
    cell.code_mirror.showLine(cell.code_mirror.getLineHandle(line_number-1))
}

IPython = (function(IPython) {

    /**
     * @constructor
     */
    var Presentation = function(){
          this.ccell = 0
    }

    var is_cell_of_type = function(cell,type){
        if (cell == undefined){
            return false
        }
        var def = { "slideshow": {} }
        var m = cell.metadata.slideshow ? cell.metadata.slideshow:{}
        return ( m.slide_type == type)
    }

    var _typer = function(type){
        return function(cell){return is_cell_of_type(cell,type)}
    }

    var is_undefined = _typer(undefined)
    var is_fragment = _typer('fragment')
    var is_slide = _typer('slide')
    var is_skip = _typer('skip')
    var is_subslide = _typer('subslide')
    var is_notes = _typer('notes')

    // backward compat
    var is_marked_cell = is_slide

    Presentation.prototype.create_toolbar = function(){
        var that = this
        this.progression = $('<div/>').button({label:that.eta()})

        var pt = $('<div/>').attr('id','toolbar_present')
        pt.append(this.progression)

        $('#maintoolbar').after(pt)
        var ptoolbar = new IPython.ToolBar('#toolbar_present')


        ptoolbar.add_buttons_group([{label:'Pause', icon:'ui-icon-pause', callback:function(){that.pause()}}])
        ptoolbar.add_buttons_group([{label:'Stop' , icon:'ui-icon-stop' , callback:function(){that.stop() }}])

        ptoolbar.add_buttons_group([
                 {label:'Prev Slide', icon:'ui-icon-seek-prev', callback:function(){that.prev_group()}},
                 {label:'Next Slide', icon:'ui-icon-seek-next', callback:function(){that.next_group()}},
                                ])
        ptoolbar.add_buttons_group([
                 {label:'Next', icon:'ui-icon-play', callback:function(){that.next()}}
                 ])

        bind_remote('#toolbar_present')

        IPython.ptoolbar = ptoolbar
    }

    Presentation.prototype.remove_toolbar = function(){
        $('#toolbar_present').remove()
    }

    // return the total number of slide
    Presentation.prototype.ngroups = function(){
        var cells = IPython.notebook.get_cells()
        var cnt =0
        for( var i=0; i< cells.length;i++)
              if(is_marked_cell(cells[i])) cnt++
        return cnt
    }

    // return the number of the current slide
    Presentation.prototype.cgroups = function(){
        var cells = IPython.notebook.get_cells()
        var cnt =0
        for( var i=0; i<= this.ccell ;i++)
            if(is_marked_cell(cells[i])) cnt++
        return cnt
    }

    // estimated time of arival
    Presentation.prototype.eta = function(){
        return this.cgroups()+'/'+this.ngroups()
    }

    // number of next marked cell, (artefact, deprecated)
    Presentation.prototype.next_marked_cell_n = function() {
        for(var i=this.ccell+1; i< $('.cell').length; i++) {
            if(is_marked_cell(IPython.notebook.get_cell(i)))
            { return i }
        }
        return null
    }

    // number of prev marked cell, (artefact, deprecated)
    Presentation.prototype.prev_marked_cell_n = function() {
        for(var i=this.ccell-1; i> 0; i--) {
            if(is_marked_cell(IPython.notebook.get_cell(i))){
                return i
            }
        }
        return 0
    }

    Presentation.prototype.start = function(){
        this.restart()
        this.resume()
    }

    Presentation.prototype.restart = function(){
        this.ccell = 0
        delete this.progression
    }

    Presentation.prototype.resume = function(){
        this.create_toolbar()
        $('body').addClass('presentation_mode')
        $('#menubar').addClass('pmode')
        $('#pager_splitter').addClass('pmode')
        $('#pager').addClass('pmode')
        $('#menubar, #pager_splitter, #pager, #header,#maintoolbar').addClass('pmode')
        $('#header').addClass('pmode')
        $('#maintoolbar').addClass('pmode')
        $('div#header').css('display','none')
        IPython.layout_manager.do_resize()
        $('.cell').fadeOut(tminus)
        if(this.current_is_marked()){
            $('.cell:nth('+this.ccell+')').fadeIn()
        } else {
            for( var i=this.prev_marked_cell_n() ; i<= this.ccell; i++){
                $('.cell:nth('+i+')').fadeIn()
            }
        }
        var that=this
        if(this.progression != undefined)
        $(this.progression).button('option','label',that.eta())
        return this
    }

    Presentation.prototype.stop = function(){
        this.restart()
        this.pause()
    }

    Presentation.prototype.pause = function(){
        $('.cell').fadeIn()
        $('.pmode').removeClass('pmode')
        $('body').removeClass('presentation_mode')
        $('div#header').css('display','block')
        $('div#notebook').removeClass('pmode')
        IPython.layout_manager.do_resize()
        this.remove_toolbar()
    }

    Presentation.prototype.next = function(){
        var current_cell_number = this.ccell
        var number_next_cell = this.ccell+1
        this.ccell = this.ccell+1

        var that = this
        if(this.ccell >= $('.cell').length ){
            this.restart()
            this.pause()
            return
        }
        var next_cell = IPython.notebook.get_cell(number_next_cell)
        var look_ahead_cell = IPython.notebook.get_cell(number_next_cell+1)

        if(is_marked_cell(next_cell) || is_subslide(next_cell)){
            $('.cell').fadeOut(tminus)
            setTimeout(function(){$('.cell:nth('+number_next_cell+')').fadeIn(tminus)},tplus)
        } else {
            if( !is_skip(next_cell) && !is_notes(next_cell) ){
                setTimeout(function(){$('.cell:nth('+number_next_cell+')').fadeIn(tminus)},tplus)
            }
        }
        $(this.progression).button('option','label',that.eta())

        if(is_undefined(look_ahead_cell) || is_skip(look_ahead_cell) || is_notes(look_ahead_cell)){
            console.log('next...')
            this.next()
        }
    }

    Presentation.prototype.next_group = function(){
        this.ccell = this.next_marked_cell_n()
        var that = this
        $('.cell').fadeOut(tminus)
        setTimeout(function(){
            $('.cell:nth('+that.ccell+')').fadeIn(tminus)
        },tplus)
        $(this.progression).button('option','label',that.eta())
    }

    Presentation.prototype.prev_group = function(){
        this.ccell = this.prev_marked_cell_n()
        var that = this
        $('.cell').fadeOut(tminus)
        setTimeout(function(){$('.cell:nth('+that.ccell+')').fadeIn(tminus)},tplus)
        $(this.progression).button('option','label',that.eta())
    }

    Presentation.prototype.is_n_marked = function(n){
        return is_marked_cell(IPython.notebook.get_cell(n))
    }

    Presentation.prototype.current_is_marked = function(n){
        return is_marked_cell(IPython.notebook.get_cell(this.ccell))
    }

    Presentation.prototype.prev = function(){
        if(is_marked_cell(IPython.notebook.get_cell(this.ccell)) || is_subslide(IPython.notebook.get_cell(this.ccell))){
            var pmcell = this.prev_marked_cell_n()
            $('.cell').fadeOut(tminus)
            for( var i=pmcell; i< this.ccell ; i++ ){
                  (function(val){
                      return function(){
                                  setTimeout( function(){
                                      $('.cell:nth('+val+')').fadeIn(tminus)
                                      },tplus)
                      }
                   })(i)()
              }
          } else {
              $('.cell:nth('+this.ccell+')').fadeOut(tminus)
          }
          this.ccell = this.ccell -1
          return this
      }

      IPython.Presentation = Presentation
      return IPython

})(IPython)

//$('body').append($('<style/>').text('.pmode{ display: none !important }'))
//
IPython.slideshow = new IPython.Presentation()

IPython.toolbar.add_buttons_group([
    {
        'label'   : 'Start/Resume Slideshow',
        'icon'    : 'ui-icon-image',
        'callback': function(){IPython.slideshow.resume()},
        'id'      : 'start_pmode'
    },
])

console.log('Live slideshow extension correctly loaded')