Monday, 6 May 2013

Slide Show




<html>
<head>
<title>Rotating Banner</title>
<link rel="stylesheet" href="http://igrid103:8888/Style%20Library/Al%20Majed/banner/styles/slider.css">
<script src="http://igrid103:8888/Style%20Library/Al%20Majed/banner/scripts/jquery.min.js" type="text/javascript"></script>
<script src="http://igrid103:8888/Style%20Library/Al%20Majed/banner/scripts/jquery.cycle.all.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
 jQuery('.fp-slides').cycle({
  fx: 'scrollHorz',
  timeout: 4000,
  delay: 0,
  speed: 400,
  next: '.fp-next',
  prev: '.fp-prev',
  pager: '.fp-pager',
  continuous: 0,
  sync: 1,
  pause: 1,
  pauseOnPagerHover: 1,
  cleartype: true,
  cleartypeNoBg: true
 });
 });
</script>
</head>
<body>
<!-- Featured Content Slider Started -->
<div class="fp-slider clearfix">
 <div class="fp-slides-container clearfix">
  <div style="overflow: hidden;" class="fp-slides">
   <!-- Slide 1 Code Start -->
   <div style="position: absolute; top: 0px; left: -610px; display: none; z-index: 5; opacity: 1;" class="fp-slides-items">
    <div class="fp-thumbnail">
     <a href="http://www.google.com"><img src="http://igrid103:8888/Style%20Library/Al%20Majed/banner/images/1.jpg" /></a> </div>
    <div class="fp-content-wrap">
     <div class="fp-content">
      <h3 class="fp-title"><a href="#">SharePoint Solutions</a> </h3>
      <p>Select from one of our predefined solution packages for new installs, updates and audits.</p>
     </div>
     <div class="fp-prev-next-wrap clearfix">
      <a class="fp-next" href="#fp-next"></a>
      <a class="fp-prev" href="#fp-prev"></a></div>
    </div>
   </div>
   <!-- Slide 1 Code End -->
   <!-- Slide 2 Code Start -->
   <div style="position: absolute; top: 0px; left: -610px; display: none; z-index: 5; opacity: 1; width: 610px; height: 299px;" class="fp-slides-items">
    <div class="fp-thumbnail">
     <a href="#"><img src="http://igrid103:8888/Style%20Library/Al%20Majed/banner/images/2.jpg" /></a>
    </div>
    <div class="fp-content-wrap">
     <div class="fp-content">
      <h3 class="fp-title"><a href="#">SharePoint 2010 Consulting</a> </h3>
      <p>Microsoft SharePoint 2010: Our experience has been that SharePoint 2010 allows our clients to more easily find relevant actions with the new contextual ribbon and breadcrumb navigation. </p>
     </div>
     <div class="fp-prev-next-wrap clearfix">
      <a class="fp-next" href="#fp-next"></a>
      <a class="fp-prev" href="#fp-prev"></a></div>
    </div>
   </div>
   <!-- Slide 2 Code End -->
   <!-- Slide 3 Code Start -->
   <div style="position: absolute; top: 0px; left: 0px; display: block; z-index: 6; opacity: 1; width: 610px; height: 299px;" class="fp-slides-items">
    <div class="fp-thumbnail">
     <a href="#"><img src="http://igrid103:8888/Style%20Library/Al%20Majed/banner/images/3.jpg" /></a>
    </div>
    <div class="fp-content-wrap">
     <div class="fp-content">
      <h3 class="fp-title"><a href="#">Branding</a> </h3>
      <p>Our design experience enables us to provide you with a made-to-order look and feel for your SharePoint portal that reflects your company’s character. </p>
     </div>
     <div class="fp-prev-next-wrap clearfix">
      <a class="fp-next" href="#fp-next"></a>
      <a class="fp-prev" href="#fp-prev"></a></div>
    </div>
   </div>
   <!-- Slide 3 Code End -->
            <!-- Slide 4 Code Start -->
   <div style="position: absolute; top: 0px; left: 0px; display: block; z-index: 6; opacity: 1; width: 610px; height: 299px;" class="fp-slides-items">
    <div class="fp-thumbnail">
     <a href="#"><img src="http://igrid103:8888/Style%20Library/Al%20Majed/banner/images/3.jpg" /></a>
    </div>
    <div class="fp-content-wrap">
     <div class="fp-content">
      <h3 class="fp-title"><a href="#">Branding</a> </h3>
      <p>Our design experience enables us to provide you with a made-to-order look and feel for your SharePoint portal that reflects your company’s character. </p>
     </div>
     <div class="fp-prev-next-wrap clearfix">
      <a class="fp-next" href="#fp-next"></a>
      <a class="fp-prev" href="#fp-prev"></a></div>
    </div>
   </div>
   <!-- Slide 4 Code End -->
           
             <!-- Slide 4 Code Start -->
   <div style="position: absolute; top: 0px; left: 0px; display: block; z-index: 6; opacity: 1; width: 610px; height: 299px;" class="fp-slides-items">
    <div class="fp-thumbnail">
     <a href="#"><img src="http://igrid103:8888/Style%20Library/Al%20Majed/banner/images/2.jpg" /></a>
    </div>
    <div class="fp-content-wrap">
     <div class="fp-content">
      <h3 class="fp-title"><a href="#">Branding</a> </h3>
      <p>Our design experience enables us to provide you with a made-to-order look and feel for your SharePoint portal that reflects your company’s character. </p>
     </div>
     <div class="fp-prev-next-wrap clearfix">
      <a class="fp-next" href="#fp-next"></a>
      <a class="fp-prev" href="#fp-prev"></a></div>
    </div>
   </div>
   <!-- Slide 4 Code End -->
           
            </div>
  <div class="fp-nav">
   <span class="fp-pager"></span></div>
 </div>
 <div style="clear: both;">
  <!-- Featured Content Slider End --></div>
</div>
</body>

</html>

For jquery and css refer this link https://drive.google.com/?authuser=0#folders/0B89ZxFEbVh4pUUtCOGhNT3I4Yk0

(only for my purpose)










Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)