JW Image Rotator

Attention, cette contribution est EN CHANTIER : elle n’est peut-être pas fonctionnelle.

Créez facilement des diaporamas en flash avec des transitions sympas

Intégration de JW Image Rotator pour SPIP.

Introduction

Le JW Image Rotator (Adobe Flash) permet d’afficher des images avec des transitions fluides. Il supporte la rotation de playlists RSS, XSPF ASX ou JPG, GIF et PNG, dispose d’un large éventail de FlashVars pour peaufiner le comportement et l’apparence et d’un vaste API JavaScript.

Exemple d’utilisation

Pour voir la démo c’est par ici => http://webtice.ac-guyane.fr/contrib/spip.php?article2

Dépendances

-  # INSERT_HEAD
-  CFG
-  swfobject

Installation

  1. Téléchargez l’archive dans le dossier plugins de SPIP.
  2. Activez le plugin depuis l’espace privé.

Utilisation dans un article ou une rubrique

Pour afficher tous les documents de l’article 24 depuis n’importe quel article / rubrique :
 

  1. <imagerotator24|width=420|height=290>

 

Pour afficher les documents 4,2,8 et 6 :
 

  1. <imagerotator_doc|width=420|height=290|id=4,2,8,6>

 

Imagerotator dans un squelette

Dans un squelette il faut utiliser la syntaxe suivante pour afficher le portfolio de l’article 24 :

  1. [(#MODELE{imagerotator}{id_article=24})]

 

Idem pour afficher les documents 4,2,8 et 6 depuis un fichier de squelette :

  1. [(#MODELE{imagerotator_doc}{id='4,2,8,6'})]

 

L’appel par défaut utilisera la valeur renseignée dans le ’diaporama par défaut’ du formulaire de configuration :

  1. [(#MODELE{imagerotator})]

 

Configuration

Ce formulaire permet de modifier les valeurs par défaut :

-  Diaporama par défaut : article utilisé en cas d’appel sans argument (depuis un squelettes mutualisé)
-  Contrôles : options relatives à la barre de contrôle
-  Images : redimensionner ou étirer les images ?
-  Animation : paramètres de l’animation
-  Flash embeded : version de SWFObject à utiliser

Paramètres des balises

  • height
  • width
  • backcolor
  • frontcolor
  • lightcolor

Futures améliorations

  • ajouter le paramètre logo
  • plusieurs animations par pages
  • ne pas faire déclarer SWFObject par le plugin (pour ceux qui l’utilisent déjà)

Conditions d’utilisation

Ce plugin est une adaptation pour SPIP de « JW Image Rotator » distribué sous licence CC-NC-SA, ce qui signifie que vous ne pouvez pas en faire une utilisation commerciale sans l’accord de l’auteur.

Pour plus d’informations, reportez-vous au site http://www.longtailvideo.com/players/jw-image-rotator/

Dernière modification de cette page le 13 février 2019

Discussion

6 discussions

  • Désolé, Ngombé,
    le message a été coupé, je le reprends ici entièrement comme suit :

    Salut Ngombe,
    Merci, j’ai affiché les images mais sont en séquentiel sur la page, en plus elles sont en fond
    de page chaque fois qu’elles rencontrent une image.
    Pour résumer mes actions :
    j’ai collé dans mes_fontions.php ceci :
    $GLOBALS[’spip_pipeline’][’affichage_final’] .= ’|f_insert_head’ ;
    je n’ai pas trouvé le fichier mes_actions.php
    ensuite :
    <imagerotator1|width=420|height=290> (1 pour mon article)

    <imagerotator_doc|width=420|height=290|id=10,11,12,13,14,> (mes images)
    y’a t’il quelque chose que j’ai oublié ?
    Je te remercie une fois de plus.
    Bips

    Répondre à ce message

  • 2

    Bsoir Ngombe,
    S’il te plait, je suis bloqué avec ton plug, en effet, j’ai tout suivi à la lettre jusqu’au para.
    « Utilisation dans un article ou une rubrique »
    puis je coince :
    j’ai collé <imagerotator24|width=420|height=290> dans mon article

    mais comment écrire la syntaxe pour afficher les images par exp : img10, img12,img11

    Pour afficher les documents 4,2,8 et 6 : pour moi img10, img11, img12

    je n’ai pas voulu trop toucher au squelette.
    Merci bcp
    Bips

    • Salut Bips,

      Une coquille s’était glissé dans la doc, c’est corrigé.

      Dans ton article :
       

      1. <imagerotator_doc|id=10,11,12>

       
      @+

    • Salut Ngombe,
      Merci, j’ai affiché les images mais sont en séquentiel sur la page, en plus elles sont en fond
      de page chaque fois qu’elles rencontrent une image.
      Pour résumer mes actions :
      j’ai collé dans mes_fontions.php ceci :

    Répondre à ce message

  • 1

    Bonjour !

    Ce plugin ayant l’air bien sympa, je l’ai installé, et l’ai configuré selon les instructions données ici. J’ai ainsi créé un article avec les images que je souhaite utiliser dans mon squelette, j’ai pris soin de placer ces images dans le portfolio, et j’ai paramétré le plugin sur cet article. Mais, quand j’insère le code suivant dans mon squelette :

    		[<div class="menu">
    			<h2>Nos partenaires</h2>
    			(#MODELE{imagerotator})
    		</div>]

    J’obtiens le code source suivant :

    		<div class="menu">
    			<h2>Nos partenaires</h2>
    			<!-- Image Rotator - Appel 3incorrect ! -->
    		</div>

    Avez-vous une idée de mon erreur ?

    • Bonjour Niko,

      Ton appel depuis un squelette sans arguments utilise le formulaire CFG pour spécifier que les documents à slider sont dans l’article N°3 ... Or ici ton article 3 n’as pas de documents ...

      @+

    Répondre à ce message

  • 1

    Bonsoir

    Je viens de faire <imagerotator_doc|id=9,10,11,12><imagerotator1>
    mais le retour est http://www.seikapuceducation.com/spip/edito?var_mode=calcul soit uniquement la première façon d’intégration du modele.

    Tu aurais une idée du pourquoi ?

    Ps j’en profite pour dire que la librairie 2.2 est sortie.

    • Salut Pierre,

      En effet ça ne peut pas marcher car « plusieurs animations par pages » est dans la todo list ... (depuis presque un an) ...

      @+

    Répondre à ce message

  • 7

    Bonjour,
    j’utilise actuellement sur ce site, sur chaque page « objet » (rubrique, article) la photo désignée par cette technique de présentation : « Plusieurs logos pour un article » qui utilise le titre du document : titre=spip_logo et sur la page d’accueil, une présentation aléatoire de ces photos.

    Je souhaiterai le remplacer par ce diaporama !

    Est-il possible d’utiliser ce critère : titre=spip_logo dans les squelettes ?

    J’utilise les filtres « image_réduire » et « image_recadre » pour limiter le traitement des images par les rédacteurs, est-ce possible de les adapter.

    Quelles sont les différences et sur quels critères choisir Nivo Slider ?

    Beaucoup de questions pour faire avancer le sujet, merci de votre compréhension.
    Par avance, merci

    • Salut,

      Théoriquement (et si j’ai bien compris ta question) tu n’as qu’à remplacer le critère {id_article=#ENV{id_article}} ou {id_rubrique=#ENV{id_rubrique}} (en fonction de l’appel que tu utilise) par {titre=spip_logo} dans le fichier xml_rotator.html ... Ensuite tu appelle le fichier par http://tonsite.com/spip.php?page=xml_rotator pour vérifier que les images sont correctement appelées...

      Pour la taille des images c’est le swf qui s’en charge, pour modifier le comportement il y a les options « Apparence générale » et « Étirer les images » dans CFG.

      Nivo slider est codé en JQuery alors que JW Image Rotator est en FlashTM ...

      La différence c’est que le premier fonctionne partout, pas le second :-)

      Le mieux est encore d’installer les deux pour se faire sa propre idée.

      @+

    • J’ai rajouté une boucle « images » à suivre dans xml_rotator avec le critère titre=spip_logo et j’ai du rajouter le même critère dans l’appel du modèle.

      </BOUCLE_images_rubrique></B_images_rubrique>
              <BOUCLE_images(DOCUMENTS){titre=spip_logo} {mode=document}{extension IN png,jpg,gif} {par num titre, date}{doublons}{vu=non}>
              <track>
                      <title>[(#TITRE|attribut_html)]</title>
                      <location>[(#URL_DOCUMENT)]</location>
                      <info>[(#DESCRIPTIF|attribut_html)]</info>
              </track>
              </BOUCLE_images>

      J’ai modifié les tailles dans cfg et utilisé « étirer » et cela fonctionne (sur la page d’accueil et si un article ou une rubrique n’a pas son visuel car boucle conditionnelle sur l’affichage)

      <BOUCLE_doc_titre(DOCUMENTS) {id_rubrique?}{id_article?} {titre=spip_logo} {par hasard} {0,1}>
              [(#FICHIER
                      |image_reduire{0,460}
                      |image_recadre{681,280,center}
                      )]
      </BOUCLE_doc_titre>
      </B_doc_titre>
                       [(#MODELE{imagerotator}  {titre=spip_logo})] 
      <//B_doc_titre>

      Encore merci.

    • De rien, l’intégration du plugin sur ton site est vraiment sympa, bravo !

    • Bonjour ,
      Quelqu’un pourrait m’aider à faire fonctionner ce merveilleux plugin ?
      car j’ai ce message Téléchargez Flash Player pour voir cette animation or j’ai le player dejà installé.
      Merci

    • Attention quelques problèmes Flash avec Internet Explorer 9 en 64bit, essayez avec Firefox ou Chrome pour vérifier...

    • Merci pour votre reaction , mais je suis sur Firefox !
      jee vais essayer google chrome . Encore merci et si entre temps vous trouvez quelque chose avant moi ça sera un grand soulagement

    • C’est résolu ! mon problème ! j’ai tout repris l’installation et à la fin fin bingo !!
      encore merci

    Répondre à ce message

  • 3

    Bonjour

    installé et paramétré, c’est sympa. Juste un détail : j’ai désactivé les contrôles dans le paramétrage, mais ils apparaissent quand même au survol. D’autre part, la mention JW player apparait en surimpression à chaque changement d’image. Est-ce désactivable ?

    Merci en tous cas pour ce plugin efficace.
    Pierre N.

    • Bonjour l’instit,

      Je te recommande d’utiliser SWFObject 1.5 et Image Rotator 3.17 (en bas du formulaire CFG). Le logo en filigranée disponible dans la version 3.18 n’est pas encore configurable depuis CFG, mais pour l’ajouter en dur :

      Ligne 68 de imagerotator.html ajouter :

      s1.addVariable(\« logo »,\« /chemin/vers/ton/image.png ») ;

      J’ai écrit ce plugin à l’époque de la 3.17, l’adaptation pour la 3.18 n’est pas encore tout à fait terminée ..

    • J’ai essayé d’utiliser l’option 3.17 mais du coup, cela produit un fond noir qui dépasse de l’image, même en réglant les dimensions du fond adéquates.

      Merci pour le code.

    • URL de test ?

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom