effet shadowbox - Informatique Forever

Transcription

effet shadowbox - Informatique Forever
EFFET SHADOWBOX
<p>
Pour réaliser les effets "lightbox" ci-desous, j'ai utilisé le script ShadowBox : <strong><span style="color: rgb(255, 0,
0);"><a href="http://shadowbox-js.com/" target="_blank" title="Le site du script
ShadowBox">ICI</a></span></strong></p>
<p>
<p>
<link href="js/shadowbox/shadowbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/shadowbox/shadowbox.js"></script><script type="text/javascript">
Shadowbox.init({
handleOversize: "drag",
modal: true
});
</script>
<span>Cliquez sur le lien pour faire apparaître l'image :</span> <a href="img/koala50.jpg" rel="shadowbox" title="Voici
un manifique koala">Un koala</a><br />
<br />
<br />
<span>Cliquez sur l'image ci-dessous pour l'agrandir</span><br />
<a href="img/penguins50.jpg" rel="shadowbox" title="3 pingouins"><img alt="penguins15.jpg" border="0"
height="115" src="img/penguins15.jpg" width="154" /></a><br />
<br />
<span>On peut visionner un screencast : ici, la Pub de FireFox (Cliquez sur le lien)</span><br />
<a href="file/ff3_6_screencast_final.ogg" rel="shadowbox;width=480;height=315" title="Pourqoui choisir FireFox
?">FireFox</a><br />
<br />
<span>On peut aussi visionner un extrait de film : ici, The Dark Knight (Cliquez sur l'image)</span><br />
<a href="http://trailers.apple.com/movies/wb/the_dark_knight/the_dark_knight-tlr2_h.480.mov"
rel="shadowbox;width=480;height=204" title="The Dark Knight"><img alt="" class="border" src="img/darkknightthumb.jpg" /></a><br />
<br />
<span>On peut visionner un mini-film en .mpg (Cliquez sur le lien)</span><br />
<a class="border" href="file/extrait-film.mpg" rel="shadowbox;width=600;height=450" title="Alien">L'Alien</a><br
/>
<br />
<span>On peut visionner des .flv (Cliquez sur le lien)</span><br />
<a href="file/evian.flv" rel="shadowbox;width=620;height=350" title="Pub Evian">Pub Evian</a><br />
<br />
<span>On peut visionner une galerie d'images : composée ici de 3 images placées dans un tableau (Cliquez sur
l'une des images)</span></p>
<br />
<table align="center" border="0" cellpadding="0" cellspacing="0" height="60" style="" width="400">
<tbody>
<tr>
<td>
<a href="img/gallerie/thumbstrip01.jpg" rel="shadowbox[gallerie]" title="Image 1"><img
alt="image1" class="border" src="img/gallerie/thumbstrip01.thumb.png" /></a></td>
<td>
<a href="img/gallerie/thumbstrip02.jpg" rel="shadowbox[gallerie]" title="Image 2"><img
alt="image2" class="border" src="img/gallerie/thumbstrip02.thumb.png" /></a></td>
<td>
<a href="img/gallerie/thumbstrip03.jpg" rel="shadowbox[gallerie]" title="Image 3"><img
alt="image3" class="border" src="img/gallerie/thumbstrip03.thumb.png" /></a></td>
</tr>
</tbody>
</table>
<br />
<br />
<p>
<span>On peut faire apparaître un texte caché (Cliquez sur le lien): </span><a href="#inline-sample"
rel="shadowbox">cliquez ici !</a></p>
<div id="inline-sample" style="display:none;">
<div id="inline-sample-content" style="padding:10px;color:white;">
<p>
&nbsp;</p>
<p style="text-align:justify;">
Ce qui suit provient d'un bloc caché dans cette page !<br />
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page
avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre
anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait
que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.
Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum,
et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>
<p>
&nbsp;</p>
</div>
</div>

Documents pareils