Fancybox avec affichage d'un décompte

**cedrus** · 06/07/2014, 20h57

Bonjour,
J'ai fusionné plusieurs codes avec Fancybox pour permettre à l'ouverture d'une page de lancer en pop up une pub ou une vidéo qui dure 10s et se referme automatiquement pour afficher la page du site. Mais je veux qu'il affiche dans le pop up sous la vidéo le décompte du temps restant avant la fermeture de la pub. Un décompte invisible a bien lieu mais je sais pas du tout comme je peux faire afficher le décompte dans le pop up et non dans la page php du site. J'ai donc besoin d un coup de main pour formuler la bonne syntaxe. Merci pour votre aide

Code :

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
<script type="text/javascript">
    $(document).ready(function() {
        $.fancybox(
             $("#popup").html(),
             {
        type : 'swf',
        href : 'images.jpg', 
        fitToView : true,
        width : '990px',
        height : '503px',
        autoSize : true,
        openEffect  : 'fade',
		closeEffect : 'fade'
        }
        );setTimeout("parent.$.fancybox.close()", 10000); // temps en milliseconde avant fermeture de la popup
		decompte(); //lance la fonction de décompte
    });
 
	//compte à rebours
	var compte = 10; //10 secondes. Doit être égal à setTimeout("affichevideo()",10000);
 
	//fonction du compte à rebours
	function decompte()
	{
	    //singulier/pluriel
	    if(compte <= 1){
	        pluriel = "";
	    } else {
	        pluriel = "s";
	    }
	    //affiche le compte rebours dans l'id du même nom
	    document.getElementById("comptearebours").innerHTML = "Votre vidéo dans "+ compte + " seconde" + pluriel;
	    if(compte == 0 || compte < 0) {
	        compte = 0;
	        //Arrête l'exécution d'un traitement timer défini avec setInterval().
	        clearInterval(timer);
	    }
	    compte--;
	}
 
	//lance le decompte au bout d'une seconde
	var timer = setInterval('decompte()',1000);
</script>
 
 
<script type="text/javascript">
	$( function() {
 
		var id_div = "menu_compte";
		var duree_anim = 700;
		var nb_current = <?php echo $id_aff; ?>;
		var class_onglet = "cp_onglet";
		var class_contenu = "cp_contenu";
 
		menu_onglet.init( $("#" + id_div) , duree_anim, nb_current, class_onglet, class_contenu);
	});
</script>
 
<body class="body_global">
<a class="fancybox" rel="group" id="popup" style="display:none;" href="images.jpg"><img src="images.jpg" alt="" /></a>

**danielhagnoul** · 07/07/2014, 00h58

Bonsoir

Code :

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
$( function(){
 
    var compte = 10, // 10s
        minus = 1, // 1s
        jObjCompte = $( "#comptearebours" ),
        ObjTimer = setInterval( function(){
            jObjCompte.html( "Votre vidéo dans "+ compte + " seconde" + ( compte <= 1 ? "" : "s" ) );
 
            if ( compte <= 0) {
                clearInterval( ObjTimer );
                window.parent.$.fancybox.close();
                jObjCompte.css( "display", "none" );
            }
 
            compte -= minus;
 
        }, minus * 1000 );
 
});

**cedrus** · 07/07/2014, 12h36

Merci mais j'ai dû me tromper pour le placer. J'ai fait comme ça mais ça fonctionne pas.

Code :

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
<script type="text/javascript">
    $(document).ready(function() {
        $.fancybox(
             $("#popup").html(),
             {
                type : 'swf',
                href : 'images.jpg', // url vers notre page html qui sera chargée dans la popup en mode iframe
 
        fitToView : true,
        width : '990px',
        height : '503px',
        autoSize : true,
        openEffect  : 'fade',
		closeEffect : 'fade'
        }
        );setTimeout("parent.$.fancybox.close()", 10000); // temps en milliseconde avant fermeture de la popup
		decompte(); //lance la fonction de décompte
    });
 
	$( function(){
 
    var compte = 10, // 10s
        minus = 1, // 1s
        jObjCompte = $( "#comptearebours" ),
        ObjTimer = setInterval( function(){
            jObjCompte.html( "Votre vidéo dans "+ compte + " seconde" + ( compte <= 1 ? "" : "s" ) );
 
            if ( compte <= 0) {
                clearInterval( ObjTimer );
                window.parent.$.fancybox.close();
                jObjCompte.css( "display", "none" );
            }
 
            compte -= minus;
 
        }, minus * 1000 );
 
});
 
	//compte à rebours
	var compte = 10; //10 secondes. Doit être égal à setTimeout("affichevideo()",10000);
 
	//fonction du compte à rebours
	function decompte()
	{
	    //singulier/pluriel
	    if(compte <= 1){
	        pluriel = "";
	    } else {
	        pluriel = "s";
	    }
	    //affiche le compte rebours dans l'id du même nom
	    document.getElementById("comptearebours").innerHTML = "Votre vidéo dans "+ compte + " seconde" + pluriel;
	    if(compte == 0 || compte < 0) {
	        compte = 0;
	        //Arrête l'exécution d'un traitement timer défini avec setInterval().
	        clearInterval(timer);
	    }
	    compte--;
	}
 
	//lance le decompte au bout d'une seconde
	var timer = setInterval('decompte()',1000);
</script>

**danielhagnoul** · 07/07/2014, 14h24

Mon code remplace le vôtre, donc :

Code :

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
$( function(){ // forme abrégée de $(document).ready(function(){
 
    $.fancybox(
        //...
    );
 
    var compte = 10, // 10s
        minus = 1, // 1s
        jObjCompte = $( "#comptearebours" ),
        ObjTimer = setInterval( function(){
        jObjCompte.html( "Votre vidéo dans "+ compte + " seconde" + ( compte <= 1 ? "" : "s" ) );
 
            if ( compte <= 0) {
                clearInterval( ObjTimer );
                window.parent.$.fancybox.close();
                jObjCompte.css( "display", "none" );
            }
 
            compte -= minus;
 
        }, minus * 1000 );
 
});

**cedrus** · 07/07/2014, 15h21

Comme tu m as montré, j'ai remplacé tout le code par ça mais le décompte n'apparait pas. Je vois pas mon erreur

Code :

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
<script type="text/javascript">
    $(document).ready(function() {
        $.fancybox(
             $("#popup").html(),
             {
                type : 'swf',
                href : 'images.jpg', 
 
        fitToView : true,
        width : '990px',
        height : '503px',
        autoSize : true,
        openEffect  : 'fade',
		closeEffect : 'fade'
        }
        );setTimeout("parent.$.fancybox.close()", 10000); // temps en milliseconde avant fermeture de la popup
 
 
 
	var compte = 10, // 10s
        minus = 1, // 1s
        jObjCompte = $( "#comptearebours" ),
        ObjTimer = setInterval( function(){
        jObjCompte.html( "Votre vidéo dans "+ compte + " seconde" + ( compte <= 1 ? "" : "s" ) );
 
            if ( compte <= 0) {
                clearInterval( ObjTimer );
                window.parent.$.fancybox.close();
                jObjCompte.css( "display", "none" );
            }
 
            compte -= minus;
 
        }, minus * 1000 );
    });
</script>

**cedrus** · 10/07/2014, 11h40

un petit coup de main svp pour finir pour corriger mon code ? merciiiii

Fancybox avec affichage d'un décompte

jQuery

Vue hybride

Discussions similaires

Partager

Partager