{MAJ} - [TUTO] BACKGROUND défilant (besoin aide javascript post #4)

[titityler]

MAJ : j'ai enlevé le code qui ne servais pas.

 

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.

 

Bonne continuation à tous.

 

PS : j'ai mis ce tuto ici car je ne l'ai testé que sur PS 1.6.0.6

Edited April 19, 2014 by titityler (see edit history)

[vik93]

Bonjour,

 

Est ce qu'on peut voir sous forme de démo ce que ça donne ?

[titityler]

Voici l'adresse de mon site que je développe, je l'ai mis dessus : http://www.titityler1.fr/

J'essai d'aligner le défilement avec les images du HOMESLIDER mais comme les fonds sont plus lourd à charger, leur défilement comme après et donc en décalé. Si quelqu'un a une idée ...

Edited April 18, 2014 by titityler (see edit history)

[titityler]

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

Edited April 18, 2014 by titityler (see edit history)