Slideshow Mootools

Un aperçu de la prochaine version du diaporama – exclusivement pour Mootool 1,2

Un diaporama est toujours utile pour mettre sur son site. Voici donc un slideshow très sympa à découvrir.
Diaporama a été écrit à l’origine comme un plugin pour la Textpattern CMS en 2006, en utilisant l’originale Moo.fx javascript bibliothèque.
Cette nouvelle version a été ré-écrit pour Mootools-up, intégrant de nombreuses évolutions et demandes de nouvelles fonctionnalités au cours de la dernière année.

Caractéristiques

* Variable diaporama dimensions
* Fade, panoramique, le zoom et le combo diaporamas
* Pan et les options de zoom
* Durée de la transition
* Wipe et push les diaporamas
* assouplissement des transitions
* flèches de navigation
* Aperçu basée Navigation
* Mode Fast Navigation
* Diaporama légendes

Les images sont redimensionnées pour accueillir une dimension prédéfini pour le diaporama. Redimensionnement est activé par défaut, mais peut être désactivée. Avec le redimensionnement dynamique des images, diaporama peut accueillir tous les formats de présentation.
myShow = new Slideshow(‘slideshow’, { type: ‘combo’, duration: [2000, 4000], width: 400, height: 300, images: [‘1.jpg’, ‘2.jpg’ … ‘8.jpg’], hu: ‘images/’ }); MyShow = new Diaporama ( ‘diaporama’, (type: ‘combo’, durée: [2000, 4000], largeur: 400, hauteur: 300, les images: [‘1. Jpg ‘,’2. Jpg’ … ‘ 8.jpg ‘], hu:’ images / ‘));

Installation
Assurez-vous de lien slideshow.js après mootools.js dans l’ordre où ils apparaissent. Note n’oubliez pas d’ajuster le src pour refléter l’emplacement des javascripts sur votre site web.
<head>
<script Type= »text/javascript » src= »mootools.js »> </ script>
<script Type= »text/javascript » src= »slideshow.js »> </ script>
</head>

Usage

Voici un exemple de la manière dont cela pourrait apparaître dans votre document HTML:
<div id= »my_slideshow » class= »slideshow »> <div Id= »my_slideshow » class= »slideshow »>
<img src= »images/1.jpg » alt= »A picture » width= »400″ height= »300″ /> <img src= »images/1.jpg » alt= »A image » width= »400″ height= »300″ />
</div> </ Div>

Vous pouvez initialiser le diaporama à partir de la tête de votre document HTML:
<head>

<script type= »text/javascript »>
window.onload = function() { myShow = new Slideshow(‘my_slideshow’, {hu: ‘images/’, images: [‘1.jpg’,’2.jpg’,’3.jpg’]}); }
</script>
</head>

Ou dans le body lui-même, après l’image et la cape éléments:
<div id= »my_slideshow » class= »slideshow »> <div Id= »my_slideshow » class= »slideshow »>
<img src= »images/1.jpg » alt= »A picture » width= »400″ height= »300″ />
</div>

… …
<script type= »text/javascript »>
myShow = new Slideshow(‘my_slideshow’, {hu: ‘images/’, images: [‘1.jpg’,’2.jpg’,’3.jpg’]});
</script>

Remarque sur les propriétés qui sont transmises à diaporama sur l’initialisation: hu et des images. Voici une brève description de ces propriétés et de quelques autres importants que vous devriez savoir.

Pour une liste complète s’il vous plaît consulter le code source.

* Hu – tel est le chemin relatif au répertoire où regarde le diaporama pour trouver vos images. Si vos images sont dans le même dossier que la page Web que vous devez définir est: ‘/’, si elles sont dans un sous-dossier de la page web appelé ‘images’ vous régleriez hu:’ images / ‘, si elles sont dans un parent Dossier de la page web vous régleriez hu:’../’.
* images – il s’agit d’un tableau des noms de fichiers image que vous souhaitez voir apparaître dans votre diaporama. Par exemple: des images: [ ‘apple.jpg’,’1. Png ‘,’ aaa.gif ‘]. Notez le tableau ci-joint doit être entre crochets [].
* height and width – ce n’est les dimensions de votre diaporama en pixels: Hauteur: 300, largeur: 400. Si vous ne définissez pas une hauteur ou largeur diaporama utilisera les dimensions de la première image dans le tableau ci-dessus.
* type – choisir l’un des 6 différents types de diaporamas: fade, panoramique, zoom, combo, pousser ou essuyer. La valeur par défaut est de type: « fade ».
* navigation – choisir une des 3 différents modes de navigation: flèches, les flèches + ou des vignettes. Les trois créer une liste à puces dans le diaporama <ul> – voir ci-dessous pour les instructions de navigation avec le style CSS. De plus, vous pouvez appeler l’un des modes de navigation rapide avec le mot-clé pour sauter des transitions en interagissant avec le diaporama. Un exemple: la navigation: «vignettes rapide ‘.

Par conséquent, il est possible que votre diaporama initialisation effectivement ressemble à ceci:
myShow = new Slideshow(‘my_slideshow’, {hu: ‘../images/’, images: [‘apple.jpg’,’1.png’,’aaa.gif’], height: 300, width: 400, type: ‘combo’, pan: ‘rand’, zoom: ‘rand’, navigation: ‘arrows+’});
Styliser votre diaporama

En cas d’appel, pour la première fois, le diaporama manipule le HTML dans le wrapper, il est répercuté sur l’initialisation. Comment il manipule le HTML dépend des propriétés, il a été appelé avec. Si appelé à la navigation, il ajoute une balise <ul>; appelé avec légendes si elle ajoute une <p><strong>
Le résultat final pourrait ressembler à quelque chose comme ceci:
</strong>
<div id= »my_slideshow » class= »slideshow »> <div Id= »my_slideshow » class= »slideshow »>
<div> <!– C’est le diaporama élément –>
<img src= »images/1.jpg » alt= »A picture » width= »400″ height= »300″ />
</div>
<ul> <!– C’est l’élément de la navigation –>
<li><a class= »prev »></a></li>
<li><a class= »next »></a></li>
</ul>
<p></p> <!– C’est l’élément légendes –>
</div>

Ainsi, certains de style CSS valide vos vignettes et légendes :
div.slideshow {
margin: 18px auto;
}
div.slideshow p {
padding-top: 9px;
}
div.slideshow ul {
background: #FFF;
bottom: -35px;
left: 0px;
position: absolute;
overflow: hidden;
padding: 5px 0;
z-index: 10001;
}
div.slideshow ul a {
background-position: 50% 50%;
cursor: pointer;
display: block;
height: 25px;
margin-right: 5px;
opacity: 0.5;
width: 30px;
}
div.slideshow ul a.active,
div.slideshow ul a:hover {
opacity: 1;
}
div.slideshow ul li {
float: left;
list-style: none;
}

Diaporama utilise trois classes CSS pour définir le lien vers la diapositive précédente, le lien à la diapositive suivante, et le concours actif de diapositives – précédent et suivant s’applique uniquement aux flèches et les flèches de navigation + tandis que les modes actifs s’applique uniquement aux flèches + et vignettes.

Pour utiliser vos propres classnames simplement définir les classes de la propriété avec une nouvelle série à l’initialisation de votre diaporama: les classes: [ ‘antérieur’, ‘suivant’, ‘actif’]. Notez l’ordre des classes dans le tableau doit toujours être maintenu: 1 . previous, 2. next, 3. active.

Trucs & Astuces

* Image resizing – surtout zooming – n’a pas l’air tellement grand dans la version actuelle de Windows. Pour utiliser le diaporama sans le redimensionnement des images, la classe avec intialize redimensionner: faux et assurez-vous que votre image est plus grande que la zone d’affichage du diaporama. Attention, ceci ne fonctionne que avec fondu, pan, et essuyez type push diaporamas – zoom ou le type de combo aura toujours des diaporamas Redimensionner les images.
* Lors de l’exécution, le Javascript manipule une ou plusieurs images du diaporama dans une cape div avec le style CSS overflow: hidden. En tant que telle, de nombreux styles CSS problèmes peuvent être résolus par la traduction des styles axés sur les images elles-mêmes à ce wrapper div.  La bonne présentation CSS dans ce cas, serait: div.slideshow div (border: 1px solid black; padding: 4px;) div.slideshow img (border: 0; padding: 0;)

Rendez-vous à cette adresse http://www.electricprism.com/aeron/slideshow/

2 commentaires
  1. Nulens 9 années ago

    Salut, je cherhce depuis longtemps a mettre un slideshow sur mon s pour enfin mettre des photos de nos evenements dns une presentation et un design assez agreable a la facon iTunes. Probleme je debute en javascript et je comprend pas grand chose a toute les explications donné ici et ailleur, tu saurai
    pas me dire comment faire pour l’inserer dans mon site.

    Alors je taf’ sous windows XP
    pour mon site j’utilise cariboost v2
    qui ne permet que de copier un code java…

    Je viens d’esayer JW image rotator et je comprend rien
    ton tuto pourrais m’aider si il etait plus cibler au debutant

    Un tout grand merci d’avance

    Ps: rep moi par mail

  2. thireg 9 années ago

    Bonjour,

    j’ai un slideshow dans mon header (oscommerce), et un autre dans la page principale …
    celui du header joue bien, pas celui de la page principale (je souhaite en fait plusierus slidshow dans mes pages mais avec des dossiers images différents selon les slideshow…

    ********code dans header ********

    window.onload = function() { myShow = new Slideshow(‘slideshow’, { type: ‘fade’, duration: [2000, 2000], width: 184, height: 99,
    images: [‘image0.jpg’,’image1.jpg’,’image2.jpg’,’image3.jpg’,’image4.jpg’,’image5.jpg’,’image6.jpg’,’image7.jpg’], hu: ‘images/_LJ_tmplv2/sites/slide/’})};

    ************code de celui page principale (dossier images différent, et dossier script aussi) *************

    { myShow = new Slideshow(‘myslideshow’, { type: ‘fade’, duration: [2000, 2000], width: 500, height: 269,
    images: [‘image0.jpg’,’image1.jpg’,’image2.jpg’,’image3.jpg’], hu: ‘images/_LJ_tmplv2/sites/slide2/’})};

    **********************

    Pouvez-vous me dire où est le problème ?

    Merci

Répondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

vingt − huit =

CONTACT

We're not around right now. But you can send us an email and we'll get back to you, asap.

Envoi en cours...

©[current-year] WebCSSDesign

Se connecter

Oubli de mot de passe ?