<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
     $(document).ready(function(){
      $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
     });
</script>

<h3>» Featured Content Slider Using jQuery</h3>
          
      <div id="featured" >
        <ul class="ui-tabs-nav">
             <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
             <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
             <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
             <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
           </ul>

         <!-- First Content -->
         <div id="fragment-1" class="ui-tabs-panel" style="">
       <img src="images/image1.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
        </div>
         </div>

         <!-- Second Content -->
         <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
       <img src="images/image2.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
        <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
        </div>
         </div>

         <!-- Third Content -->
         <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
       <img src="images/image3.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >35 Amazing Logo Designs</a></h2>
        <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
              </div>
         </div>

         <!-- Fourth Content -->
         <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
       <img src="images/image4.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
        <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
              </div>
         </div>

      </div>
     </div>

{include file="slider.tpl"}

<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script language="javascript" type="text/javascript" src="js/mootools.svn.js"></script>
<script language="javascript" type="text/javascript" src="js/lofslidernews.mt11.js"></script>

<div id="container">
   
<div id="lofslidecontent45" class="lof-slidecontent">
<div class="preload"><div></div></div>
   <!-- MAIN CONTENT -->   
    <div class="lof-main-wapper">
      <div class="lof-main-item">
            <img src="images/791902news3.jpg" title="Newsflash 2" height="300" width="900">             
                   <div class="lof-main-item-desc">
                  <h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3>

                  <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...</p>
               </div>
          </div>   
         <div class="lof-main-item">
           <img src="images/435576news10.jpg" title="Newsflash 1" height="300" width="900">            <div class="lof-main-item-desc">
                  <h3><a target="_parent" title="Newsflash 1" href="#">Newsflash 1</a></h3>
                  <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p>

               </div>
          </div>   
         <div class="lof-main-item">
           <img src="images/641906img1.jpg" title="Newsflash 3" height="300" width="900">            <div class="lof-main-item-desc">
                  <h3><a target="_parent" title="Newsflash 3" href="#">Newsflash 3</a></h3>
                  <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p>
               </div>
          </div>   
          <div class="lof-main-item">

           <img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900">            <div class="lof-main-item-desc">
                  <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
                  <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
               </div>
          </div>   
            
          <div class="lof-main-item">

           <img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900">            <div class="lof-main-item-desc">
                  <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
                  <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
               </div>
          </div>   
          <div class="lof-main-item">

           <img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900">            <div class="lof-main-item-desc">
                  <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
                  <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
               </div>
          </div>   
             
    </div>
    <!-- END MAIN CONTENT -->   
      <!-- NAVIGATOR -->

    <div class="lof-navigator-outer">
      <ul class="lof-navigator">
              <li>
               <div>
                   <img src="images/lofthumbs/791902news3.jpg" />
                   <h3> NewsFlash 1 </h3>
                     <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu...
                  </div>      
              </li>
               <li>
                <div>
                   <img src="images/lofthumbs/435576news10.jpg" />
                    <h3> NewsFlash 2 </h3>
                     <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                  </div>      
              </li>

              <li>
               <div>
                      <img src="images/lofthumbs/641906img1.jpg" />
                      <h3> NewsFlash 3 </h3>
                   <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                  </div>       
              </li>
                
             <li>
               <div>
                      <img src="images/lofthumbs/416719news7.jpg" />
                      <h3> NewsFlash 4</h3>
                      <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                  </div>
              </li>      
              <li>
                <div>
                    <img src="images/lofthumbs/641906img1.jpg" />
                    <h3> NewsFlash 5</h3>
                    <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                   </div>     
              </li>
             <li>
               <div>
                      <img src="images/lofthumbs/416719news7.jpg" />
                      <h3> NewsFlash 6</h3>
                   <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                  </div>
              </li>         
          </ul>
    </div>
   </div>   
<script type="text/javascript">
   var _lofmain =  $('lofslidecontent45');
   var _lofscmain = _lofmain.getElement('.lof-main-wapper');
   var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');
   var object = new LofFlashContent( _lofscmain,   
             _lofnavigator,
             _lofmain.getElement('.lof-navigator-outer'),
             { fxObject:{ transition:Fx.Transitions.Quad.easeInOut,  duration:800},
              interval:3000,
              direction:'opacity' } );
   object.start( true, _lofmain.getElement('.preload') );
</script>

<!------------------------------------- END OF THE CONTENT ------------------------------------------------->
   <div id="footer"></div>
      </div>

{include file="slider.tpl"}