Html Fancybox

Html Fancybox - HTML/CSS - Programmation

Marsh Posté le 17-01-2017 à 01:45:54    

Bonjour,
 
J'essaye d’intégrer fancybox à mon site web pour agrandir certaines images lorsque je clic dessus.
En local tout fonctionne bien, mais lorsque j'upload mes pages en ligne, les images s'agrandissent comme un simple lien vers elles mêmes.
 
j'ai d'abord pensé que c'était du a un problème de lien entre les fichiers, mais l'arborescence en local et en ligne est identique.
 
Voila le code entre mes balises head:  
 

Code :
  1. <head>
  3. <title>mon site</title>
  5. <link href="CSS gallerie.css" rel="stylesheet" type="text/css">
  6. <!-- Add jQuery library -->
  8. <script src="jquery.js"></script>
  10. <!-- Add mousewheel plugin (this is optional) -->
  11. <script type="text/javascript" src="fancybox/lib/jquery.mousewheel.pack.js"></script>
  13. <!-- Add fancyBox -->
  14. <link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
  15. <script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.6"></script>
  17. <!-- Optionally add helpers - button, thumbnail and/or media -->
  18. <link rel="stylesheet" href="fancyBox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
  19. <script type="text/javascript" src="fancyBox/source/helpers/jquery.fancybox-buttons.js"></script>
  20. <script type="text/javascript" src="fancyBox/source/helpers/jquery.fancybox-media.js"></script>
  22. <link rel="stylesheet" href="fancyBox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
  23. <script type="text/javascript" src="fancyBox/source/helpers/jquery.fancybox-thumbs.js"></script>
  25. <script type="text/javascript">
  26.  $(document).ready(function() {
  28.   $('.fancybox').fancybox();
  29. });
  30. </script>
  32. </head>


 
Et ici le bout de code pour inserer une image:  
 

Code :
  1. <div class="float">
  2. <a class="fancybox" rel="group" href="champi.jpg"><img src="champi.jpg" alt="" /></a>
  3. </div>


 
 
Le resultat local:
 
http://sofiangallerie.shost.ca/image_local_petite.jpg
 
Le resultat en ligne:
 
http://sofiangallerie.shost.ca/image_ligne_petite.jpg
 
Merci d'avance pour votre aide!

Message cité 1 fois
Reply

Marsh Posté le 17-01-2017 à 01:45:54   

Reply

Marsh Posté le 17-01-2017 à 03:49:56    

killan a écrit :

Bonjour,
 
J'essaye d’intégrer fancybox à mon site web pour agrandir certaines images lorsque je clic dessus.
En local tout fonctionne bien, mais lorsque j'upload mes pages en ligne, les images s'agrandissent comme un simple lien vers elles mêmes.
 
j'ai d'abord pensé que c'était du a un problème de lien entre les fichiers, mais l'arborescence en local et en ligne est identique.
 
Voila le code entre mes balises head:  
 

Code :
  1. <head>
  3. <title>mon site</title>
  5. <link href="CSS gallerie.css" rel="stylesheet" type="text/css">
  6. <!-- Add jQuery library -->
  8. <script src="jquery.js"></script>
  10. <!-- Add mousewheel plugin (this is optional) -->
  11. <script type="text/javascript" src="fancybox/lib/jquery.mousewheel.pack.js"></script>
  13. <!-- Add fancyBox -->
  14. <link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
  15. <script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.6"></script>
  17. <!-- Optionally add helpers - button, thumbnail and/or media -->
  18. <link rel="stylesheet" href="fancyBox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
  19. <script type="text/javascript" src="fancyBox/source/helpers/jquery.fancybox-buttons.js"></script>
  20. <script type="text/javascript" src="fancyBox/source/helpers/jquery.fancybox-media.js"></script>
  22. <link rel="stylesheet" href="fancyBox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
  23. <script type="text/javascript" src="fancyBox/source/helpers/jquery.fancybox-thumbs.js"></script>
  25. <script type="text/javascript">
  26.  $(document).ready(function() {
  28.   $('.fancybox').fancybox();
  29. });
  30. </script>
  32. </head>


 
Et ici le bout de code pour inserer une image:  
 

Code :
  1. <div class="float">
  2. <a class="fancybox" rel="group" href="champi.jpg"><img src="champi.jpg" alt="" /></a>
  3. </div>


 
 
Le resultat local:
 
http://sofiangallerie.shost.ca/image_local_petite.jpg
 
Le resultat en ligne:
 
http://sofiangallerie.shost.ca/image_ligne_petite.jpg
 
Merci d'avance pour votre aide!


 
<link href="CSS gallerie.css" rel="stylesheet" type="text/css">
 
C'est quoi ce nom de fichier css ? Déjà pas d'espace dans les noms de fichier. Il est sur le serveur ? Et jquery.js aussi ?

Reply

Marsh Posté le 17-01-2017 à 04:03:39    

J'ai corrigé le nom des fichiers
 
Oui, les 2 sont sur le serveur
 
A gauche les fichiers en local, a droite ceux sur le serveur:
 
http://sofiangallerie.shost.ca/arborescence.jpg

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed