My Pastes
Public Pastes
Layout Width
Share Pastebin
Guest
Public paste!

Pretty mais spy

By: a guest | Mar 20th, 2010 | Syntax: HTML | Size: 8.56 KB | Hits: 92 | Expires: Never
Download | Raw | Embed | Report abuse
Copy text to clipboard
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6. <title>Simply Spy</title>
  7. <style type="text/css" media="screen">
  8. <!--
  9.  
  10. /* Style and images take for example purposes only from http://www.quicksnapper.com */
  11.  
  12. body { font: 1em "Lucida Grande",Lucida,Verdana,sans-serif; font-size: 62.5%; line-height: 1;}
  13. input, textarea { font-family: Arial; font-size: 125%; padding: 7px; }
  14. label { display: block; }
  15. p { margin: 0; margin-bottom: 4px;}
  16. h5 { margin: 0; font-weight: normal; }
  17. a:link,
  18. a:hover,
  19. a:visited {
  20.    color: #fff;
  21. }
  22. #sidebar {
  23.    color: #AFB0B1;
  24.    background: #0D171A;
  25.    float:left;
  26.    margin:0 0 24px;
  27.    padding:15px 10px 10px;
  28.    width:300px;
  29. }
  30.  
  31. #sidebar ul {
  32.    font-size:1.2em;
  33.    list-style-type:none;
  34.    margin:0;
  35.    padding:0;
  36.    position:relative;
  37. }
  38.  
  39. .rating {
  40.    background-image:url(http://static.jqueryfordesigners.com/demo/images/simple-spy/info_bar_stars.png);
  41.    background-repeat:no-repeat;
  42.    height:12px;
  43.    text-indent:-900em;
  44.    font-size:1em;
  45.    margin:0 0 9px;
  46. }
  47.  
  48. .none {
  49.         background-position: 82px 0px;
  50. }
  51.  
  52. .four {
  53.         background-position: 82px -48px;
  54. }
  55.  
  56. .five {
  57.         background-position: 82px -60px;
  58. }
  59.  
  60. .tags {
  61.         color: #fff;
  62.         margin: 0.5em;
  63. }
  64.  
  65. .tags a,
  66. .tags span {
  67.         background-color: #333839;
  68.         font-size: 0.8em;
  69.         padding: 0.1em 0.8em 0.2em;
  70. }
  71.  
  72. .tags a:link,
  73. .tags a:visited {
  74.         color: #fff;
  75.         text-decoration: none; 
  76. }
  77.  
  78. .tags a:hover,
  79. .tags a:active {
  80.         background-color: #3e4448;
  81.         color: #fff;
  82.         text-decoration: none; 
  83. }
  84.  
  85. #sidebar li {
  86.    height: 90px;
  87.    overflow: hidden;
  88. }
  89.  
  90. #sidebar li h5 {
  91.    color:#A5A9AB;
  92.    font-size:1em;
  93.    margin-bottom:0.5em;
  94. }
  95.  
  96. #sidebar li h5 a {
  97.    color:#A5A9AB;
  98.    text-decoration:none;
  99. }
  100.  
  101. #sidebar li img {
  102.    float:left;
  103.    margin-right:8px;
  104. }
  105.  
  106. #sidebar li .info {
  107.    color:#3E4548;
  108.    font-size:1em;
  109. }
  110.  
  111. #sidebar .info a,
  112. #sidebar .info a:visited {
  113.    color:#3E4548;
  114.    text-decoration: none;
  115. }
  116.  
  117. #sidebar .spyWrapper {
  118.    height: 100%;
  119.    overflow: hidden;
  120.    position: relative;    
  121. }
  122.  
  123. #sidebar {
  124.         -webkit-border-radius: 5px;
  125.         -moz-border-radius: 5px;
  126. }
  127.  
  128. .tags span,
  129. .tags a {
  130.         -webkit-border-radius: 8px;
  131.         -moz-border-radius: 8px;
  132. }
  133.  
  134. a img {
  135.    border: 0;
  136. }
  137.  
  138. -->
  139. </style>
  140. <script src="http://www.google.com/jsapi"></script>
  141. <script type="text/javascript">
  142.         google.load("jquery", "1.3", {
  143.                 uncompressed : true
  144.         });
  145. </script>
  146. <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
  147. <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
  148. <script type="text/javascript" charset="utf-8">
  149. $(function () {
  150.     $('ul.spy').simpleSpy();
  151. });
  152.  
  153. (function ($) {
  154.    
  155. $.fn.simpleSpy = function (limit, interval) {
  156.     limit = limit || 4;
  157.     interval = interval || 4000;
  158.    
  159.     return this.each(function () {
  160.         // 1. setup
  161.             // capture a cache of all the list items
  162.             // chomp the list down to limit li elements
  163.         var $list = $(this),
  164.             items = [], // uninitialised
  165.             currentItem = limit,
  166.             total = 0, // initialise later on
  167.             height = $list.find('> li:first').height();
  168.            
  169.         // capture the cache
  170.         $list.find('> li').each(function () {
  171.             items.push('<li>' + $(this).html() + '</li>');
  172.         });
  173.        
  174.         total = items.length;
  175.        
  176.         $list.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });
  177.        
  178.         $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
  179.  
  180.         // 2. effect        
  181.         function spy() {
  182.             // insert a new item with opacity and height of zero
  183.             var $insert = $(items[currentItem]).css({
  184.                 height : 0,
  185.                 opacity : 0,
  186.                 display : 'none'
  187.             }).prependTo($list);
  188.                        
  189.             // fade the LAST item out
  190.             $list.find('> li:last').animate({ opacity : 0}, 1000, function () {
  191.                 // increase the height of the NEW first item
  192.                 $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
  193.                
  194.                 // AND at the same time - decrease the height of the LAST item
  195.                 // $(this).animate({ height : 0 }, 1000, function () {
  196.                     // finally fade the first item in (and we can remove the last)
  197.                     $(this).remove();
  198.                 // });
  199.             });
  200.            
  201.             currentItem++;
  202.             if (currentItem >= total) {
  203.                 currentItem = 0;
  204.             }
  205.            
  206.             setTimeout(spy, interval)
  207.         }
  208.        
  209.         spy();
  210.     });
  211. };
  212.    
  213. })(jQuery);
  214.  
  215.  
  216.  
  217. </script>
  218. <script type="text/javascript" charset="utf-8">
  219.                 $(document).ready(function(){
  220.                         $("a[rel^='prettyPhoto']").prettyPhoto();
  221.                 });
  222.         </script>
  223. </head>
  224. <body>
  225.     <h1>Simple Spy</h1>
  226.  
  227.     <div id="sidebar">
  228.         <ul class="spy" class="gallery clearfix">
  229.                 <li>
  230.                         <a href="http://eduardoferreira.files.wordpress.com/2008/10/musa-do-parana-clube.jpg" title="View round" rel="prettyPhoto[gallery1]"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/1.png" title="" /></a>
  231.                         <h5><a href="#" title="View round">round</a></h5>
  232.                         <p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p>
  233.                         <p class='rating none'>Not Rated</p>
  234.  
  235.                         <p class="tags"></p>
  236.                 </li>
  237.  
  238.                 <li>
  239.                         <a href="http://files.jacirholowate.webnode.com.br/200002048-357d536779/1487660.jpeg" title="View Values of n Blog" rel="prettyPhoto[gallery1]"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/9.png" title="" /></a>
  240.                         <h5><a href="#" title="View Values of n Blog">Values of n Blog</a></h5>
  241.  
  242.                         <p class="info">Nov 29th 2008 by <a href="#" title="Visit John Doe's userpage.">John Doe</a></p>
  243.                         <p class='rating none'>Not Rated</p>
  244.  
  245.                         <p class="tags"><a href="#" title='Find more images tagged Brown'>Brown</a> <a href="#" title='Find more images tagged Blogs'>Blogs</a></p>
  246.  
  247.                 </li>
  248.  
  249.                 <li>
  250.                         <a href="http://img.blogs.abril.com.br/1/carnaval-2009/imagens/musa-tapa-sexo600.jpg" title="View why values of n" rel="prettyPhoto[gallery1]"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/10.png" title="" /></a>
  251.                         <h5><a href="#" title="View why values of n">why values of n</a></h5>
  252.                         <p class="info">Nov 29th 2008 by <a href="#" title="Visit John Doe's userpage.">John Doe</a></p>
  253.  
  254.                         <p class='rating none'>Not Rated</p>
  255.                         <p class="tags"><a href="#" title='Find more images tagged Brown'>Brown</a> <a href="#" title='Find more images tagged Values of N'>Values of N</a></p>
  256.  
  257.                 </li>
  258.  
  259.                 <li>
  260.                         <a href="http://portaldasnoticias.com/blogs/santos/files/kelly-medina-musa-santos.jpg" title="View values of n" rel="prettyPhoto[gallery1]"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/11.png" title="" /></a>
  261.                         <h5><a href="#" title="View values of n">values of n</a></h5>
  262.  
  263.                         <p class="info">Nov 29th 2008 by <a href="#" title="Visit John Doe's userpage.">John Doe</a></p>
  264.                         <p class='rating none'>Not Rated</p>
  265.  
  266.                         <p class="tags"><a href="#" title='Find more images tagged Brown'>Brown</a> <a href="#" title='Find more images tagged Homepage'>Homepage</a></p>
  267.  
  268.                 </li>
  269.  
  270.                 <li>
  271.  
  272.                         <a href="http://blogs.odiariomaringa.com.br/edsonlima/wp-content/uploads/2008/07/musa.jpg" title="View stikkit privacy policy" rel="prettyPhoto[gallery1]"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/12.png" title="" /></a>
  273.                         <h5><a href="#" title="View stikkit privacy policy">stikkit privacy policy</a></h5>
  274.  
  275.                         <p class="info">Nov 29th 2008 by <a href="#" title="Visit John Doe's userpage.">John Doe</a></p>
  276.                         <p class='rating none'>Not Rated</p>
  277.                         <p class="tags"><a href="#" title='Find more images tagged Yellow'>Yellow</a> <a href="#" title='Find more images tagged Blue'>Blue</a></p>
  278.  
  279.                 </li>
  280.  
  281.                
  282.         </ul>
  283.     </div>    
  284. </body>
  285. </html>
create new paste | create new version of this paste RAW Paste Data