1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
| <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="Author" content="Daniel Hagnoul" />
<title>Test Lightbox</title>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<style type="text/css">
body {
background-color:#696969;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:medium;
font-style:normal;
font-weight:normal;
line-height:normal;
letter-spacing:normal;
}
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
margin:0px;
padding:0px;
}
div#conteneur {
width:95%;
margin:12px auto;
padding:6px;
background-color:#FFFFFF;
color:#000000;
border:1px solid red;
font-size:0.8em;
}
/* jQuery lightBox plugin - Gallery style */
#galleryUn {
background-color: #444;
padding: 10px;
width: 520px;
}
#galleryUn ul { list-style: none; }
#galleryUn ul li { display: inline; }
#galleryUn ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#galleryUn ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#galleryUn ul a:hover { color: #fff; }
/* jQuery lightBox plugin - Gallery style */
#galleryDeux {
background-color: #444;
padding: 10px;
width: 520px;
}
#galleryDeux ul { list-style: none; }
#galleryDeux ul li { display: inline; }
#galleryDeux ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#galleryDeux ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#galleryDeux ul a:hover { color: #fff; }
</style>
<script type="text/javascript" src="../lib/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#galleryUn a").lightBox();
$("#galleryDeux a").lightBox();
});
</script>
</head>
<body>
<div id="conteneur">
<div id="galleryUn">
<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>
<div> </div>
<div id="galleryDeux">
<ul>
<li>
<a href="photos/centre1910a1.jpg" title="Cartes postales anciennes. Linsmeau. La rue du centre en 1910.">
<img src="photos/thImage-centre1910a1.jpg" width="160" height="102" alt="" />
</a>
</li>
<li>
<a href="photos/Chapelle.jpg" title="Cartes postales anciennes. Linsmeau. La chapelle Notre Dame de la Colombe. Monument classé.">
<img src="photos/thImage-Chapelle.jpg" width="160" height="108" alt="" />
</a>
</li>
<li>
<a href="photos/Chateau.jpg" title="Cartes postales anciennes. Linsmeau. Le chateau de Linsmeau. Ancienne forterese féodale.">
<img src="photos/thImage-Chateau.jpg" width="160" height="109" alt="" />
</a>
</li>
<li>
<a href="photos/cpForge.jpg" title="Cartes postales anciennes. Linsmeau. La rue du centre. La forge.">
<img src="photos/thImage-cpForge.jpg" width="160" height="106" alt="" />
</a>
</li>
<li>
<a href="photos/Eglise.jpg" title="Cartes postales anciennes. Linsmeau. Église Saints Pierre et Paul. Tour ancienne.">
<img src="photos/thImage-Eglise.jpg" width="160" height="109" alt="" />
</a>
</li>
</ul>
</div>
</div>
</body>
</html> |
Partager