Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1409 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Html Fancybox

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Html Fancybox

n°2294861
killan
Posté le 17-01-2017 à 01:45:54  profilanswer
 

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
mood
Publicité
Posté le 17-01-2017 à 01:45:54  profilanswer
 

n°2294862
Hermes le ​Messager
Breton Quiétiste
Posté le 17-01-2017 à 03:49:56  profilanswer
 

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 ?

n°2294863
killan
Posté le 17-01-2017 à 04:03:39  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Html Fancybox

 

Sujets relatifs
Problème basique de page html[C#/HTML] Formater un email via HTML
Code HTML interprété différent chez OVHlancer vidéos à partir d'une page HTML en local, c'est possible ?
[Aide] HTML/CSS - Réinitialiser une requête[HTML] Open Graph : Facebook ne voit pas mon og:image
Petite idée site HTMLIntégrer une partie d'une autre page web dans une page html/php
Macro word : trouver format et ajouter balises html 
Plus de sujets relatifs à : Html Fancybox

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.067 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR