FancyBox
De Banane Atomic
Aller à la navigationAller à la recherche
Liens
Utilisation
|
<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript">
$(".fancybox").fancybox({
padding : 0
});
</script>
</head>
<body>
<a data-fancybox-group="gallery1" class="fancybox" href="img/1.jpg">
<img src="img/1.jpg" alt="" width="300px"/>
</a>
<a data-fancybox-group="gallery1" class="fancybox" href="img/2.jpg">
<img src="img/2.jpg" alt="" width="300px"/>
</a>
</body>
|
Thumbnail helper
|
|
<head>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(".fancybox").fancybox({
padding : 0,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
</script>
</head>
|
Ouvrir fancyBox au chargement de la page
|
|
<head>
<script type="text/javascript">
$(document).ready(function() {
// sélectionné le premier élément et simule un click
$(".fancybox").eq(0).trigger('click');
});
</script>
</head>
|
