Magicpic

Implementation example:

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

   <link href="/Plugin/Magicpic/jq.magicpic-1.2.0.css"
       type="text/css" rel="stylesheet" />
   <script src="/Plugin/Magicpic/jq.magicpic-1.2.0.js">
       </script>
   

2. Create element div with id «magicpic»:

   <div id="magicpic">
   

3. Put slides items into div as span elements with class «slide»:

   <div id="magicpic">
   

       <span class="slide"> ... </span>
       <span class="slide"> ... </span>
       ...
       <span class="slide"> ... </span>
   

   </div>
   

4. Create tag a with class «thumb» and put navigate Url instead symbol #:

   <span class="slide">
   

       <a class="thumb" href="#8 - Italy (2013)">
           //-- Follow code here --//
       </a>
   

   </span>
   

5. Input image tag as small image and span element for float explanation text:

   <span class="slide">
       <a class="thumb" href="#8 - Italy (2013)">
   

           <img src="/Scenes/pict_008.jpg" />
           <span class="title">Padova</span>
   

       </a>
   </span>
   

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

   alert($(this).find('a.thumb').attr('href') 
           + '; ' + $(this).find('span.title').text());
   

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

   <script type="text/javascript">
       // On document ready
       $(document).ready(function () {
           // Magicpic viewer loading
           $('#magicpic').magicpic(3500, 180, 120);
           // or
           $('#magicpic').magicpic(3500);
       });
   </script>
   

   Note: 1st parameter 3500 (default is 5000) in «magicpic» method set slides swap timeout in milliseconds; 2nd parameter 180 (default is 0) set slide width in pixels; 3nd parameter 120 (default is 0) set slide height in pixels. When slides size not set, plugin autodefine and set width and height by first slide in collection.