Problème du code de mon site avec une lightbox jquery

Résolu

Justinedupre Messages postés 34 Date d'inscription Statut Membre Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention - 1 juin 2016 à 11:09

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.

Afficher la suite

A voir également:

Problème du code de mon site avec une lightbox jquery
Code ascii - Guide
Site de telechargement - Accueil - Outils
Site comme coco - Accueil - Réseaux sociaux
Quel site remplace coco - Accueil - Réseaux sociaux
Site de partage de photos - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 )

Justinedupre Messages postés 34 Date d'inscription Statut Membre Dernière intervention 5

Merci de ton aide,
finalement je l'avais supprimé et remise et tout est résolu :)

Merci quand même

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > Justinedupre Messages postés 34 Date d'inscription Statut Membre Dernière intervention

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

Discussions similaires

C'est quoi le site qui remplace coco chat

Votre réponse

Discussions similaires