Project

General

Profile

Download (2.93 KB) Statistics
| Branch: | Tag: | Revision:
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>
    (1-1/1)