Problème du code de mon site avec une lightbox jquery [Résolu/Fermé]

Signaler
Messages postés
34
Date d'inscription
mercredi 11 mai 2016
Statut
Membre
Dernière intervention
1 juin 2016
-
Messages postés
30358
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
27 novembre 2020
-
Bonjour,

J'ai un soucie dans le code de mon site,

j'ai installé une lightbox mais deux problèmes se posent,
elle ne marche que s'il y a un '.' en plein milieu du code (je l'ai mis en gras, ligne 7) et elle décalle également ma nav vers le bas ...

SI quelqu'un trouvait le problème ce serait super ! merci

<!DOCTYPE html>
<html lang="fr">
 <head>

  <title>Portfolio Justine - Work</title>
  
  <meta charset="UTF-8"/><bold>.
</bold>
  <link rel="stylesheet" href="css/reset.css"/>
  <link rel="stylesheet" href="css/main.css"/>
  <link href="dist/css/lightbox.min.css" rel="stylesheet">
<script src="js/jquery-2.2.1.min.js"></script>
<script src="dist/js/lightbox.min.js"></script>

 </head>




 <body class="center" id="fond2">
 <header class="clearfix">
 <nav class="clearfix">
   <ul id="ul1">
   <li><a href="index.html" id="home" >Home</a></li>
   <li><a href="work.html" id="work" class="active">Work</a>
    <ul id="menud">
     <li><a href="work.html">PAO</a></li>
     <li><a href="workvideo.html">VIDEO</a></li>
     <li><a href="workphoto.html" >PHOTO</a></li>
     <li><a href="workdessin.html">DESSIN</a></li>
   </li>
    </ul>
   <li><a href="contact.html" id="contact">Contact</a></li>
  </ul>

 <h1 id="ul2"><a href="index.html">
  <img src="img/logomini.png" alt="Logo"/>
 </a></h1>

 </nav>
</header>

 <article class="center">

  <h1 id="titrepage2">WORK</h1>
  <ul id="titre2">
   <li><a href="work.html" class="active1"id="st1">PAO</a></li>
   <li><a href="workvideo.html" id="st2">VIDEO</a></li>
   <li><a href="workphoto.html"  id="st3">PHOTO</a></li>
   <li><a href="workdessin.html" id="st4">DESSIN</a></li>


  </ul>
</article>

  <article class="center">

  <div class="clearfix zoom1" id="figuremini">

  
  <figure class="over">
  <a href="img/soda.png" data-lightbox="marc" title="Capsule de boissons">
    <img src="img/sodamini.jpg" alt="neon" id="neon"/>
  <figcaption>
  <h1>Illustrator </h1>
  <p>Capsules de boissons</p>
  </figcaption></a>
  </figure>


  <figure class="over" >
    <a href="img/princess.png" data-lightbox="marc" title="Affiche - Keep calm"><img src="img/princessmini2.jpg" alt="princess"/>
  <figcaption>
  <h1>Affiche - Photoshop</h1>
  <p> Affiche Keep Calm</p>
  </figcaption>
  </a>   
  </figure>


   <figure class="over">
    <a href="img/oasis.jpg" data-lightbox="marc" title="Affiche pub - Bouteille Oasis"><img src="img/oasismini2.jpg" alt="oasis" id="oasis" />
  <figcaption>
  <h1>Affiche - Illustrator</h1>
  <p>Publicité Oasis</p>
  </figcaption>
  </a>   
 </figure>


 <figure class="over">
    <a href="img/classique.png" data-lightbox="marc" title="Affiche - Danse classique"><img src="img/classiquemini2.jpg" alt="danse classique" id="danse"/>
  <figcaption>
  <h1>Affiche - Photoshop</h1>
  <p>Affiche danse classique</p>
  </figcaption> 
  </a>  
 </figure>


 <figure class="over">
   <a href="img/demakup.png" data-lightbox="marc" title="Affiche pub - Demak'up">
    <img src="img/visagemini2.jpg" alt="demakup" id="demakup"/>
  <figcaption>
  <h1>Affiche - Photoshop</h1>
  <p>Publicité Demak'up</p>
  </figcaption>
  </a>   
 </figure>



 <figure class="over">
   <a href="img/lessismore.png" data-lightbox="marc" title="Affiche - Exposition "Less is more"">
    <img src="img/lessismoremini2.jpg" alt="lessismores" id="less"/>
  <figcaption>
  <h1>Affiche - Photoshop</h1>
  <p>Exposition Mies Van der Rohe</p>
  </figcaption>
  </a>
 </figure>


 <figure class="over">
   <a href="img/macdo.jpg" data-lightbox="marc" title="Affiche pub - Macdonald">
    <img src="img/macdomini2.jpg" alt="macdo" id="macdo"/>
  <figcaption>
  <h1>Affiche - Photoshop</h1>
  <p>Publicité Mcdonald</p>
  </figcaption> 
  </a>   
 </figure>


 <figure class="over">
   <a href="img/drive.png" data-lightbox="marc" title="Affiche film - Drive">
    <img src="img/drivemini2.jpg" alt="drive" id="drive"/>
  <figcaption>
  <h1>Affiche - Photoshop</h1>
  <p>Affiche du film Drive</p>
  </figcaption>
  </a>
 </figure>


 
 <figure class="over">
  <a href="img/drivecitation.jpg" data-lightbox="marc" title="Affiche citation - Drive">
    <img src="img/drivecitationmini2.jpg" alt="drivecitation" id="drivecitation"/>
  <figcaption>
  <h1>Affiche - Photoshop</h1>
  <p>Citation du film Drive</p>
  </figcaption> 
  </a>   
 </figure> 

 <figure class="over">
  <a href="img/miracle.png" data-lightbox="marc" title="Affiche film - Miracle">
    <img src="img/miraclemini2.jpg" alt="miracle" id="miracle"/>
  <figcaption>
  <h1>Affiche - Illustrator</h1>
  <p>Affiche du film Miracle</p>
  </figcaption>
  </a>
 </figure>


 <figure class="over">
  <a href="img/vin.jpg" data-lightbox="marc" title="Affiche citation - Musique">
    <img src="img/vinmini2.jpg" alt="miracle" id="Jul"/>
  <figcaption>
  <h1>Affiche - Photoshop</h1>
  <p>Citation de chanson </p>
  </figcaption>
  </a>
 </figure>

 <figure class="over">
  <a href="img/leprenom.jpg" data-lightbox="marc" title="Affiche film - Le Prénom">
    <img src="img/leprenommini2.jpg" alt="prenom" id="prenom"/>
  <figcaption>
  <h1>Affiche - Illustrator</h1>
  <p>Affiche du film Le Prénom </p>
  </figcaption>
  </a>
 </figure>
  
  
 <figure class="over">
  <a href="img/airforce.jpg" data-lightbox="marc" title="Affiche pub - Nike">
    <img src="img/nikemini2.jpg" alt="airforce" id="airforce"/>
  <figcaption>
  <h1>Affiche - Photoshop</h1>
  <p>Publicité pour NIKEiD</p>
  </figcaption></a>    
 </figure>



<figure class="over">
  <a href="img/pingouin.png" data-lightbox="marc" title="Pingouin">
    <img src="img/pingouinmini.jpg" alt="pingouin" id="pingouin"/>
  <figcaption>
  <h1>Illustrator </h1>
  <p>Pingouin</p>
  </figcaption></a> 

 </figure>
 <figure class="over">
  <a href="img/cartedevisite.jpg" data-lightbox="marc" title="Carte de visite">
    <img src="img/cartedevisitemini2.jpg" alt="carte" id="carte"/>
  <figcaption>
  <h1>Illustrator/Photoshop </h1>
  <p>Carte de visite Chauffeur privé</p>
  </figcaption></a>    
 </figure>

<figure class="over">
  <a href="img/neon.jpg" data-lightbox="marc" title="Néon Close">
    <img src="img/neonmini.jpg" alt="neon" id="neon"/>
  <figcaption>
  <h1>Illustrator </h1>
  <p>Néon "Close"</p>
  </figcaption></a>    
 </figure>


<figure class="over">
  <a href="img/pingouinmockup.png" data-lightbox="marc" title="T-shirt pingouin">
    <img src="img/pingouinmockupmini.png" alt="pingouin" id="pingouin"/>
  <figcaption>
  <h1>Illustrator/Photoshop </h1>
  <p>T-shirt pingouin</p>
  </figcaption></a>    
 </figure>

 <figure class="over">
  <a href="img/robot.jpg" data-lightbox="marc" title="Robot">
    <img src="img/robotmini.jpg" alt="neon" id="robot"/>
  <figcaption>
  <h1>Illustrator</h1>
  <p>Robot</p>
  </figcaption></a>    
 </figure>

  </div> 




 </article>
 <footer>
  <p>
   Justine Claverie © - 2016
  </p>
 </footer>
 <script src="path/to/lightbox.js"></script>

 </body>

</html>





EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici :ICI

Merci d'y penser dans tes prochains messages.

1 réponse

Messages postés
30358
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
27 novembre 2020
3 031
Bonjour,

Commence par lire ceci : https://www.alsacreations.com/astuce/lire/69-declarer-encodage-des-caracteres.html

Ensuite, une fois les corrections apportées, que t'affiche la CONSOLE de ton navigateur lorsque tu essayes de faire fonctionner ton script ?
(De préférence... utilise le plugin FIREBUG pour FIREFOX )
Messages postés
34
Date d'inscription
mercredi 11 mai 2016
Statut
Membre
Dernière intervention
1 juin 2016
3
Merci de ton aide,
finalement je l'avais supprimé et remise et tout est résolu :)

Merci quand même
Messages postés
30358
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
27 novembre 2020
3 031 >
Messages postés
34
Date d'inscription
mercredi 11 mai 2016
Statut
Membre
Dernière intervention
1 juin 2016

Si la question est résolue..
Merci de ne pas oublier de clôturer le sujet
(en cliquant sur le lien "Marquer comme résolu" qui se trouve sous le titre de la question)

Cordialement,
Jordane