Documentation

Detailed Installation

  1. There are several assets (js and css files that you need to include in your page before you can use the plugin. These are:

    • jQuery
    • Yep Nope dependency loader - this is included in the plugin folder
    • The Document Library plugin javascript file
    • The Document Library css file

    You should have the following markup in your page:

        
            <link rel="stylesheet" href="document-library/css/style.css">
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
            <script type="text/javascript" src="document-library/libs/yepnope.1.5.3-min.js"></script>
            <script type="text/javascript" src="document-library/ttw-document-library.min.js"></script>
        
    

    Document Library uses several other javascript files, but these will be auto loaded by the plugin.

  2. You will need to initialize the Document Library plugin. The basic format for initializing Document Library is:

    
        var library = new DocumentLibrary(options);
    


    Here's an example where I initialize Document Library on a div element with an id = 'documents'

        
            //your list of documents should be an array of objects.
            var documentList =  [
                {"path": "sample-files/compressed.tracemonkey-pldi-09.pdf"},
                {"path": "sample-files/sintel_trailer-720p.mp4"}
            ];
    
            //create a new instance of the document viewer. The $anchor parameter is where the document library
            //will load into the page.
            var library = new DocumentLibrary({
                $anchor: $('#documents'),
            });
    
            //display the document viewer
            library.load(documentList);