view/theme/diabook-blue/lightbox/index.htm

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