Forum : Problème avec FancyBox :(

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Hello! Je cherche donc à créer une gallerie avec FancyBox. J'ai mon thumbnail (miniature) qui est en background-image (dans une div id="img1" par exemple) avec par dessus (au survol de la souris) une div (class=""info) qui apparait et qui contient un titre, un paragraphe et une icône représentant une loupe. Au click sur la loupe, je veux que le thumbnail s'affiche en grand et la possibilité de se "balader" dans la galerie.

Entourez votre code avec ce symbole

<head>
        <title>Portfolio</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- Viewport -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Reset -->
        <link rel="stylesheet" href="css/reset.css"/>
        <!-- Liens -->
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="" type="text/javascript" href="http://code.jquery.com/jquery-latest.min.js" />
        <link rel="stylesheet" type="text/css" href="js/fancyBox/source/jquery.fancybox.css" media="screen"/>
        <link rel="" type="text/javascript" href="js/fancyBox/source/jquery.fancybox.pack.js"/
    </head>

    <body>
    <section class="mdlWidthContent autoMargin noFlexPadding">
            <h2 id="gallery">Portfolio</h2>
            <ul class="flex spacearound fullWidthContent">
                <li class="autoMargin">
                    <div class="item" id="img1">
                        <div class="info txtcenter">
                            <h4 class="whiteColor">Quidam</h4>
                            <p class="whiteColor">Design réalisé pour une maison d'édition</p>
                            <a class="fancybox" rel="group1" href="img/gallery1.jpg" data-fancybox-group="gallery" title="Quidam web design"><img alt="" title="" src="img/search.jpg"/></a>
                        </div>
                    </div>
                </li>
                <li class="autoMargin">
                    <div class="item fullWidthContent relative" id="img2">
                        <div class="info txtcenter">
                            <h4 class="whiteColor">McKopat</h4>
                            <p class="whiteColor">Website réalisé pour un rapper</p>
                            <a class="fancybox" rel="group1" href="img/gallery2.png" data-fancybox-group="gallery" title="McKopat web design developement"><img alt="" title="" src="img/search.jpg"/></a>
                        </div>
                    </div>
                </li>
             </ul>
        </section>
    </body>
    </html>

    CSS

     #img1
{
    background-image: url('../img/thumb1.png');
    width: 200px;
    height: 200px;
}

#img2
{
    background-image: url('../img/thumb2.png');
    width: 200px;
    height: 200px;
}

.item {
    border-radius: 50%;
    overflow: hidden;
    cursor: default;
    box-shadow: 
        inset 0 0 0 16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.4s ease-in-out;
}

.info {
    background: rgba(20, 20, 20, 0.8) none repeat scroll 0 0;
        width: inherit;
        height: inherit;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}

.info p
{
    font-size: 1.2rem;
    border-top: 1px solid rgba(255,255,255,0.5);
    margin: 0 30px;
    padding: 10px 5px 5px 5px;;
    transition: all 1s ease-in-out 0.4s;
    opacity: 0;

}

.info a
{
    font-weight: 700;
    color: #fff;
}

.item:hover {
    box-shadow: 
        inset 0 0 0 1px rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.1);
}

.item:hover .info {
    transform: scale(1);
    opacity: 1;
}

.item:hover .info p {
    opacity: 1;
}

JAVASCRIPT

<script type="text/javascript">       
$(document).ready(function() {
    $(".fancybox").fancybox({
        openEffect  : 'none',
        closeEffect : 'none'
    });
});
</script>

Ce que je veux

Je voudrais que ma galerie fonctionne et qu'elle s'affiche lorsque l'on clique sur le lien (en l'occurence mon icône "search").

Ce que j'obtiens

Ma galerie ne fonctionne tout simplement pas. Elle ouvre mon image dans une nouvelle fenêtre, je ne reste pas sur ma page. J'ai vérifié tous mes liens : ils fonctionnent. Mais c'est comme si la galerie n'était pas activée, pas reconnue...
Je me demande si c'est parce que mon lien (la balise img contenue dans un lien avec class="fancyBox") n'apparait qu'au survol de la souris. Enfin voilà je ne sais pas... Any idea? :)

Problème avec FancyBox :(

Ce que je fais

Ce que je veux

Ce que j'obtiens

1 réponse