[TUTO] BACKGROUND défilant (besoin aide javascript)

[titityler]

Bonjour à tous, je viens apporter ma petite contribution.

J'ai vu que certaines personnes voulait un background défilant (moi aussi d'ailleur), alors j'ai trouvé l'adaptation du plugin de VEGAS (http://vegas.jaysalvat.com/documentation/background/) en module payant à environ 70€ (http://www.prestatoolbox.fr/publicite-marketing/157-vegas-background.html)

 

Je vais vous donner une petite solution (GRATUITE) pour avoir le background défilant.

 

Ouvrez votre fichier header.tpl qui se trouve ici : /themes/NomDeVotreTheme/header.tpl

 

Juste avant la balise </head>, ajoutez le code suivant :

<script type="text/javascript" src="/themes/NomDeVotreTheme/vegas/jquery.vegas.js"></script>
<link rel="stylesheet" type="text/css" href="/themes/NomDeVotreTheme/vegas/jquery.vegas.css" />

<script>
$( function() {
    $.vegas( 'slideshow', {
        delay: 8000,
        backgrounds: [
            { src: '/themes/NomDeVotreTheme/vegas/images/background4.jpg', fade: 4000 },
            { src: '/themes/NomDeVotreTheme/vegas/images/background3.jpg', fade: 4000 },
            { src: '/themes/NomDeVotreTheme/vegas/images/background2.jpg', fade: 4000 },
            { src: '/themes/NomDeVotreTheme/vegas/images/background1.jpg', fade: 4000 }
        ]
    } )( 'overlay' );
} );
</script> 

Remplacez les "NomDeVotreTheme" par ce qui vous correspond.

 

Ensuite, téléchargez le plugin de VEGAS : http://jaysalvat.github.io/vegas/releases/latest/vegas.zip

 

Dézippez le fichier sur votre FTP dans :  /themes/NomDeVotreTheme/

 

Vous vous retrouvez avec ceci :  /themes/NomDeVotreTheme/vegas/

 

Mettez vos fonds d'écrans dans le dossier suivant :  /themes/NomDeVotreTheme/vegas/images/

 

Renommez chacun de vos background comme suite :

- background1.jpg

- background2.jpg

- background3.jpg

- background4.jpg

- background5.jpg

- etc ...

 

N'oubliez pas de rajouter vos background dans le script du fichier header.tpl :

$.vegas( 'slideshow', {
        delay: 8000,
        backgrounds: [
            { src: '/themes/NomDeVotreTheme/vegas/images/background4.jpg', fade: 4000 },
            { src: '/themes/NomDeVotreTheme/vegas/images/background3.jpg', fade: 4000 },
            { src: '/themes/NomDeVotreTheme/vegas/images/background2.jpg', fade: 4000 },
            { src: '/themes/NomDeVotreTheme/vegas/images/background1.jpg', fade: 4000 }
        ]
    } 

Cette solution est peut-être moins pratique que le module payant, même elle est gratuite.

 

BESOIN D'AIDE :

Si quelqu'un s'y connait en JAVASCRIPT, pourrait-il m'aider à modifier ce script pour avoir un rendu équivalent à ce site : http://www.fxmodelrc.com/

Le fond reste toujours à la même position, peut importe la résolution de la fenêtre. L'image n'est pas agrandi et centrée sur la page.

 

Merci d'avance

 

Bonne continuation à tous.