1. Présentation

Je vous ai préparé une petite classe javascript pour réaliser un slider de contenu html. Il peut donc comporter des images, du texte, du javascrit etc...

C'est un slider qui comporte deux éléments, celui de gauche et celui de droite et dont vous pouvez paramétrer le temps des animations ainsi que les rotations dans les 3 directions.

2. Mise en place

Pour faire fonctionner ce slider, il faut charger les script suivants:

Enregistrez ces deux fichiers parmi ceux de votre blog en leur donnant le nom des boutons ci-dessus.

A noter que pour faire fonctionner ce slider dans l'entête de votre blog, tout le code suivant devra être placé dans un module simple html. Si par contre vous voulez placer le slider dans un article ou une page simple, alors vous placerez directement les codes dans l'article ou la page.

Pour charger ces scripts, il suffit d'écrire:

<script src="url du fichier Velocity.js"></script>
<script src="url du fichier DualSlider.js"></script>

3. Définition du slider

La structure html est la suivante et est organisée à partir de balises div, ce qui permet d'y placer tout ce que l'on souhaite.

Le conteneur doit avoir la classe eklaslide. Il comporte des conteneurs de classe itemslide qui contiennent eux-mêmes deux div de classe respective item_left et item_right. Ces dans ces deux dernières div que vous placerez le contenu que vous voulez voir défiler.

Cela nous donne:

<div class="eklaslide">
	<div class="itemslide">
		<div class="item_left">Contenu à gauche du 1er slide</div>
		<div class="item_right">Contenu à droite du 1er slide</div>
	</div>
	<div class="itemslide">
		<div class="item_left">Contenu à gauche du 2ème slide</div>
		<div class="item_right">Contenu à droite du 2ème slide</div>
	</div>
	<div class="itemslide">
		<div class="item_left">Contenu à gauche du 3ème slide</div>
		<div class="item_right">Contenu à droite du 3ème slide</div>
	</div>
	....
</div>

4. Le CSS

Le CSS par défaut est le suivant. Il faudra l'adapter en fonction de votre blog et de vos envies. En particulier width et height. 

La Propriété overflow doit être à hidden.

Il faudra peut-être aussi modifier bottom et left selon la position que vous voulez adopter pour le slider (en particulier dans le header). Ici il est placé en bas à gauche et fait la largeur du blog (974px).

.eklaslide{    
    width:974px;
    height:220px;
    overflow:hidden;
    background-color:white;
    color:black;
    position:absolute;
    bottom:0;
    left:0;}

Il vous est bien entendu possible d'ajouter du css pour les classes item_left et item_right.

5. Les options

Les options possibles sont les suivantes:

  HEADER:true          // true si doit être positionné dans le header
  DUREE_ANIM:2500      // durée d'une animation
  DELAI_1:1200         // délai lancement itemde gauche
  DELAI_2:1500         // délai lancement item de droite
  TEMPS_AFFICHAGE:4500 // temps de pause avant slide suivant
  SLIDE_SUIVANT:8000   // durée pour le lancement de l'item suivant
  RX:'360deg'          // Rotation selon X de l'image
  RY:'360deg'          // Rotation selon X de l'image
  RZ:'180deg',         // Rotation selon X de l'image
  FORCE:'300'          // Force appliquée pour la transition (max 500)
  AMORTI:'15'          // amortissement 

Bien entendu, vous n'avez qu'à indiquer les options que vous souhaitez. Inutile de toutes les écrire si elles ne servent pas. De DUREE_ANIM à SLIDE_SUIVANT, ce sont les temps (en millisecondes) pour les animations et les transitions. Faites des essais pour voir ce que vous préférez.

RX, RY, RZ sont les rotations dans les trois directions appliquées aux différents slides. Par exemple, lorsqu'un slide avec les options ci-dessus arrive, pendant son déplacement, il tourne de 360° selon X, 360° selon Y et 180° selon Z.

FORCE et AMORTI sont les paramètres qui vont donner un effet linéaire ou élastique aux transitions. Pour avoir un effet élastique, on choisira une valeur faible pour AMORTI (par exemple 10). Si on le combine avec une FORCE de 300 par exemple, l'élément aura un comportement de ressort.

Lorsque le slide s'en va, ce sont les mêmes effets mais inversés qui sont appliqués.

6. Lancer le script

Une fois les scripts chargés et le html réalisé, on va lancer le script du slider. Pour cela on le placera à la fin. Il ressemblera à ceci:

<script>// <![CDATA[
onJSFilesLoaded.push(function(){
	var monslide=new EklaSlide('eklaslide');
	var options = {
		HEADER:true, // true si doit être positionné dans le header
		DUREE_ANIM:2500, // durée d'une animation
		DELAI_1:1200,    // délai lancement itemde gauche
		DELAI_2:1500,    // délai lancement item de droite
		TEMPS_AFFICHAGE:4500, // temps de pause avant slide suivant
		SLIDE_SUIVANT:8000,   // durée pour le lancement de l'item suivant
		RX:'360deg',     // Rotation selon X de l'image
		RY:'360deg',     // Rotation selon X de l'image
		RZ:'180deg',   // Rotation selon X de l'image
		FORCE:'300',   // Force appliquee pour la transition >500
		AMORTI:'15'    // amortissement 
		};
	monslide.init(options);
});
// ]]></script> 

7. Un exemple complet

Tout cela mis bout à bout nous donne:

<script src="url du fichier Velocity.js"></script>  //Placez l'url de votre fichier
<script src="url du fichier DualSlider.js"></script>//Placez l'url de votre fichier
<div class="monslide">
	<div class="itemslide">
		<div class="item_left">Contenu à gauche du 1er slide</div>
		<div class="item_right">Contenu à droite du 1er slide</div>
	</div>
	<div class="itemslide">
		<div class="item_left">Contenu à gauche du 2ème slide</div>
		<div class="item_right">Contenu à droite du 2ème slide</div>
	</div>
	<div class="itemslide">
		<div class="item_left">Contenu à gauche du 3ème slide</div>
		<div class="item_right">Contenu à droite du 3ème slide</div>
	</div>
</div>
<style>
.monslide{    
    width:974px;
    height:220px;
    overflow:hidden;
    font-family: kaushan-script, cursive;
    font-size:1em; 
    background-color:white;
    color:black;
    position:absolute;
    bottom:0;
    left:0;}
</style>
<script>// <![CDATA[
onJSFilesLoaded.push(function(){
	var slider=new EklaSlide('monslide');
	var options = {
		HEADER:false, // true si doit être positionné dans le header
		DUREE_ANIM:2500, // durée d'une animation
		DELAI_1:1200,    // délai lancement itemde gauche
		DELAI_2:1500,    // délai lancement item de droite
		TEMPS_AFFICHAGE:4500, // temps de pause avant slide suivant
		SLIDE_SUIVANT:8000,   // durée pour le lancement de l'item suivant
		RX:'360deg',     // Rotation selon X de l'image
		RY:'360deg',     // Rotation selon X de l'image
		RZ:'180deg',   // Rotation selon X de l'image
		FORCE:'300',   // Force appliquee pour la transition >500
		AMORTI:'15'    // amortissement 
		};
	slider.init(options);
});
// ]]></script> 

8. Améliorations

J'ai écrit ce script assez rapidement: il souffre donc surement d'imperfections, probablement de quelques bugs. Je compte sur vous pour me les remonter.

Par la suite, j'envisage d'y ajouter des boutons de contrôle et de développer d'autres types de sliders pour les blogs Eklablog.  

1. Eklabouton, c'est quoi ?

2. Chargement du script

Le script est ici très petit (moins de 1 ko). Téléchargez le ici: http://ekladata.com/vEMdkrkZrqV1G_MBVbvVXJYSwgQ/eklabouton.js  et enregistrez le parmi les fichiers de votre blog (sous le nom eklabouton.js)

Copiez ensuite le CSS dans Apparence/Modifier le Thème/ Ajouter du css : Fichier CSS

Ensuite, vous le chargez comme ceci:

<script src="url du fichier eklabouton.js"></script>

3. Utilisation - Classe BoutonClassic

On va ici utiliser la classe BoutonClassic pour changer l'apparence du bouton Input.

Vous placez votre balise input comme d'habitude mais en lui donnant une classe (de votre choix) par exemple la classe "monbouton" comme ci-dessous

<input class="monbouton" onclick="alert('Clic sur mon bouton');" type="button" value="Cliquez ici" />

Il ne reste plus qu'à appeler le script comme ceci (avec l'utilisation de cette classe, il n'y a que deux paramètres à indiquer: la classe et la couleur - voir les options):

<script>
onJSFilesLoaded.push(function(){
var typebouton1 = new BoutonClassic ('.monbouton','bleu');
typebouton1.init();
});</script>

On obtiendra donc un bouton bleu comme celui en haut de page.

Si on regroupe tout ça, cela donne:

<script src="url du fichier eklabouton.js"></script>
<input class="monbouton" onclick="alert('Clic sur mon bouton');" type="button" value="Cliquez ici" />
<script>
onJSFilesLoaded.push(function(){
var typebouton1 = new BoutonClassic ('.monbouton','bleu');
typebouton1.init();
});</script>

4. Utilisation - Classe Bouton

Pour l'appel à la classe Bouton, il y a 4 paramètres:

new Bouton (classe, couleur, largeur, hauteur)

Seul le paramètre classe est obligatoire.

Paramètre couleur:  bleu, vert, cyan, orange, rouge et noir.

Si vous omettez la couleur lors de l'appel à la classe Bouton, alors ce seront les couleurs par défaut (comme le bouton gris en haut de page)

Largeur et hauteur: valeurs en pixel

S'ils ne sont pas indiqués, la dimension du bouton sera ajustée automatiquement.

Exemple pour un bouton de 200 pixels de largeur et 50 de hauteur, on écrira:

<script>
onJSFilesLoaded.push(function(){
var typebouton1 = new Bouton ('.monbouton','bleu',200,50);
typebouton1.init();
});</script>

Ajout d'images dans le bouton

Cela se fait au niveau de la balise input avec les propriétés data-ico et data-ico-pos. La hauteur de l'image s'ajuste à la hauteur du bouton. Néanmoins il est souhaitable d'avoir une image de la hauteur du bouton pour un meilleur rendu.

data-ico: url de l'image

data-ico-pos: left ou right (left par défaut)

Exemple:

<input class="bout1" onclick="alert('click bout1');" type="button" value="bouton" data-ico="http://ekladata.com/4hYQcQ_N-C_7GQhAEv1mCKke77Y/2745-88607.png" data-ico-pos="right" />