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
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
\r
5 <title>jQuery lightBox plugin</title>
\r
7 <link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
\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
15 <!-- Ativando o jQuery lightBox plugin -->
\r
16 <script type="text/javascript">
\r
18 $('#gallery a').lightBox();
\r
21 <style type="text/css">
\r
22 /* jQuery lightBox plugin - Gallery style */
\r
24 background-color: #444;
\r
28 #gallery ul { list-style: none; }
\r
29 #gallery ul li { display: inline; }
\r
31 border: 5px solid #3e3e3e;
\r
32 border-width: 5px 5px 20px;
\r
34 #gallery ul a:hover img {
\r
35 border: 5px solid #fff;
\r
36 border-width: 5px 5px 20px;
\r
39 #gallery ul a:hover { color: #fff; }
\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
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
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
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
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
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