Slideshow Jquery
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Slideshow Jquery
Bonjour à vous (:
Voilà, récemment, je suis tombée sur ce tutorial qui me semblait vraiment intéressant. J'ai suivi le tuto à la lettre : j'ai inséré le css dans la feuille de css, j'ai inséré le bout html sur ma page d'accueil - parce que je compte mettre le slide sur ma PA - et pour finir, j'ai mis le javascript dans une nouvelle feuille java - en prenant soin de bien activer la gestion des codes Javascript -
Résultat ? Rien ne se produit ! J'ai tenté de refaire la manœuvre une fois, deux fois, trois fois, idem. N'étant pas très douée en code jquery/javascript etc, je me demande si je ne me suis pas trompée là-dedans.
Alors, si une âme charitable pouvait m'aider dans la réalisation de ce tutoriel, ça serait vraiment sympathique car j'avoue être un peu désespérée :/
Merci d'avance.
Voilà, récemment, je suis tombée sur ce tutorial qui me semblait vraiment intéressant. J'ai suivi le tuto à la lettre : j'ai inséré le css dans la feuille de css, j'ai inséré le bout html sur ma page d'accueil - parce que je compte mettre le slide sur ma PA - et pour finir, j'ai mis le javascript dans une nouvelle feuille java - en prenant soin de bien activer la gestion des codes Javascript -
Résultat ? Rien ne se produit ! J'ai tenté de refaire la manœuvre une fois, deux fois, trois fois, idem. N'étant pas très douée en code jquery/javascript etc, je me demande si je ne me suis pas trompée là-dedans.
Alors, si une âme charitable pouvait m'aider dans la réalisation de ce tutoriel, ça serait vraiment sympathique car j'avoue être un peu désespérée :/
Merci d'avance.
Dernière édition par Soow* le Jeu 13 Sep 2012 - 13:17, édité 1 fois
Soow*- **
- Messages : 62
Inscrit(e) le : 05/08/2011
Re: Slideshow Jquery
UP (:
Soow*- **
- Messages : 62
Inscrit(e) le : 05/08/2011
Re: Slideshow Jquery
UP, s'il vous plaît (:
Soow*- **
- Messages : 62
Inscrit(e) le : 05/08/2011
Re: Slideshow Jquery
Bonjour,
Peut être qu'en voyant ce que tu as fait on verrai mieux, car les explications du site sont claires pour le slide de base.
Peut être qu'en voyant ce que tu as fait on verrai mieux, car les explications du site sont claires pour le slide de base.
Re: Slideshow Jquery
Bonjour AenigmA (:
Comme je l'ai dit, je suis novice en ce qui concerne le JQuery mais je vais tout de même te montrer ce que j'ai fait.
Voici ma partie HTML :
Voici ma partie CSS :
Et voici ma partie 'Javascript' :
Et avec tout ça, je n'obtiens pas le résultat espéré :/
Comme je l'ai dit, je suis novice en ce qui concerne le JQuery mais je vais tout de même te montrer ce que j'ai fait.
Voici ma partie HTML :
- Code:
<!-- Slideshow HTML -->
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<!-- Contenu pour le slide 1 -->
</div>
<div class="slide">
<!-- Contenu pour le slide 2 -->
</div>
<div class="slide">
<!-- Contenu pour le slide 3 -->
</div>
<div class="slide">
<!-- Contenu pour le slide 4 -->
</div>
</div>
</div>
<!-- Slideshow HTML -->
Voici ma partie CSS :
- Code:
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* affiche une scrollbar au cas ou */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduit de 20 pixels la div #slidesContainer pour permettre d'afficher la barre de scroll */
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(img/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(img/control_right.jpg) no-repeat 0 0;
}
Et voici ma partie 'Javascript' :
- Code:
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Supprime la scrollbar en JS
$('#slidesContainer').css('overflow', 'hidden');
slides
.wrapAll('<div id="slideInner"></div>')
// on met tous les slides en float:left pour qu'il s'affichent de manière horizontale
.css({
'float' : 'left',
'width' : slideWidth
});
// La longueur de #slideInner équivaut à la somme de la longueur de tous les slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert les flèches de gauche et de droite
$('#slideshow')
.prepend('<span class="control" id="leftControl">Move left</span>')
.append('<span class="control" id="rightControl">Move right</span>');
// Cache la flèche de gauche au début
manageControls(currentPosition);
// crée un écouteur pour l'évènement de type clic sur les div qui ont la classe .control
$('.control')
.bind('click', function(){
// Determine une nouvelle position
currentPosition = ($(this).attr('id')=='rightControl')
? currentPosition+1 : currentPosition-1;
//Cache ou montre les flèches
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Cache ou montre les flèches de contrôles en fonction de la position
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() }
else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() }
else{ $('#rightControl').show() }
}
});
Et avec tout ça, je n'obtiens pas le résultat espéré :/
Soow*- **
- Messages : 62
Inscrit(e) le : 05/08/2011
Re: Slideshow Jquery
Je n'y connais pas plus que toi donc je regarde leur page de démo
La page
http://www.snoupix.com/demo/slider-jquery/final.html
La source
view-source:http://www.snoupix.com/demo/slider-jquery/final.html
Le css
http://www.snoupix.com/demo/slider-jquery/design.css
Donc je préfère partir du leur quand je le fais et modifier ensuite
Je pense que tu vas te débrouiller
La page
http://www.snoupix.com/demo/slider-jquery/final.html
La source
view-source:http://www.snoupix.com/demo/slider-jquery/final.html
Le css
http://www.snoupix.com/demo/slider-jquery/design.css
Donc je préfère partir du leur quand je le fais et modifier ensuite
- Code:
<!-- Slideshow HTML -->
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<h2>Titre1</h2>
<p>Blablabla1</p>
</div>
<div class="slide">
<h2>Titre2</h2>
<p>Blablabla2</p>
<p>
</div>
<div class="slide">
<h2>Titre3</h2>
<p>Blablabla3</p>
</div>
<div class="slide">
<h2>Titre4</h2>
<p>Blablabla4</p>
</div>
</div>
</div>
<!-- Slideshow HTML -->
- Code:
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* affiche une scrollbar au cas ou */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduit de 20 pixels la div #slidesContainer pour permettre d'afficher la barre de scroll */
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#navDiapo{
display:block;
width:20px;
height:20px;
position:absolute;
right:25px;
bottom:10px;
cursor:pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(img/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(img/control_right.jpg) no-repeat 0 0;
}
- Code:
$(document).ready(function(){
//Configuration
var retour = true;
var tempsTransition = 1000;
var affichePlayPause = true;
var lectureAutomatique = false;
var tempsAttente = 6000;
var icones = new Array();
icones['play'] = 'img/play_slider.png';
icones['pause'] = 'img/pause_slider.png';
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
var interval;
var lectureEnCours = false;
// Supprime la scrollbar en JS
$('#slidesContainer').css('overflow', 'hidden');
// Attribue #slideInner à toutes les div .slide
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Longueur de #slideInner égale au total de la longueur de tous les slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Précédent</span>')
.append('<span class="control" id="rightControl">Suivant</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
//Crée un écouteur d'évènement de type clic sur les classes .control
$('.control')
.bind('click', function(){
// Determine la nouvelle position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
if(currentPosition == numberOfSlides && retour == false ){
currentPosition--;
pause();
}
// Cache ou montre les controles
manageControls(currentPosition);
// Fais bouger le slide
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
},tempsTransition);
});
// manageControls: Cache ou montre les flêches de controle en fonction de la position courante
function manageControls(position){
// Cache la fleche "précédent" si on est sur le premier slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
if(position==numberOfSlides-1 && retour == false){
$('#rightControl').hide();
} else {
$('#rightControl').show();
}
if(position == numberOfSlides && retour == true){
currentPosition = 0;
$('#leftControl').hide();
}
}
function suivant(){
$('#rightControl').click();
}
function start() {
lectureEnCours = true;
interval = setInterval(suivant, tempsAttente );
}
function pause() {
lectureEnCours = false;
clearInterval(interval);
}
//Si le diapo est activé
if(lectureAutomatique == true){
start();
}
if(affichePlayPause == true){
$('#slidesContainer').prepend('<img id="navDiapo" src="" alt="Navigation diaporama" />');
if(lectureAutomatique == true){
$('#navDiapo').attr('src',icones['pause']);
}else{
$('#navDiapo').attr('src',icones['play']);
}
$('#navDiapo').bind('click', function(){
if(lectureEnCours == true){
$(this).attr('src',icones['play']);
pause();
}else{
$(this).attr('src',icones['pause']);
start();
}
});
}
});
Je pense que tu vas te débrouiller
Re: Slideshow Jquery
C'est tout bon, j'ai réussi à me débrouiller
Merci pour ton aide Aenigma !
Je change le statut de mon sujet (:
Merci pour ton aide Aenigma !
Je change le statut de mon sujet (:
Soow*- **
- Messages : 62
Inscrit(e) le : 05/08/2011
Sujets similaires
» Slideshow en accordéon
» Slideshow qui ne s'affiche pas correctement
» Effet Slideshow
» Flèches invisibles avec le tuto Slideshow
» Soucie Slideshow
» Slideshow qui ne s'affiche pas correctement
» Effet Slideshow
» Flèches invisibles avec le tuto Slideshow
» Soucie Slideshow
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum