pieralex
Utilisateur open source-
Compteur de contenus
4 -
Inscrit(e) le
-
Dernière visite
Activité de pieralex
-
pieralex a ajouté un message dans un sujet Problème integration du slideshow s3Slider dans PEEL V5.7
Allo ? Quelqu'un peut-il m'aider ?
-
0
-
-
pieralex a ajouté un message dans un sujet Problème integration du slideshow s3Slider dans PEEL V5.7
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
-
0
-
-
pieralex a ajouté un message dans un sujet Problème integration du slideshow s3Slider dans PEEL V5.7
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
-
0
-
-
pieralex a ajouté un sujet dans Module PEEL Premium pour PEEL SHOPPING
Problème integration du slideshow s3Slider dans PEEL V5.7Bonjour à 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°1 sur s3Slider !</span></li>
<li><img src="http://www.kultimages.com/files/images/image_2.jpg" alt="" /><span>N°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
- 6 réponses
- 2 596 vues
