Automatisation slider [Résolu]

Question

Posez votre question Signaler

Automatisation slider [Résolu]

Sinistrus

Messages postés: 925
Date d'inscription: mercredi 12 décembre 2007
Dernière intervention: 16 novembre 2018

- Modifié par jordane45 le 11/12/2014 à 16:51 - Dernière réponse : Sinistrus

Messages postés: 925
Date d'inscription: mercredi 12 décembre 2007
Dernière intervention: 16 novembre 2018

- 11 déc. 2014 à 17:53

Javascript / DHTML Posez votre question Signaler

Bonjour à tous !

J'ai ce slider qui fonctionne très bien mais seulement au clique et je souhaiterais l'automatiser.

Voici mon bout de code :

<div class="container"> 
<div id="cbp-fwslider" class="cbp-fwslider">
<ul>

<?php
$db = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS); mysql_select_db(MYSQL_BASE,$db);
$sql = "SELECT * FROM tb_infos_du_jour";
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
 while($data = mysql_fetch_assoc($req)){ ?> 
                   
<li><table width="750" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td width="23"> </td>
<td width="134" align="left"><img src="<?php echo URL_IMAGES; ?>/infos_du_jour/<?php echo $data["Image"]; ?>.png" width="134" height="134" /></td><td width="23"> </td>
<td width="548" align="left"><div class="Categorie_22 Font_Blanc"><?php echo $data["Titre"]; ?></div><br /><div class="Categorie_16 Font_Blanc"><?php echo $data["Description"]; ?></div></td>
<td width="22" align="left"> </td>
</tr>
</table></li>

<?php ;} ?>   

</ul>
</div>
</div>

<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
<script src="http://sivop.com/version_3/js/infos_du_jour/jquery.cbpFWSlider.min.js"></script>
<script>$( function() {$('#cbp-fwslider' ).cbpFWSlider();} );</script>

J'ai essayé d'ajouter ceci pour le rendre automatique mais rien ne se passe...

<script>
jQuery(document).ready(function() {
setInterval(function(){if($('.cbp-fwnext').is(":visible")){$('.cbp-fwnext').click();}
})
});
</script>

Quelqu'un a une idée svp ?

Merci d'avance

Afficher la suite

A voir également:

Votre réponse

Répondre au sujet

7 réponses

Signaler Commenter la réponse de Sinistrus

Sinistrus

Messages postés: 925
Date d'inscription: mercredi 12 décembre 2007
Dernière intervention: 16 novembre 2018

11 déc. 2014 à 16:29

0

Merci

Waw ! ça fonctionne ! Mais seulement avec 2 slider... il ne boucle pas toutes les images :s

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 23631
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 17 décembre 2018

- 11 déc. 2014 à 16:32

seulement avec 2 slider... il ne boucle pas toutes les images :s

2 Slider .. tu veux dire : 2 Slides ? (deux images quoi..) ?

Il faudrait que tu regarde si tu n'aurais pas des erreurs via les outils de debogage.
=> Je te conseille d'installer FireBug ( pour FireFox), de la lancer.. puis d'afficher ta page et de regarder dans la console si tu n'aurais pas des indications et/ou messages d'erreur.

Signaler Commenter la réponse de Sinistrus

Sinistrus

Messages postés: 925
Date d'inscription: mercredi 12 décembre 2007
Dernière intervention: 16 novembre 2018

11 déc. 2014 à 16:49

0

Merci

Oui désolé 2 images :p

Il fonctionne sinon et quand j'ai ajouté un 3ème enregistrement dans ma table MySQL il affiche 3 bulles et fonctionne au clique sur les 3 mais automatiquement non, il boucle sur la première et la seconde image...

Pour la partie Firebug je n'ai aucun avertissement concernant ce code.

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 23631
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 17 décembre 2018

- 11 déc. 2014 à 16:56

Dans le titre ou la description de tes images tu n'aurais pas de caractères accentués ou de Slashes ??
Éventuellement.. essayes de mettre 3-4 fois les mêmes images que les deux premières qui fonctionnent pour voir..

Et vu que tu testes avec FF ( et FireBug ) ajoute du console.log dans le script pour voir s'il fonctionne correctement...

    $('document').ready(function(){
                // init slider
                $('#cbp-fwslider').cbpFWSlider();

          /**  Set a 3 seconds interval
            if next button is visible (so is not the last slide)  click next button
           else it finds first dot and click it to start from the 1st slide   **/
         setInterval( function(){
               if($('.cbp-fwnext').is(":visible")) {
                     console.log(" Bouton Next Visible");
                     $('.cbp-fwnext').click();   
                } else{
                    console.log(" Bouton Next  NON Visible");
                     $('.cbp-fwdots').find('span').click();
                }
            } ,3000 );
        });

Signaler Commenter la réponse de Sinistrus

Sinistrus

Messages postés: 925
Date d'inscription: mercredi 12 décembre 2007
Dernière intervention: 16 novembre 2018

11 déc. 2014 à 17:09

0

Merci

Voici exactement ce qu'il y a dans ma table :

image            | Titre               | Description
===================================================================
version3         | Version 3 du site   | Lancement de la version 3
tg_hello_kitty   | Hello Kitty         | Lancement de la version 3
socials          | Participez !        | Lancement de la version 3

Pas de slash ni de caractères spéciaux pour l'instant.

La console me montre des avertissements mais rien avoir avec le code que tu m'as donné.

J'ai essayé de séparer le fichier de tout autre script, seulement le slider sans rien d'autres... pareil soucis !

Signaler Commenter la réponse de Sinistrus

Sinistrus

Messages postés: 925
Date d'inscription: mercredi 12 décembre 2007
Dernière intervention: 16 novembre 2018

11 déc. 2014 à 17:16

0

Merci

Au fait, j'oubliais de préciser que cbp-fwnext n'existe pas dans le fichier *.js ! Tu penses que c'est dû à ça ? (désolé je viens de me rendre compte)

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 23631
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 17 décembre 2018

- 11 déc. 2014 à 17:28

cbp-fwnext : c'est la "class" du bouton NEXT.
Donc il doit exister.. sinon.. pourquoi il arriverait à cliquer sur la première et deuxième image ?

Quand le prog s'arrête à la seconde image... le bouton "next" apparait ou pas ?

Signaler Commenter la réponse de Sinistrus

Sinistrus

Messages postés: 925
Date d'inscription: mercredi 12 décembre 2007
Dernière intervention: 16 novembre 2018

11 déc. 2014 à 17:33

0

Merci

Non rien n'apparaît ! Tu peux essayer voir sur cette page, le slider tout en bas avec fond bleu : http://www.sivop.com/version_3/

Signaler Commenter la réponse de Sinistrus

Sinistrus

Messages postés: 925
Date d'inscription: mercredi 12 décembre 2007
Dernière intervention: 16 novembre 2018

11 déc. 2014 à 17:53

0

Merci

Merci jordane45 pour ton aide ! Le script fonctionne. Le problème venait de mon fichier js qui n'avait pas effectivement de class cbp-fwnext (la div a été vidée).

J'ai retabli la situation !

Merci encore pour ton aide !

Votre réponse

Répondre au sujet

Posez votre question

seulement avec 2 slider... il ne boucle pas toutes les images :s

2 Slider .. tu veux dire : 2 Slides ? (deux images quoi..) ?

Il faudrait que tu regarde si tu n'aurais pas des erreurs via les outils de debogage.
=> Je te conseille d'installer FireBug ( pour FireFox), de la lancer.. puis d'afficher ta page et de regarder dans la console si tu n'aurais pas des indications et/ou messages d'erreur.
Dans le titre ou la description de tes images tu n'aurais pas de caractères accentués ou de Slashes ??
Éventuellement.. essayes de mettre 3-4 fois les mêmes images que les deux premières qui fonctionnent pour voir..

Et vu que tu testes avec FF ( et FireBug ) ajoute du console.log dans le script pour voir s'il fonctionne correctement...

$('document').ready(function(){ // init slider $('#cbp-fwslider').cbpFWSlider(); /** Set a 3 seconds interval if next button is visible (so is not the last slide) click next button else it finds first dot and click it to start from the 1st slide **/ setInterval( function(){ if($('.cbp-fwnext').is(":visible")) { console.log(" Bouton Next Visible"); $('.cbp-fwnext').click(); } else{ console.log(" Bouton Next NON Visible"); $('.cbp-fwdots').find('span').click(); } } ,3000 ); });
cbp-fwnext : c'est la "class" du bouton NEXT.
Donc il doit exister.. sinon.. pourquoi il arriverait à cliquer sur la première et deuxième image ?

Quand le prog s'arrête à la seconde image... le bouton "next" apparait ou pas ?

jordane45 · Accepted Answer · 2014-12-11T16:18:27+0100

Bonjour,

tu peux essayer ça :

<script src="http://sivop.com/version_3/js/infos_du_jour/jquery.cbpFWSlider.min.js"></script>

<script type="text/javascript">
    $('document').ready(function(){
                // init slider
                $('#cbp-fwslider').cbpFWSlider();

               /**
                     Set a 3 seconds interval
                     if next button is visible (so is not the last slide)  click next button
                     else it finds first dot and click it to start from the 1st slide
                **/
                setInterval( function(){
                    if($('.cbp-fwnext').is(":visible")) {
                            $('.cbp-fwnext').click();   
                } else{
                        $('.cbp-fwdots').find('span').click();
                }
            } ,3000 );
        });

</script>

Automatisation slider [Résolu]

Votre réponse

Votre réponse

Votre réponse

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !