Accueil du site > Diaporamas > Le plugin SPIP Shadowbox

Le plugin SPIP Shadowbox

lundi 18 juin 2012, par Franck Ruzzin

Attention : Pour une utilisation commerciale de Shadowbox, il faut acquérir une licence.


Shadowbox est un visualiseur d’image gratuit pour les sites web. Il est écrit en javascript. Le site officiel : http://www.shadowbox-js.com/

Caractéristiques :
- Utilise un balisage HTML valide
- Indépendant de tout framework javascript
- Paramétrable
- Code soigné, modulaire et compact
- Universel : support des principales langues
- Non obstrusif : si le javascript est désactivé, la page est affichée sans problèmes

Langues supportées :
- ar : Arabe
- ca : Catalan
- cs : Tchèque
- da : Danois
- de : Allemand
- en : Anglais
- es : Espagnol
- et : Estonien
- fi : Finlandais
- fr : Français
- gl : Galicien
- he : Hébreu
- hu : Hongrois
- id : Indonésien
- is : Islandais
- it : Italien
- ja : Japonais
- ko : Coréen
- my : Birman
- nl : Néerlandais
- no : Norvégien
- pl : Polonais
- pt : Portugais
- pt : Portugais Brésilien
- ro : Roumain
- ru : Russe
- sk : Slovaque
- sv : Suédois
- tr : Turc
- zh : Chinois simplifié

Testé avec : Firefox 1.5 +, Safari 2 +, Opera 9 +, Chrome 1+, Internet Explorer 6 +.

Pour lancer le diaporama, cliquez sur l'image

shadowboxItem Hibiscus de Tahiti 1

 

Le plugin Shadowbox ajoute un diaporama Shadowbox dans un article.

Les images qui constituent le diaporama sont jointes à l’article :
- en tant que documents (pour SPIP 1.9)
- déposées dans le portfolio (SPIP 2)

La version pour SPIP 3 accepte aussi les documents swf et flv.

Il y a 4 moyens d’utiliser le plugin :

Les 2 balises :
- #SHADOWBOXGALLERY insertion avec portfolio
- #SHADOWBOX insertion sans portfolio

Les 2 modèles :
- <mod_shadowboxgallerynnn> insertion avec portfolio (nnn est l’id de l’article contenant les images à intégrer dans le diaporama)
- <mod_shadowboxnnn> insertion sans portfolio (nnn est l’id de l’article contenant les images à intégrer dans le diaporama)

Le plugin Shadowbox nécessite l’utilisation du plugin CFG, par lequel on peut configurer certains des paramètres de l’affichage :
- Hauteur des vignettes du portfolio
- Largeur des vignettes du portfolio
- Taille de l’image initiale (mode sans portfolio)
- Activer les animations
- Activer le fondu enchainé
- Paramétrer la séquence lors du redimensionnement (ordre hauteur et largeur)
- Permettre une lecture cyclique
- Choisir le style de compteur ("x sur y" ou lien)
- Choisir le nb de liens (pour le type de compteur lien)
- Afficher le compteur
- Afficher les contrôles de navigation
- Permettre la navigation par clavier
- Régler la durée du fondu enchainé
- Gérer le débordement des images
- Choisir la hauteur initiale de ShadowBox
- Choisir la largeur initiale de ShadowBox
- Indiquer si la fenêtre Shadowbox est modale
- Choisir la couleur du fond d’écran
- Choisir l’opacité du fond d’écran
- Choisir la durée du redimensionnement
- Afficher le fond d’écran
- Choisir la vitesse d’enchainement du diaporama
- Choisir la marge entre ShadowBox et l’écran

 

IMPORTANT

Pour une utilisation avec les versions de SPIP antérieures à 2,
- il faut éditer les fichiers

  • shadowbox.html
  • shadowboxgallery.html
  • mod_shadowbox.html
  • mod_shadowboxgallery.html

et retirer dans toutes les boucles le critère {vu=non}

Documents joints

19 Messages de forum

  • Le plugin SPIP Shadowbox 3.0.3 Le 1er octobre 2010 à 11:40 , par pierre

    bonjour franck et merci pour ce script, y a t-il une possibilité de ne pas démarrer le diaporama automatiquement ?

    Répondre à ce message

    • Le plugin SPIP Shadowbox 3.0.3 Le 1er octobre 2010 à 11:57 , par Franck Ruzzin

      Bojour Pierre,

      Pour que le mode diaporama ne soit pas actif, il faut régler (via CFG) la variable "Vitesse d’enchainement du diaporama" (slideshowDelay) et lui attribuer la valeur 0.
      On doit ensuite faire défiler les photos manuellement.

      Cordialement,
      Franck

      Répondre à ce message

  • Le plugin SPIP Shadowbox 3.0.3 Le 2 novembre 2010 à 16:59 , par Syd Dolby

    Bonjour

    Très bonne idée et plugin très bien conçu.
    Je ne sais pas si vous pourrez répondre à ma question.

    Je souhaite ouvrir la shadowbox à l’ouverture de la page, et faire défiler les images d’un article.
    J’y arrive avec une image, mais pas avec une séquence d’images.

    Voici mon code :

    <script type="text/javascript">
    Shadowbox.init({
    // let's skip the automatic setup because we don't have any
    // properly configured link elements on the page
    skipSetup: true
    });

    Shadowbox.init({
    skipSetup: true,
    });

    window.onload = function() {
    Shadowbox.open({
    content: '<BOUCLE_document_portfolio(DOCUMENTS){id_article=10}{mode=document}{extension IN png,jpg,gif}{par num titre, date}{0,1}>#URL_SITE_SPIP/[(#FICHIER)]</BOUCLE_document_portfolio>',
    player: 'img',
    title: "Welcome",

    });
    };
    </script>

    Merci de votre aide

    Répondre à ce message

    • Le plugin SPIP Shadowbox 3.0.3 Le 3 novembre 2010 à 19:55 , par Franck Ruzzin

      Salut Syd,

      Je te propose une solution qui fonctionne bien chez moi (mais suivant la config de ta distrib il y a peut-être des réglages à effectuer ?).
      Cela passe par l’ajout de quelques lignes javascript (situées vers la fin à la fin du modèle ci joint).

      Dans le dossier modeles du plugin, rajoutes le fichier mod_shadowbox_setup.html dont le code est ci après :

      ******************************************************************************
      [(#REM)
              Modèle mod_shadowbox_setup
              03 Novembre 2010
             Insère un diaporama Shadowbox sans gallerie avec démarrage automatique
      ][(#REM)
             Les images à visualiser sont jointes à l'article dont l'id suit le nom du modèle, et ajoutées dans le portfolio.
                      La première des images est affichée au point d'insertion du diaporama et permet son lancement.
                      Usage :
                              <mod_shadowbox25> insère un diaporama Shadowbox avec les images du portfolio de l'article d'id 25
                      Les images qui sont insérées dans l'article ne sont pas concernées.
      ]

      <BOUCLE_principale(ARTICLES) {id_article=#ENV{id}}>
              <B_documents_portfolio>
                      [(#REM) Placer les vignettes dans un div pour pouvoir intervenir sur le style]
                      <div class="shadowbox shadowbox-center">
                      <h2><:shadowbox:start_slideshow:></h2>
                      [(#REM) SPIP 2.0 rajouter le critère {vu=non}, sinon retirer]
                      <BOUCLE_documents_portfolio(DOCUMENTS){id_article} {mode=document}{extension IN png,jpg,gif} {par num titre, date}{doublons}{vu=non}{0,1}>
                              [(#REM) Déclaration des vignettes : l'attribut href indique l'URL de l'image grande dimension.]
                              <a href="#URL_DOCUMENT" id="shadowboxRoot#ID_ARTICLE" class="shadowboxItem#ID_ARTICLE" [title="(#TITRE|attribut_html)"]>
                                      <img src="[(#FICHIER|image_reduire{#CONFIG{cfg_shadowbox/imageSize,500}}|extraire_attribut{src})]" alt="shadowboxItem [(#TITRE|attribut_html)]" [title="(#TITRE|attribut_html)"] />
                              </a>
                      </BOUCLE_documents_portfolio>
                     
                      <B_documents_portfolio_cache>
                              <div class="shadowbox-hidden-container">
                              [(#REM) SPIP 2.0 rajouter le critère {vu=non}, sinon retirer]
                              <BOUCLE_documents_portfolio_cache(DOCUMENTS){id_article} {mode=document}{extension IN png,jpg,gif} {par num titre, date}{doublons}{vu=non}>
                                      <a href="#URL_DOCUMENT" class="shadowboxItem#ID_ARTICLE" [title="(#TITRE|attribut_html)"]></a>
                              </BOUCLE_documents_portfolio_cache>
                              </div>
                      </B_documents_portfolio_cache>
                     
                      </div>
              </B_documents_portfolio>


              <script type="text/javascript">
             
              $(document).ready(function(){
                      Shadowbox.setup("a.shadowboxItem#ID_ARTICLE", {
                              [animate : (#CONFIG{cfg_shadowbox/animate}),]
                              [animateFade : (#CONFIG{cfg_shadowbox/animateFade}),]
                              [animSequence : '(#CONFIG{cfg_shadowbox/animSequence})',]
                              [continuous : (#CONFIG{cfg_shadowbox/continuous,true}),]
                              [counterType : '(#CONFIG{cfg_shadowbox/counterType})',]
                              [counterLimit : (#CONFIG{cfg_shadowbox/counterLimit}),]
                              [displayCounter : (#CONFIG{cfg_shadowbox/displayCounter}),]
                              [displayNav : (#CONFIG{cfg_shadowbox/displayNav}),]
                              [enableKeys : (#CONFIG{cfg_shadowbox/enableKeys}),]
                              [fadeDuration :  (#CONFIG{cfg_shadowbox/fadeDuration,350}|div{1000}),]
                              [handleOversize : '(#CONFIG{cfg_shadowbox/handleOversize})',]
                              [initialHeight : (#CONFIG{cfg_shadowbox/initialHeight}),]
                              [initialWidth : (#CONFIG{cfg_shadowbox/initialWidth}),]
                              [modal : (#CONFIG{cfg_shadowbox/modal}),]
                              [overlayColor : '(#CONFIG{cfg_shadowbox/overlayColor})',]
                              [overlayOpacity :  (#CONFIG{cfg_shadowbox/overlayOpacity,80}|div{100}),]
                              [resizeDuration :  (#CONFIG{cfg_shadowbox/resizeDuration,350}|div{1000}),]
                              [showOverlay : (#CONFIG{cfg_shadowbox/showOverlay}),]
                              [slideshowDelay :  (#CONFIG{cfg_shadowbox/slideshowDelay,3000}|div{1000}),]
                              [viewportPadding : (#CONFIG{cfg_shadowbox/viewportPadding}),]
                              gallery :"Shadowbox Gallery #ID_ARTICLE"
                      });
                     
                      Shadowbox.lang.code = '<:shadowboxgui:code:>';
                      Shadowbox.lang.of = '<:shadowboxgui:of:>';
                      Shadowbox.lang.loading = '<:shadowboxgui:loading:>';
                      Shadowbox.lang.cancel = '<:shadowboxgui:cancel:>';
                      Shadowbox.lang.next = '<:shadowboxgui:next:>';
                      Shadowbox.lang.previous = '<:shadowboxgui:previous:>';
                      Shadowbox.lang.play = '<:shadowboxgui:play:>';
                      Shadowbox.lang.pause = '<:shadowboxgui:pause:>';
                      Shadowbox.lang.close = '<:shadowboxgui:close:>';
                      Shadowbox.lang.errors={
                              single: '<:shadowboxgui:single>',
                              shared: '<:shadowboxgui:shared>',
                              either: '<:shadowboxgui:either>'
                      }
              });
             
             
              function startSlideshow#ID_ARTICLE() {
                      var id='shadowboxRoot#ID_ARTICLE';
                      var elem = document.getElementById(id);
                      Shadowbox.open(elem);
              }
                     
              var oldonload = window.onload;
              if (typeof window.onload != 'function') {
                      window.onload = startSlideshow#ID_ARTICLE;
              } else {
                      window.onload = function() {
                              oldonload();
                              startSlideshow#ID_ARTICLE();
                      }
              }
             
              </script>

      </BOUCLE_principale>
      ******************************************************************************

      tu remarqueras l’ajout de

              function startSlideshow#ID_ARTICLE() {
                     var id='shadowboxRoot#ID_ARTICLE';
                     var elem = document.getElementById(id);
                     Shadowbox.open(elem);
             }
                   
             var oldonload = window.onload;
             if (typeof window.onload != 'function') {
                     window.onload = startSlideshow#ID_ARTICLE;
             } else {
                     window.onload = function() {
                             oldonload();
                             startSlideshow#ID_ARTICLE();
                     }
             }

      On vient de définir un nouveau modèle mod_shadowbox_setup

      Il suffit maintenant d’insérer dans le texte de l’article le nouveau modèle sous la forme :
      <mod_shadowbox_setupxxx> où xxx est est le numéro de l’article qui contient les photos à insérer dans le diaporama.

      ATTENTION : le diaporama se lance aussi automatiquement dans l’espace privé

      Pour l’empêcher, editer le fichier shadowbox_pipeline.php et remplacer

      function shadowboxspip_header_prive($flux){
                      $flux .= "<script src='" . _DIR_PLUGIN_SHADOWBOX . "javascript/shadowbox.js' type='text/javascript'></script>\n";
                      $flux .= "<script>Shadowbox.init({skipSetup: true});</script>\n";
                      $flux .= "<link rel='stylesheet' href='" . _DIR_PLUGIN_SHADOWBOX . "css/shadowbox.css' type='text/css' media='all' />\n";
                      $flux .= "<link rel='stylesheet' href='" . _DIR_PLUGIN_SHADOWBOX . "css/shadowbox_spip.css' type='text/css' media='all' />\n";
                      return $flux;
              }

      par

      function shadowboxspip_header_prive($flux){
                      $flux .= "<link rel='stylesheet' href='" . _DIR_PLUGIN_SHADOWBOX . "css/shadowbox.css' type='text/css' media='all' />\n";
                      $flux .= "<link rel='stylesheet' href='" . _DIR_PLUGIN_SHADOWBOX . "css/shadowbox_spip.css' type='text/css' media='all' />\n";
                      return $flux;
              }

      Et voilà !!

      J’espère avoir répondu à ta question

      A+,
      Franck

      Répondre à ce message

    • Le plugin SPIP Shadowbox 3.0.3 Le 3 novembre 2010 à 20:42 , par Franck Ruzzin

      J’oubliais,

      Dans le modèle, j’ai aussi rajouté un id à la première photo :

      <a href="#URL_DOCUMENT" class="shadowboxItem#ID_ARTICLE" [title="(#TITRE|attribut_html)"]>

      par

      <a href="#URL_DOCUMENT" id="shadowboxRoot#ID_ARTICLE" class="shadowboxItem#ID_ARTICLE" [title="(#TITRE|attribut_html)"]>

      Voilà.
      Franck

      Répondre à ce message

  • Le plugin SPIP Shadowbox 3.0.3 Le 25 mai 2011 à 15:44

    Bonjour,
    je viens vous demander de l’aide, après de nombres tests.

    Je souhaite utiliser le plugin avec de la vidéo.
    Shadowsbox.js dans sa version originale le permet mais je n’arrive pas à le mettre en oeuvre sur mon site spip 2.1.10

    Pour les images aucun problème !

    Pour les vidéos attachées à l’article, elles sont comptabilisées dans les documents mais pas de chargement, ni de lecture.
    J’ai fais des tests avec des vidéos swf et Simeo.

    Si quelqu’un a réussi, je veux bien un petit coup de pouce. D’avance Merci.

    Répondre à ce message

  • Le plugin SPIP Shadowbox 3.0.3 Le 7 juillet 2011 à 16:55 , par Timous

    Bonjour Franck,
    J’ai un petit soucis avec Shadowbox 3.0.3, en effet après avoir installer le plugin selon la demarche , pas de probleme dans la parti back office, mais en publique rien n’y pas je vois juste les image mais quand je clic dessus il ouvre dans une autre fenetre !
    Vraiment si tu peux me donner un coup de main vraiment tu me rendra un grand service .
    Merci de me lire

    Répondre à ce message

    • Le plugin SPIP Shadowbox 3.0.3 Le 7 juillet 2011 à 16:59 , par Franck Ruzzin

      Bonjour Timous,

      As tu bien vidé le cache de SPIP ?
      Pourrais tu donner un lien vers la page ?

      A+,
      Franck

      Répondre à ce message

      • Le plugin SPIP Shadowbox 3.0.3 Le 7 juillet 2011 à 18:06 , par Timous

        Merci pour ta réaction, en fait je suis toujours en local . Dans la partie Admin pas de problème, mais sur le site il reagit comme si je faisais clic droit pour afficher l’image.
        et affiche l’image sans lecteur !!
        Encore merci

        Répondre à ce message

        • Le plugin SPIP Shadowbox 3.0.3 Le 7 juillet 2011 à 19:50 , par Franck Ruzzin

          Pourrais tu m’envoyer une copie du code source de la page qui ne fonctionne pas (affichage/code source) à franck lededansdubocal.net

          A+,
          Franck

          Répondre à ce message

          • Le plugin SPIP Shadowbox 3.0.3 Le 8 juillet 2011 à 13:28 , par Timous

            Bonjour Franck,
            Juste te rappeler que je t’ai envoyé mon code à l’adresse indiquée. Merci de reagir

            Répondre à ce message

            • Le plugin SPIP Shadowbox 3.0.3 Le 8 juillet 2011 à 13:55 , par Franck Ruzzin

              Bonjour Timous,

              Dans le code que tu m’as envoyé, je ne vois pas l’inclusion des fichiers nécessaire au plugin Sahadowbox :
              - javascript/shadowbox.js
              - css/shadowbox.css
              - css/shadowbox_spip.css

              J’en déduis qu’il doit manquer dans la partie head de ton squelette :

              <head>
              ...
              ...
              <INCLURE{fond=inc-head}>
              ...
              </head>

              Cette ligne <INCLURE{fond=inc-head}> est utilisée par tous les plugins et leur permet d’insérer dans l’entête de la page tous les fichiers nécessaire a leur bon fonctionnement.
              Si la l_igne est manquente, nombre de plugin ne fonctionnenet pas.

              Cordialement,
              Franck

              Répondre à ce message

  • Le plugin SPIP Shadowbox 3.0.3 Le 12 juillet 2011 à 17:27

    bonjour Franck ,
    je t’ai envoyé un message en Pv ! merci de reagir

    Répondre à ce message

Répondre à cet article