Festival

Implementation example:

1. Append to page references to 2 required plugin files as:

   <link href="/Plugin/Festival/jq.festival-1.2.1.css" type="text/css" rel="stylesheet" />
   <script src="/Plugin/Festival/jq.festival-1.2.1.js"></script>
   

2. Create in any div element ul with id «festival»:

   <ul id="festival">
   

3. Put slides items into ul as li elements with unique id as «slide_01»:

   <ul id="festival">
   

       <li id="slide_01"> ... </li>
       <li id="slide_02"> ... </li>
   

       ...
   

       <li id="slide_08"> ... </li>
   

   </ul>
   

4. Create tag span with class «slide» as envelopment for slide's content.
   Put info additional tag span element with class «bookmark» for vertical slide title and image tag for slide background:

   <li id="slide_01">
   

       <span class="slide">
           <span class="bookmark">1st day</span>
           <img src="/Scenes/acDay_01.jpg" alt="" />
   

           <!-- Follow code here -->
   

       </span>
   

   </li>
   

5. Insert into each slide tags a as inner item box and put navigate Url instead symbol #.
   Input image tag as small image and span element for explanation text:

   <li id="slide_01">
       <span class="slide">
           <span class="bookmark">1st day</span>
           <img src="/Scenes/acDay_01.jpg" alt="" />
   

           <a class="box" href="#">
               <img src="/Scenes/im_01_01.png" width="80" height="60" align="left" />
               <span>
                   <strong>Slava Ganelin</strong><br />
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                   In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
               </span>
           </a>
           <a class="box" href="#"> ... </a>
           <a class="box" href="#"> ... </a>
           <a class="box" href="#"> ... </a>
   

       </span>
   </li>
   

6. Find in file jq.festival-1.0.4.js line commented as TEMPORARY FOR DEVELOPMENT and remove follow command alert:

   alert($(this).find('strong').text());
   

7. Insert jQuery code for run plugin script on page loading:

   <script type="text/javascript">
       // On document ready
       $(document).ready(function () {
           // Festival scheduler loading
           $('#festival').festival(0);
       });
   </script>
   

   Note: parameter number 0 in «festival» method point on start-up expanded slide index (actual for 8 from 0 up to 7).