Discussion :

[MInfo25]

Bonjour

J'utilise ce code en lien pour créer un diaporama mais dès que j'insère le code, tous les autres parties du site se déplace et surtout les autres images du site ne s'affichent plus.

https://codepen.io/dudleystorey/pen/kFoGw

Comment ajouter un diaporama sans chambouler mon site, svp ??

Je vous remercie de votre aide !

[Invité]

Bonjour,

1- supprime la balise <base> du code, et mets les URL absolue des images dans les <img src="......">

L'élément <base> définit l'URL de base à utiliser pour recomposer toutes les URL relatives contenues dans un document.
Il ne peut y avoir qu'un seul élément <base> au sein d'un document.

2- sans voir ton code ou un lien en ligne, on ne peut pas savoir ce qui "chamboule"...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
body, figure { 
  margin: 0; background: #101010;
...

supprime aussi "body" du CSS du slider. Tu l'as certainement défini ailleurs.

[MInfo25]

Je ne sais pas trop comment vous montrer le code, c'est assez long mais voici le lien du site lorsque je n'ajoute pas le diaporama avec les keyframes en css :http://www.hotel-du-havre.fr
Le diaporama de ce site a été fait avec un module qui n'est plus supporté par les navigateurs mobiles actuels, du coup les diaporama ne s'affichent pas sur les mobiles.

Maintenant lorsque j'ajoute le diaporama avec les keyframes en css, j'obtiens le rendu que vous pouvez voir sur ce lien, ça va dans tous les sens le site est chamboulé : http://lamaisondechine.allkers.com

[Invité]

Bon.

ton code est une catastrophe... catastrophique.

Le meilleur conseil que je puisse te donner est de TOUT reprendre de zéro (HTML + CSS).

Autres conseils :

• puisque tu as du jQuery, utilise un slider jQuery. Tu seras plus tranquille
• Remplace ton balisage "old school" et mal foutu par du HTML5, avec des balises sémantiques (<header>,<main>, <section>, <article>,...).
• fais un site "responsive". Il sera mieux référencé

• Web sémantique et (X)HTML5 (sauf <hgroup>, déprécié)
• 101 balises HTML5 + exemples

[MInfo25]

Oui je sais que le code n'est pas du tout bon en fait c'est pas moi qui ait crée le site, il a été crée par une agence web il y a 10 ans. La propriétaire du site m'a juste demandé de changer des photos, mais j'ai constaté que les diaporama ne s'affichent pas sur les mobiles et c'est ce que je veux juste faire en plus !

Je regarde pour les slider JQuery !

Merci

[MInfo25]

Bonjour

J'utilise un slider jquery, la démo fonctionne bien mais quand je l'intègre sur mon site, il ne fonctionne plus, la première image reste figée, y a plus de transition. J'utilise le ResponsiveSlides (http://responsiveslides.com/ )

Voici mon site de test : http://lamaisondechine.allkers.com (le slider est celui à l'entête du site)

Voici le code où j'ai intégré le slider :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<div id="header">
 
	<h1 title="H&ocirc;tel du Havre"><a href="/" title="H&ocirc;tel du Havre">H&ocirc;tel du Havre</a></h1>
 
 
	<p id="pre"><a href="http://www.monsite.fr" title="www.monsite.fr">H&ocirc;tel du Havre - Yvet&ocirc;t, Pays de Caux - H&eacute;bergement, restauration, bar brasserie et s&eacute;minaire &agrave; Rouen, Le Havre, F&eacute;camp et Honfleur</a></p>
 
 
	<span id="logo-hotel-3-etoiles">H&ocirc;tel l'OH - H&ocirc;tel du Havre - Etablissement 3 &eacute;toiles</span>
 
 
<!--	<span id="theme">&lsquo; P&acirc;ques &rsquo;</span> -->
 
 
	<!--span id="logo-maitrerestaurateur">Ma&icirc;tre Restaurateur</span -->
	<span id="logo-qualitetourisme">QUALIT&Eacute; TOURISME</span>
	<!-- <span id="logo-facebook"><a href="#" target="_blank" title="Suivez-nous sur Facebook">Suivez-nous sur Facebook</a></span> -->
	<span id="logo-contacthotel"><a href="http://www.contact-hotel.com/hotel-france/1567/hotel-l-oh--hotel-du-havre---yvetot.htm" target="_blank">Contact H&ocirc;tel</a></span>
 
 
	<span id="intl"><a href="<?php print PATH ?>/fr<?php print ((getCurrent($_SERVER['REQUEST_URI'])!='/' && getCurrent($_SERVER['REQUEST_URI'])!='/fr')?getCurrent($_SERVER['REQUEST_URI']):'') ?>" title="Fran&ccedil;ais"><img src="<?php print PATH.'/img/icon/fr.png' ?>" alt="Fran&ccedil;ais" /></a> <a href="<?php print PATH ?>/en<?php print ((getCurrent($_SERVER['REQUEST_URI'])!='/' && getCurrent($_SERVER['REQUEST_URI'])!='/en')?getCurrent($_SERVER['REQUEST_URI']):'') ?>" title="English"><img src="<?php print PATH.'/img/icon/gb.png' ?>" alt="English" /></a> <a href="<?php print PATH ?>/de<?php print ((getCurrent($_SERVER['REQUEST_URI'])!='/' && getCurrent($_SERVER['REQUEST_URI'])!='/de')?getCurrent($_SERVER['REQUEST_URI']):'') ?>" title="Deutsch"><img src="<?php print PATH.'/img/icon/de.png' ?>" alt="Deutsch" /></a></span>
 
 
	<div id="slider">
<ul class="rslides" id="sliderTop">
  <li><img src="http://lamaisondechine.allkers.com/img/layout/bg_header_slider_00.jpg" alt=""></li>
  <li><img src="http://lamaisondechine.allkers.com/img/layout/bg_header_slider_01.jpg" alt=""></li>
  <li><img src="http://lamaisondechine.allkers.com/img/layout/bg_header_slider_02.jpg" alt=""></li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="src/js/responsiveslides.min.js"></script>
<script src="src/js/jquery.min.js"></script>
<script src="src/js/jquery.js"></script>
<script>
    $(function () {
      $(".rslides").responsiveSlides({
        auto: true,
                                maxwidth: 800,
        speed: 800,
                                timeout: 4000,
                                namespace: "rslides",
        before: function(){},
        after: function(){}
      });
                });
        </script>
	<style type="text/css">
        .rslides {
          position: relative;
          list-style: none;
          overflow: hidden;
          width: 100%;
                height: 390px;
          padding: 0;
          margin: 0;
          }
 
 
        .rslides li {
          -webkit-backface-visibility: hidden;
          position: absolute;
          display: none;
          width: 100%;
          left: 0;
          top: 0;
          }
 
 
        .rslides li:first-child {
          position: relative;
          display: block;
          float: left;
          }
 
 
        .rslides img {
          display: block;
          height: auto;
          float: left;
          width: 100%;
          border: 0;
          }
        </style>
	</div>
</div>

Je vous remercie de votre aide !

[headmax]

Je pense que tu devrait déclarer une seule et unique fois jquery dans ta page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> //une fois
<script src="src/js/responsiveslides.min.js"></script>
<script src="src/js/jquery.min.js"></script> //deux fois et après responsiveslides
<script src="src/js/jquery.js"></script> // 3 fois ...

essaye plutôt :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<head> ...
<script src="src/js/jquery.min.js"></script> 
</head>
...
 
<script src="src/js/responsiveslides.min.js"></script>

supprime la 4ème référence plus bas dans ta page soit tu déclare 4 fois plus ou moins la même librairie ce qui a un impacte dans ton script.

[Invité]

Comme dit headmax, tu as beaucoup de nettoyage de code à faire si tu veux pouvoir avancer.

[MInfo25]

Je crois que j'ai peut-être un problème au niveau des adresses de fichiers, j'ai du mal avec ça. Je vous présente mon arborescence projet :

[NoSmoking]

Bonjour,
tu ne tiens pas compte des conseils qui te sont donnés concernant par exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<script src="../src/js/responsiveslides.min.js"></script>
<script src="../src/js/jquery.min.js"></script>

lorsque l'on veut creuser un trou avec une pelle la première chose est d'avoir une pelle

[MInfo25]

J'ai fait ça et ça ne change rien, une seule image est toujours figée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<head> ...
<script src="src/js/jquery.min.js"></script> 
</head>
...
 
<script src="src/js/responsiveslides.min.js"></script>

Y a peut-être des incompatibilités que je ne comprends pas. Je continue à réfléchir