js/jquery-lightbox-0.5/index.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3 <head>
   4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5     <title>jQuery lightBox plugin</title>
   6
   7         <link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
   8
   9     <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
  10     <script type="text/javascript" src="js/jquery.js"></script>
  11     <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
  12     <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
  13     <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
  14
  15     <!-- Ativando o jQuery lightBox plugin -->
  16     <script type="text/javascript">
  17     $(function() {
  18         $('#gallery a').lightBox();
  19     });
  20     </script>
  21         <style type="text/css">
  22         /* jQuery lightBox plugin - Gallery style */
  23         #gallery {
  24                 background-color: #444;
  25                 padding: 10px;
  26                 width: 520px;
  27         }
  28         #gallery ul { list-style: none; }
  29         #gallery ul li { display: inline; }
  30         #gallery ul img {
  31                 border: 5px solid #3e3e3e;
  32                 border-width: 5px 5px 20px;
  33         }
  34         #gallery ul a:hover img {
  35                 border: 5px solid #fff;
  36                 border-width: 5px 5px 20px;
  37                 color: #fff;
  38         }
  39         #gallery ul a:hover { color: #fff; }
  40         </style>
  41 </head>
  42
  43 <body>
  44
  45 <h2 id="example">Example</h2>
  46 <p>Click in the image and see the <strong>jQuery lightBox plugin</strong> in action.</p>
  47 <div id="gallery">
  48     <ul>
  49         <li>
  50             <a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
  51                 <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
  52             </a>
  53         </li>
  54         <li>
  55             <a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
  56                 <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
  57             </a>
  58         </li>
  59         <li>
  60             <a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
  61                 <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
  62             </a>
  63         </li>
  64         <li>
  65             <a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
  66                 <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
  67             </a>
  68         </li>
  69         <li>
  70             <a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
  71                 <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
  72             </a>
  73         </li>
  74     </ul>
  75 </div>
  76
  77 </body>
  78 </html>