Voir la source de FancyBox

[[Category:Web]]
= Liens =
* [http://www.fancyapps.com/fancybox fancybox]
* [https://github.com/fancyapps/fancyBox fancyBox sur github]

= Utilisation =
<kode lang='html'>
<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>
</kode>

== Thumbnail helper ==
<kode lang='html'>
<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>
</kode>

== Ouvrir fancyBox au chargement de la page ==
<kode lang='html'>
<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>
</kode>