Problème integration du slideshow s3Slider dans PEEL V5.7

[pieralex 0]

Bonjour à tous,

Je souhaite intégrer un bandeau animé par des photos avec du texte en grand format sur mon site. J'ai trouvé un script qui correspond exactement à ce que je cherche qui s'appelle s3Slider mais après l'installation j'ai une image fixe sans texte.

Voici le lien qui montre comment intégrer ce slideshow : http://www.serie3.info/s3slider/

Mon site est à l'adresse suivante : www.kultimages.com

Ma page de test est à l'adresse suivante : http://www.kultimages.com/lire/your-kult-i...17/test-18.html

Voici ce que j'ai fais :

1/Librairie js :

Je n'ai pas intégré Jquery car il est déjà dans peel

Intégration du fichier s3Slider.js dans le fichier lib/js/

2/Code PHP :

Intégration dans haut.php et haut_2cols.php (développé spécifiquement pour mon site) du code suivant dans head :

<script src="http://kultimages.com/lib/js/jquery.js" language="JavaScript" type="text/javascript"></script>

<script src="http://kultimages.com/lib/js/s3Slider.js" language="JavaScript" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {

$(\'#s3slider\').s3Slider({

timeOut: 4000

})

});

3/Code CSS

Intégration dans screen.css et left_right.css du code suivant à la fin du fichier :

#s3slider {

width: 765px; /* important to be same as image width */

height: 409px; /* important to be same as image height */

position: relative; /* important */

overflow: hidden; /* important */

}

#s3sliderContent {

width: 765px; /* important to be same as image width or wider */

position: absolute; /* important */

top: 0; /* important */

margin-left: 0; /* important */

}

.s3sliderImage {

float: left; /* important */

position: relative; /* important */

display: none; /* important */

}

.s3sliderImage span {

position: absolute; /* important */

left: 0;

font: 10px/15px Arial, Helvetica, sans-serif;

padding: 10px 13px;

width: 374px;

background-color: #000;

filter: alpha(opacity=70); /* here you can set the opacity of box with text */

-moz-opacity: 0.7; /* here you can set the opacity of box with text */

-khtml-opacity: 0.7; /* here you can set the opacity of box with text */

opacity: 0.7; /* here you can set the opacity of box with text */

color: #fff;

display: none; /* important */

top: 0;

/*

if you put

top: 0; -> the box with text will be shown at the top of the image

if you put

bottom: 0; -> the box with text will be shown at the bottom of the image

*/

}

.clear {

clear: both;

}

</script>

4/ Code HTML :

Intégration dans un article du code suivant :

<div id="s3slider">

<ul id="s3sliderContent">

<li class="s3sliderImage"><img src="http://www.kultimages.com/files/images/image_1.jpg" alt="" /><span>Test n&deg;1 sur s3Slider !</span></li>

<li><img src="http://www.kultimages.com/files/images/image_2.jpg" alt="" /><span>N&deg;2 TEST de S3SLIDER</span></li>

<div class="clear s3sliderImage"></div>

</ul>

</div>

RESULTAT

Ma 2ème photo s'affiche en gros, le texte dessous sans mise en forme, le slideshow ne marche pas...

EST CE QUE QUELQU'UN PEUT M'AIDER POUR FAIRE MARCHER CE SCRIPT ?

Merci d'avance, Pierre

[Gilles Boussin 0]

Bonjour,

Utilisez la fenêtre de console d'erreurs javascript pour voir si il y a des erreurs, et l'extension Firebug sur Firefox pour savoir ce qui se passe plus précisément

Gilles

[pieralex 0]

Bonjour Gilles et tous les lecteurs,

Merci pour votre réponse.

J'ai essayé de trouver des rapports d'erreur, ayant firefox 4 j'ai eu quelques difficultés car javascript debugger n'est pas encore à jours...

Cependant voici ce que j'ai trouvé grâce à Firebug dans console/tous :

$("#s3slider") is null

(?)()test-18.html (ligne 30)

noConflict()jquery.js (ligne 26)

inArray()jquery.js (ligne 33)

[stopper sur une erreur] $('#s3slider').s3Slider({

Je pense que j'ai mal positionné le CSS spécifique à s3Slider...

Je ne sais pas comment améliorer la situation... Quelqu'un a-t-il une idée ?

Merci d'avance, Pierre

[Gilles Boussin 0]

Je vous invite à lire à propos de noConflict et jQuery.

Dans votre code javascript, soit vous devez utiliser noConflict, soit remplacer les $() par des jQuery().

Gilles

[pieralex 0]

Bonjour Gilles,

J'ai essayé d'intégrer jQuery.noConflict mais ça marche toujours pas... Je m'arrache les cheveux !

Voici le code que j'ai intégré sur le fichier haut.php :

<script type="text/javascript">

jQuery.noConflict();

jQuery(document).ready(function($){

$(\'#s3slider\').s3Slider({

timeOut: 4000

})

});

</script>

J'ai bien une idée sur le problème : dans la partie du code $(\'#s3slider\').s3Slider je suis obligé de mettre des anti slides car sinon j'ai un problème de parenthèse, le code s'arrête au prochain }). En fait le code devrait être $('#s3slider').s3Slider

Voici la partie du fichier haut.php qui ne marche pas :

echo '

<meta ....................... />

<base href="' . $wwwroot . '/" />

<script type="text/javascript" src="' . $wwwroot . '/lib/js/filesearchhover.js"></script>

<script type="text/javascript" src="' . $wwwroot . '/lib/js/window.js"></script>

<script src="http://kultimages.com/lib/js/jquery.js" language="JavaScript" type="text/javascript"></script>

<script src="http://kultimages.com/lib/js/s3Slider.js" language="JavaScript" type="text/javascript"></script>

<link rel="stylesheet" href="http://www.kultimages.com/lib/css/s3Slider.css" type="text/css" media="screen" />

<script type="text/javascript">

jQuery.noConflict();

jQuery(document).ready(function($){

$('#s3slider').s3Slider({

timeOut: 4000

})

LE CODE S'ARRÊTE LA

});

</script>

Est-ce que vous avez une idée sur la manière de résoudre ce problème et est-ce que ça peut poser problème pour faire fonctionner s3Slider ?

Merci d'avance, Pierre

[pieralex 0]

Allo ? Quelqu'un peut-il m'aider ?

[Gilles Boussin 0]

Bonjour,

Il y a plusieurs étapes :

- mettre du code HTML dans le PHP qui le génère => pour gérer vos questions de ' et \' vous devez vérifier que le HTML de votre page générée est bien complet et conforme à ce que vous attendez

- mettre du javascript qui fonctionne dans le HTML => pour vérifier qu'il n'y a pas de soucis, vous devez utiliser la fenêtre de debug de javascript de votre navigateur. Pour vérifier si le problème ne vient pas de conflits jQuery, vous pouvez désactiver prototype.js via la page de configuration de la boutique dans l'administration.

- si les 2 autres points sont OK, mais que ça ne marche pas => regardez la documentation, les FAQ et forums qui parlent du module javascript que vous voulez mettre pour le déboguer.

Gilles