diff options
Diffstat (limited to 'view/theme/diabook-blue/lightbox/index.htm')
| -rw-r--r-- | view/theme/diabook-blue/lightbox/index.htm | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/view/theme/diabook-blue/lightbox/index.htm b/view/theme/diabook-blue/lightbox/index.htm new file mode 100644 index 000000000..5daa72a0f --- /dev/null +++ b/view/theme/diabook-blue/lightbox/index.htm @@ -0,0 +1,78 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>jQuery lightBox plugin</title>
+
+ <link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
+
+ <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
+ <script type="text/javascript" src="js/jquery.js"></script>
+ <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
+ <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
+ <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
+
+ <!-- Ativando o jQuery lightBox plugin -->
+ <script type="text/javascript">
+ $(function() {
+ $('#gallery a').lightBox();
+ });
+ </script>
+ <style type="text/css">
+ /* jQuery lightBox plugin - Gallery style */
+ #gallery {
+ background-color: #444;
+ padding: 10px;
+ width: 520px;
+ }
+ #gallery ul { list-style: none; }
+ #gallery ul li { display: inline; }
+ #gallery ul img {
+ border: 5px solid #3e3e3e;
+ border-width: 5px 5px 20px;
+ }
+ #gallery ul a:hover img {
+ border: 5px solid #fff;
+ border-width: 5px 5px 20px;
+ color: #fff;
+ }
+ #gallery ul a:hover { color: #fff; }
+ </style>
+</head>
+
+<body>
+
+<h2 id="example">Example</h2>
+<p>Click in the image and see the <strong>jQuery lightBox plugin</strong> in action.</p>
+<div id="gallery">
+ <ul>
+ <li>
+ <a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
+ <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
+ </a>
+ </li>
+ <li>
+ <a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
+ <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
+ </a>
+ </li>
+ <li>
+ <a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
+ <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
+ </a>
+ </li>
+ <li>
+ <a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
+ <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
+ </a>
+ </li>
+ <li>
+ <a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
+ <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
+ </a>
+ </li>
+ </ul>
+</div>
+
+</body>
+</html>
\ No newline at end of file |