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>