SlideNote Demo

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: 

 http://toasts.azurewebsites.net/

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>                           

          </div>

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

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

One way to load data into SlideNote:   

$('#slidenoteid').data('SlideNote').loadData(data);

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.