JQuery/diaporing

De Olivier.

Sommaire

Version

2-alpha

Date : 03/11/11

Nouvelle branche, réécriture totale du code.

Voici quelques futurs caractéristiques:

  • Gestion du pré-chargement
  • Plusieurs modes d’enchaînements
    • Fondu
    • Balayage
  • Compatibilité ascendante (ou rétrocompatibilité)
  • Simplicité d'intégration
  • ...


0.1.4.1

Date : 06/01/12

Correction d'un bug sur la première image qui définit un z-index négative, se qui rend donc cette image cachée. Consultez le code source de cette version (ligne 47 code inséré).

0.1.4

Date : 01/07/11

Cette version est plus homogène, et il n'est plus obligé de devoir intégrer certains attributs css dans le corps même de la div (ou autre balise), on utilisera les paramètres en lieu et place donc dans cette mouture.

Installation

Dans la balise <head>, nous ajoutons ceci 

<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="jquery.diaporing-0.1.4.min.js"></script>

note : c'est la version compiler avec l'outil Google Closure

Utilisation

Dans le corps html <body>: 

<div id="mon_diaporama">
  <img src="diaporama-01.jpg" />
  <img src="diaporama-02.jpg" />
  <img src="diaporama-03.jpg" />
</div>

Pour activer ce diaporama: 

<script language="javascript">$(document).ready(function() {$('#mon_diaporama').diaporing({speed:2000,fadespeed:500,width:181,height:377});});</script>

Une variante avec le nouveau paramètre (0.1.4): 

<script language="javascript">$(document).ready(function() {$('#mon_diaporama').diaporing({speed:2000,fadespeed:500,width:181,height:377,zindex:1000});});</script>

Les paramètres

Liste
Paramètre Type Description Requis Facultatif
speed Numérique Durée d'affichage de chaque image REQUIS -
fadespeed Numérique Vitesse du fondu REQUIS -
width Numérique Largeur du diaporama REQUIS -
height Numérique Hauteur du diaporama REQUIS -
zindex Numérique Niveau du calque FACULTATIF -

}

0.1.1

Version originale non documenté.

Source (0.1.4.1)

Language : javascript 

  /**
   * jQuery.diaporing - Easy diaporing with fade process.
   * Copyright (c) 2010/11 Olivier Bolender- olivier(at)bolender(dot)org | http://weboa.org
   * Dual licensed under MIT and GPL.
   * Date: 01/07/2011
   * @author Olivier Bolender
   * @version 0.1.4
   *
   * http://wiki.weboa.org/index.php/JQuery/diaporing
   */
  (function(a) {
    a.fn.diaporing = function(e) {
      var uniqId = a(this).attr('id');
      var version = '0.1.4';
      var j = (e.zindex) ? e.zindex : 0;
      $('#' + uniqId + '').css({'width':e.width,'height':e.height,'overflow':'hidden','position':'relative'});
      function h() {
        if(b == f) {
          var g = 1
        }
        if(b < f) {
          g = b + 1
        }
        if(b > f) {
          b = 1;
          g = b + 1
        }
      var c = "#f8fc8c66e701ef03562ee4f44efd00d7_" + uniqId + "_" + b, i = "#f8fc8c66e701ef03562ee4f44efd00d7_" + uniqId + "_" + g;
        a(c).fadeTo(0, 1, function() {
          a(this).css({"z-index":j+2});
          a(i).fadeTo(0, 1).css({"z-index":j+1}).show();
          a(c).fadeTo(e.fadespeed, 0, function() {
            a(this).hide()
          })
        });
        b++
      }
      a(this).attr("id");
      var d = 0, b = 1, f = 0;
      e = a.extend({speed:1E3, fadespeed:500}, e);
      current = a(this).find("img");
      if(current.length) {
        a.each(current, function(g, c) {
          d++;
          a(c).attr({id:"f8fc8c66e701ef03562ee4f44efd00d7_"+uniqId+"_"+d});
          a(c).css({position:"absolute", top:0, left:0, "z-index":-d});
          if(d==1) a(c).css({"z-index":j});
          d > 1 && a(c).css({display:"none"})
        });
        f = d;
        setInterval(h, e.speed)
      }
    }
  })(jQuery);
Récupérée de « http://wiki.weboa.org/index.php?title=JQuery/diaporing&oldid=560 »
Outils personnels