Discussion :

[dancom5]

Bonjour.

Souhaitant être à la bonne place, voici mon problème:

Ajouter un fade entre les images pour faire une transition.

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
 
/* Simple jQuery background image rotator plug-in by Dan 'Diplo' Booth */
(function($)
{
    $.fn.extend({
        bgrotate: function(options)
        {
            var defaults = {
                delay: 1000,
                images: [],
                imagedir: "images/"
            }
 
            var o = $.extend(defaults, options);
            var $obj = $(this);
            var cache = [];
            var i = 0;
            var preCache = true;
 
            return this.each(function()
            {
                setInterval(function() { setBack($obj, o.images, o.imagedir) }, o.delay);
            });
 
            function setBack(elem, backgrounds, imagedir)
            {
                elem.css("background-image", "url(" + imagedir + backgrounds[i] + ")");
                i++;
                if (i == backgrounds.length)
                {
                    i = 0;
                    preCache = false;
                }
                if (preCache)
                {
                    var cacheImage = document.createElement('img');
                    cacheImage.src = imagedir + backgrounds[i];
                    cache.push(cacheImage);
                }
            }
        }
    });
})(jQuery);
 
<script type="text/javascript">
        $("html").bgrotate({ delay: 4000, imagedir: "images/", images: ["background_1.jpg", "background_2.jpg", "background_3.jpg", "background_4.jpg", "background_5.jpg"] 
        }).fadeOut().fadeIn();
</script>

J'ai ajouté ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.fadeOut().fadeIn()

Ça aucun effet sur la transistion des images pour un fade.

[Darkaurora]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<script type="text/javascript">
        $("html").bgrotate({ delay: 4000, imagedir: "images/", images: ["background_1.jpg", "background_2.jpg", "background_3.jpg", "background_4.jpg", "background_5.jpg"] 
        }).fadeOut().fadeIn();
</script>

Cette ligne permet d'initialiser ton plugin, y ajouter un fadeout et fadin est un peu absurde.

concrètement (et du peu que j'ai vue) le plugin te permet de changer d'image de fond dans un ordre précis. Le problème est que je ne pense pas que tu puisse fadeIn() ou fadeOut() un background-imageIl faudrait bidouiller afin de créer autant de balises images que nécessaire puis de les cacher et les afficher avec fadeIn() et fadeOut()

[dancom5]

Bonjour Darkaurora.

Oui, je remarque que dans mon code, c'est toute la page qui fais un "fade" au moment du démarrage et non les images qui composent le fond.

J'ai trouvé un Jquery qui fait le rôle souhaiter de composer le fond de la page avec un effet de "fade" avec plusieurs images. Le plugin qui le fait.

J'aurais bien aimer le faire moi-même mais je préfère me concentrer sur mon initiation au MVC PHP et POO qui me donne du fil à retorde.

Merci !!

[dancom5]

Bonjour.

Pour dire un merci pour l'aide qui m'était accordée.
Le sujet n'est plus pertinent mais ça m'aura appris quelque chose.

Dan