WebCssDesign

Diaporama cross-fade Scriptaculous

• Accueil
• Ajax
• Diaporama cross-fade Scriptaculous

Faire un mini diaporama sans flash peut être intéressant, pour cela je vous présente un script avec des options qui rajoutent un plus à l’affichage d’images, notamment des effets de fondu et d’affichage aléatoire.

Il s’agit d’un script simple qui fera apparaître plusieurs éléments un à la fois avec un cross-fade effet.

Démo / Téléchargement

Pour le mettre en place tout ce qu’il vous faut est un élément bloc HTML.

Tous les descendants immédiats deviennent transparents. Pour commencer à l’effet que vous avez tout simplement à donner à l’élément parent une classe de «fondu». Si elle est présente FastInit allons l’utiliser pour le démarrer automatiquement, sinon il vous ajoutez un événement window.onload.

Alternativement vous pouvez le faire de cette façon:

new Crossfade(‘example’, {interval : 10}); Nouveau Crossfade ( ‘example’, (intervalle: 10));

Et elle démarrera après un laps de temps aléatoire entre 100 millisecondes et l’intervalle montant.

Si vous avez un enfant « un » élément de la classe «loadimage » le crossfader sera remplacer par une balise d’image et de charger les a.href que l’image src. Il assurera aussi les pré chargement de l’image suivante. Par exemple, au lieu de cela:

<li><img src= »image1.jpg » /><div class= »caption »>Image 1 is pretty</div></li> <li> <img src= »image1.jpg » /> <div class= »caption »> Image 1 est joli </ div> </ li>

Vous pouvez faire ceci:

<li><a href= »image1.jpg » class= »loadimage »></a><div class= »caption »>Image 1 is pretty</div></li> <li> <a href= »image1.jpg » class= »loadimage »> </ a> <div class= »caption »> Image 1 est joli </ div> </ li>

Si vous avez un enfant ‘a’ élément avec une classe de « charger » le crossfader va charger le contenu de la diapositive a.href via Ajax, une requête GET.

Par exemple:

<li><a href= »ajax.php&arg=1″ class= »load »></a></li> <li> <a href= »ajax.php&arg=1″ class= »load »> </ a> </ li>

Assurez-vous que la ressource à a.href retourne un extrait de plain old HTML.

Si vous avez un élément avec un id correspondant à la mère en fondu id + ‘-next’ ou ‘-précédent’ ils deviendront prochain et la diapositive précédente contrôles.

Par exemple, si vous donnez votre élément parent de l’id ‘diaporama’, puis de laisser le contrôle des identifiants de « diaporama-suivant ‘et’ précédent-diaporama ».

Voir la démo pour un exemple.

Transitions

4 styles de transition sont fournis avec la bibliothèque, et vous pouvez également créer les vôtres.

Pour spécifier une option de transition utilisation (ci-dessous) ou d’ajouter un nom de classe de l’élément parent. Voici les transitions suivantes:

Option Nom – Nom de la classe
Crossfade.Transition.Switch – ‘transition-switch’
Crossfade.Transition.Crossfade – ‘transition-crossfade’
Crossfade.Transition.FadeOutFadeIn – ‘transition-fadeoutfadein’
Crossfade.Transition.FadeOutResizeFadeIn – ‘transition-fadeoutresizefadein’

Si vous souhaitez ajouter votre propre dont vous avez besoin pour créer un objet avec les propriétés suivantes:

 var myTransition = { = (Var myTransition  className : 'transition-mytransition',   cycle : function(prev, next, show) {},   cancel : function(show){},   prepare : function(show){}   }; );

Le cycle () est appelée à appliquer l’effet de transition. ‘Prev’ est l’élément de la transition de diapositives, ‘next’ est l’élément glisser dans la phase de transition, ‘show’ est l’objet en fondu.

La fonction cancel () est appelé pour annuler l’effet de transition.

Le prepare () est appelée lorsque l’objet est initialisé en fondu, afin de préparer la transition à l’objet en fondu si nécessaire.

Vous pouvez appliquer vos transition objet personnalisé via les options ou, si vous voulez que le nom de la classe qui sera automatiquement utilisé, alors vous devez ajouter votre passage à la collection de la bibliothèque, par exemple:

Crossfade.Transition.MyTransition = {…}

Jetez un oeil sur les transitions incluses pour avoir une idée de comment tout ça fonctionne.

Options

Option : default Option: default

autoLoad : true
Réglez cette variable à false si vous ne voulez pas le script pour chercher des éléments de cross-fade basé sur les sélecteurs.

autoStart : true
Réglez cette variable à false si vous ne voulez pas le que diaporama commence automatiquement.

interval : 5
Nombre de secondes pour afficher chaque élément

duration : 2
Durée en secondes du fondu

random : false
Mettre à true pour randomise l’ordre.

randomClassName : ‘random’
Ajouter cette classe à l’élément parent fondu et ça va faire randomise l’ordre de la même façon (comme une alternative à l’aide de l’option ci-dessus en Javascript).

selectors : ['.crossfade']
Le sélecteur autoStart utilisé pour la fonctionnalité, vous pouvez définir à toute une gamme de prototypes de sélecteurs.

transition : Crossfade.Transition.Crossfade
Le style de transition utilisé

Pour changer les paramètres par défaut, tout en faisant usage de la fonction autoStart utilisation Crossfade.setup ((options)), par exemple:

Crossfade.setup({interval : 10, random : true});

CSS

Pour donner la meilleure présentation envisager le positionnement des parents, et ensuite tous les descendants immédiats de position absolue pour les carreaux les uns sur les autres.

Exigences

Le Scriptaculous effects.js fichier et prototype.js. FastInit est facultative.

Démo & Téléchargement

Il n’ya pas beaucoup plus que cela! Consultez la page de démonstration pour des exemples ou télécharger la démo fichier zip.

MAJ:
pour rajouter des liens sur les images

 <li><a href="votre-lien"><img src="image1.jpg" /></a><div>Image 1 is pretty</div></li>