Project Description
SlideNote is a jQuery plugin for making dynamic slideshow form json data. The slide view is specified by html template, data for slides come from a database.  

This is ASP.NET MVC 4 project that demonstrates usage of SlideNote. See working demo here:

SlideNote is a jQuery plugin that helps to create a slideshow using a json array of data items and html template to specify the display of one data item. The plugin source slidenote.js is in Scripts/app directory.


How to use SlideNote

Put reference to  slidenote.js in the header of your page.

Within html page use {{ xxx}} to mark fields of your items you wish to display. 


 <div id="slidenoteid"  data-role="slidenote"  >
        <div data-role="slidetemplate">
              <div class="slide"> 

                  <h2>{{Origin}} {{Occasion}} Toast</h2>                                                                     
                   <p >{{Content}} </p>                                                        



          <div class="slides"> </div>

          <span class="control left ">&#8249;</span>
          <span class="control right ">&#8250;</span>


One way to load data into SlideNote:   




This is   preferable way of initializing data as you could use  the same code for loading data during initialization and during run time.

Alternatively, you can  use data-source attribute to specify asynchronous function to fetch data during initialization as follows: 

<div id="slidenote1"  data-role="slidenote"   data-source="app.dataservice.getToasts"  >


Here app.dataservice.getToasts is the full name (namespace + name)  of a function that makes an asynchronous call to the server:


function getToasts(callback) {  $.get('/api/Toasts', callback);    }


This is the first release of SlideNote. Use it with caution.

Last edited Jan 22, 2013 at 10:03 PM by skrivov, version 8