Sujet Précédent Sujet Suivant

Problème avec FancyBox :(

Fermé
anna1989 - 27 avril 2016 à 00:13
 anna1989 - 27 avril 2016 à 15:58
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. 



<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? :)


1 réponse

Réponse 1 / 1
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié par Pitet le 27/04/2016 à 15:20
Salut,

Un bon réflexe à prendre en développement javascript est de vérifier si des erreurs apparaissent dans la console de développement de ton navigateur.

Le problème vient surement de l'import des scripts externes : en effet l'import des scripts javascript externes se fait via une balise <script> contrairement aux fichiers css externes qui s'importent via une balise <link> : 
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- JS -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>


Pour info, en HTML5 la valeur par défaut de l'attribut type de la balise <script> est "text/javascript", il n'est donc pas nécessaire de le renseigner pour des scripts javascript.

Bonne journée
0
anna1989
27 avril 2016 à 15:58
Un grand grand merci!!!!! J'étais sûre que mon erreur était toute bête :)
Bonne journée :)
0