Intégration de la galerie Lightbox JS v2.0

jeudi 27 juillet 2006
par  marsu15
popularité : 3%

Qu’est-ce la Lightbox JS v2.0

C’est une galerie photo en Javascript, qui permet de créer des diaporamas
Exemple disponible sur mon site perso Ouba’Web

Mise en oeuvre

- Fichiers à modifier :

  • inclusions/header.html
  • article.html

Modifications du fichier inclusions/header.html

Avec SPIP en version 1.9, il faut ajouter ces 4 lignes de codes :

<script type="text/javascript" src="#CHEMIN{prototype.js}"></script>
<script type="text/javascript" src="#CHEMIN{scriptaculous.js}?load=effects"></script>
<script type="text/javascript" src="#CHEMIN{lightbox.js}"></script>
<link type="text/css" rel="stylesheet" href="#CHEMIN{lightbox.css}"  media="screen" />

Avec une version précédente, il faut utiliser le code suivant :

<script type="text/javascript" src="../squelettes/prototype.js"></script>
<script type="text/javascript" src="../squelettes/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="../squelettes/lightbox.js"></script>
<link type="text/css" rel="stylesheet" href="../squelettes/lightbox.css"  media="screen" />

Modifications du fichier article.html

Dans article.html, chercher :

<B_images_article>
 <div id="img_article" class="en-tete"><:img_article:> :</div>
 <div class="images">
  <BOUCLE_images_article(DOCUMENTS){id_article}{extension == jpg|png|gif}{mode=document}{doublons}>
   <div class="vignette">
    <a href=#URL_DOCUMENT target="_blank" class="info"> #LOGO_DOCUMENT [<span>(#DESCRIPTIF)</span>]</a>
     <ul>                                                              [<li><:img_titre:> : (#TITRE)</li>]                              <li><:img_taille:> : #LARGEUR par #HAUTEUR</li>
     <li><:img_poids:> : [(#TAILLE|taille_en_octets)]</li>
     <li><:img_format:> : #TYPE_DOCUMENT</li>
     </ul>
   </div>
 </BOUCLE_images_article>
</div>
<div class="clear"><span></span></div>
</B_images_article>

puis le remplacer par le code suivant (SPIP 1.9) :

<B_images_article>
 <div id="img_article" class="en-tete"><:img_article:> :</div>
 <div class="images">
   <BOUCLE_images_article(DOCUMENTS) {id_article} {mode=document}{extension==(png|jpg|gif)$}{doublons} >
   <a rel="lightbox[]" href="#URL_DOCUMENT" title="[<h3>(#TITRE|texte_backend)</h3>][(#DESCRIPTIF|texte_backend)]">[(#FICHIER|image_masque{mon-masque.png}|inserer_attribut{alt,[(#TITRE|couper{80}|texte_backend)]})]</a>
   </BOUCLE_images_article>
 </div>
</B_images_article>

Le code précédent ne fonctionne que avec SPIP 1.9, car il utilise les fonctions de retouche automatique des images de SPIP 1.9, pour créer des miniatures toutes de la même taille.

Si vous possédez une version antérieure à la 1.9, il faut utiliser le code suivant :

<B_images_article>
 <div id="img_article" class="en-tete"><:img_article:> :</div>
 <div class="images">
        <BOUCLE_images_article(DOCUMENTS){id_article}{extension == jpg|png|gif}{mode=document}{doublons}>
        <div class="vignette">
        <a rel="lightbox[]" href=#URL_DOCUMENT title="[<h3>(#TITRE|texte_backend)</h3>][(#DESCRIPTIF|texte_backend)]"> #LOGO_DOCUMENT</a>
        </div>
        </BOUCLE_images_article>
  </div>
</B_images_article>

Rassurez-vous, c’est presque fini... :-)

Il faut juste décompresser le fichier fourni avec cet article (en bas de la page) puis de transférer son contenu dans le dossier squelettes de votre SPIP.
Il faudra ensuite activer la bibliothèque GD2, et dire à SPIP de l’utiliser. Pour cela, vous devez être administrateur du site. Il faut cliquez sur l’icône configuration, puis ensuite sur fonctions avancées. Puis dans la rubrique "Méthode de fabrication des vignettes", il vous faut choisir GD2. Si ce choix n’apparaît pas, ce que vous ne pouvez pas l’utiliser ^^.


Documents joints

Lightbox JS v2.0
Lightbox JS v2.0

Commentaires  forum ferme

Logo de jicew
Intégration de Lightbox JS v2.0
dimanche 16 mars 2008 à 15h30 - par  jicew

Bonjour,

Besoin de conseils.

Voila j’ai installé Lightbox comme décrit dans cet article. J’utilise encore la version SPIP SPIP 1.8.3 et Sarka-SPIP 1.1.2-c16.

J’ai donc copier les extraits de code qui vont bien pour les versions précédente à la 1.9 de SPIP.

J’ai téléchargé et uploadé sur mon site.
Je ne sais pas si j’ai bien fait mais j’ai uploadé les fichiers .js sous mon dossier script les .css sous le dossier style et le reste sous squelette.

J’ai bien été dans le menu configuration avancé de l’espace privé pour activer GD2.

Mais maintenant comment rattacher une image Lightbox.

Merci

Le site concerné Maison de retraite de saint-Germain la Ville

Logo de jicew
mardi 18 mars 2008 à 18h09 - par  jicew

Bonjour,

La réponse était dans ma question. J’ai adapté les chemins et ça fonctionne.

Site web : le resultat
Logo de leny
Intégration de la galerie Lightbox JS v2.0
jeudi 12 juillet 2007 à 00h56 - par  leny

Bonjour,

Serait-il possible d’obtenir la procédure d’installation de la galerie lightbox pour sarkaspip 2.0.0 ?
Merci

Logo de leny
vendredi 2 mai 2008 à 19h29 - par  LebossTom

des nouvelles de la nouvelle version de la galerie ?

d’avance merci,

cordialement,

Thomas

Site web : Fichier dll
Logo de LebossTom
vendredi 13 juillet 2007 à 09h13 - par  _Eric_

Salut Leny,

J’espère pouvoir implémenter la galerie avec le plugin Thickbox V2. Donc si tu peux patienter...

Par contre, rien ne t’empêche pour l’instant de créer tes albums. Ils seront prêts pour recevoir la galerie dynamique car je ne changerai pas la modélisation, seule la page album sera modifiée avec transparence pour l’utilisateur.

A+

Logo de _Eric_
vendredi 13 juillet 2007 à 00h28 - par  leny

J’utilise actuellement la galerie,
mais je suis tenté comme beaucoup d’autres sarkaspipien par une galerie plus esthétique et dynamique.
Merci pour la réponse rapide.

Logo de leny
jeudi 12 juillet 2007 à 16h08 - par  _Xavier_

Salut Leny

L’intégration de la galerie Lightbox au squelette est la contribution d’un auteur (marsu15). Elle ne fait pas partie intégrante du squelette. Nous n’assurons donc pas son intégration dans celui ci.

Depuis l’écriture de cet article, le collectif SARKA a développé sa propre galerie. Pourquoi ne l’utilises-tu pas ?

Une petite remarque : l’actuelle galerie va surement évoluer dans la prochaine version du squelette. Je crois savoir que SarkASmel y travaille.

@+

SarkARchimeD

Logo de kluss
Intégration de la galerie Lightbox JS v2.0
vendredi 22 juin 2007 à 22h40 - par  kluss

Bonjour,
J’ai suivi toutes les étapes décrites, j’ai téléchargé dans un article des photos et je n’obtiens à l’affichage de ma galerie :

[1-] /

Merci de votre aide.

Site web : Mon site ici
Logo de kluss
samedi 23 juin 2007 à 10h14 - par  _Eric_

Salut,

Y a surement un truc que tu as raté ;-). En fait, au vu de ton site, il semble que tu aies bien implémenté la galerie. Mais l’album ne détecte aucune photo.

Es tu sur d’avoir chargé des photos de type jpg, png ou gif ?

Sinon, donne moi accès à ton site en admin (envoie moi les coordonnées sur mon mail) et je regarderais précisement.

A+

Logo de Souah
Intégration de la galerie Lightbox JS v2.0
jeudi 29 mars 2007 à 14h34 - par  Souah

Bonjour,

J’essaye d’intégrer la lighbox 2.0 sous SPIP 1.9.1 et Sarka 1.9.1 en vain !
Je suis pas à pas le tutoriel mais je ne peux pas choisir à la dernière étape la méthode de fabrication des vignettes GD2. Je travaille en local sous easy php 1.8.0.1. Est ce que c’est ca qui fait que ca ne fonctionne pas ?

Merci

Logo de Souah
lundi 2 avril 2007 à 09h44 - par  Souah

Salut et un grand merci pour cette réponse !

Je n’aurai jamais trouvé !

Pour expliquer la manoeuvre, il faut aller dans le répertoire d’installation d’apache, pour moi :
"C :\Program Files\EasyPHP1-8\apache"
Ensuite éditer le fichier "php.ini" et décommenter la ligne comprenant :
"extension=php_gd2.dll" en supprimant le " ;" en début de ligne (à la ligne 1091 pour moi).
Ensuite, redémarrer le serveur apache et refaire la manip d’activation de la librairie gd2 dans l’espace privé SPIP...

MAGIQUE ca marche !

Merci beaucoup Eric !!!

Logo de Souah
vendredi 30 mars 2007 à 21h06 - par  _Eric_

Salut,

Il est possible que tu n’aies pas activé le module apache correspondant. Regarde la configuration apache et active les modules dont le nom inclus gd ou gd2.

Voila et tiens moi au courant.

A+

Logo de mao-40
Problème Lightbox JS v2.0
dimanche 18 mars 2007 à 22h22 - par  mao-40

Bonjour,

Comme beaucoup j’ai essayé d’utiliser la galerie Lightbox et comme beaucoup ça ne fonctionne pas !
Y en a t’il, parmi vous, qui ont réussi à l’installer ?

SPIP 1.9.2 [8782] | Sarka-SPIP 1.9.1 [163]

Logo de Olysh
Intégration de la galerie Lightbox JS v2.0
samedi 17 mars 2007 à 14h01 - par  Olysh

Bonjour

J’ai installé la galerie lighbox sur SPIP 1.9.2 et sarka-spip 1.9, n’ai pas fait de modif’ particulière mais les documents joints ont toujours l’affichage par défaut, la lighbox ne se lance pas.

J’utilise le même hébergement (mais pas la même bdd) pour un autre site qui utilise aussi la galerie Lightbox sur sarka-spip 1.9 et spip 1.9.1 et fonctionne correctement.

Je ne comprends pourquoi la lightbox ne se lance pas pour lepremier site... J’ai bien comparé les 2 sites, j’ai refait l’installation plusieurs fois sur le premier, en vain. Est-ce que quelqu’un pourrait m’aider ?

Logo de Olysh
dimanche 10 juin 2007 à 09h42 - par  _Eric_

Bonjour Darte,

Si tu utilises Sarka, tu n’as rien à installer, c’est une fonctionnalité du squelette. Pour la mettre en oeuvre il suffit de suivre les explications de l’article La galerie : notions de base.

Sinon, ce n’est pas un plugin et exporter cette fonctionnalité sur un autre squelette n’est pas chose aisée.

Voila, tiens nous au courant.

Logo de _Eric_
samedi 9 juin 2007 à 22h20 - par  darte

J’ai vu votre galerie photo sur votre site. Je chercher a faire a peu prêt la même chose.

Pouvez-vous m’aider ?

Quels plugins utilisez vous ? Et qu’avez-vous modifier pour obtenir se resultat ?

Logo de darte
jeudi 29 mars 2007 à 18h31 - par  jebegood

merci beaucoup emmanuel !

et sinon comment est-il possible d’effectuer redirection d’une rubrique vers lien externe, comme on peut le faire avec un article ?!?

Logo de jebegood
mercredi 28 mars 2007 à 23h44 - par  Emmanuel

Pour classer les rubriques, on peut les numéroter ainsi (de 10 en 10 pour autoriser des ajouts ultérieurs) : xx._nomrubrique

Le numéro n’apparaît pas sur le site.

Logo de Emmanuel
mercredi 28 mars 2007 à 22h53 - par  jebegood

merci pour votre disponibilité et votre écoute !

bon bah je v un peu vous dire tout ce que je trouve perfectible sur votre squelette (notamment concernant la galerie) parce que franchement il manque pas grand chose pour qu il soit vraiment au top

donc moi je gere un site web consacré à la promotion d’un sport extraordinaire et méconnu, le trial (à bicyclette ;) ) via de la vidéo, de la photo et un forum actif... www.tribalzone.fr j’ai mis en ligne ce site html (un peu à l’arrache) il y a deux ans et ca a bien marché... à tel point qu il devient urgent de passer a un site dynamique en php pour pouvoir continuer a evoluer et meme simplement a exister (html trop lourd a gerer)... je fais la connaissance de SPIP et je comprends de suite que c ce qu il me faut... mais il faut imperativement trouver la presentation qui mettra en valeur et ordonnera le contenu... je cherche je cherche et c pas facile... le rendu de la plupart des sites sont vraiment "bordeliques"... très peu "lisibles" et donc attractifs... sarka tombe sur mon chemin et je me dis de suite ca c bien foutu mais par contre faudra essayer de l’adapter... y a des choses qui grevent la presentation

et oui dès qu on remplit un peu le site la page accueil descend descend... on se retrouve a un mêtre en dessous de l’écran horreur & damanation :( ;)

tt d abord cette presentation des rubriques au centre de la page d accueil... des rubriques si elles sont clairement définies au départ n’ont pas besoin d’être définies sur page accueil... heureusement je trouve le moyen de supprimer cela relativement facilement... il suffit d’aller dans la feuille de style et de supprimer la boucle correspondante

j’en profite pour supprimer la boucle qui rappelle en page accueil les liens syndiqués... le côté droit est trop profond

je decouvre la magnifique boucle "edito" qui s’active par mot clé et permet de véritablement concevoir une page d accueil digne de ce nom... j’y intègre un chat (externe) par copier coller d’un code et la derniere vidéo de notre compte dailymotion, également par copier-coller d’un code html externe

au sujet de la page accueil il faut imperativement aussi que les brèves le soient brèves car sinon c’est pareil on plonge très (trop) loin sous l’écran... mais bon après tout c’est peut etre pas si mal ca oblige a distinguer clairement breves et articles... dommage tt de meme qu on ne puisse pas simplement limiter la hauteur des brèves accueil ou en diminuer le nombre présentées (ca doit se gerer dans le code source qq part fo que je cherche) ou alors comme les pages accueil mettre descriptif pr presentation

j’ai un imperieux besoin d’une rubrique vidéo... heureusement je peux integrer très facilement les vidéos de mon espace dailymotion donc pour cela pas de probleme ca va se gerer facilement

par contre la rubrique photo... pour le moment je v peut etre devoir conserver un module externe... en effet la rubrique "galerie" est bien mais trop simpliste... pas assez dynamique... tout d’abord les albums ne peuvent que s’empiler et pas moyen d’opérer un classement par rubriques dans la galerie... aïe... ca le fait pas trop de melanger les photos des pros avec celles des membres de notre asso... grosse perte de lisibilité... donc il faudrait absolument pouvoir faire un tel classement !!! Et puis quel dommage aussi de ne pas pouvoir y integrer un module diapo qui permet de faire defiler les photos à la taille de l’écran... en fait ideal serait de pouvoir obtenir qq chose comme Lightbox... j’ai désespérement essayé de l’adapter mais impossible... peut etre faudrait il que je redescende a SPIP 1.9.1 mais c dommage...

concernant les rubriques aussi pour les classer ca a pas l air evident... je ne me suis pas penché sur la question... mais il va falloir que je les classe en fonction de leur importance respective et non d un ordre alphabetique ou de mise a jour je ne sais pas quel est le mode par defaut... fo que je cherche a resoudre ce probleme...

autre besoin imperieux a mon gout... un forum digne de ce nom... je trouve personnellement que forum intégré au site n’est pas toujours la bonne solution et ca fait perdre la lisibilité du site... moi je veux un forum dans une rubrique "forum" tout simplement mais je sais pas si cela est possible sous SPIP... je pense que si... pour moment il faut donc que je fasse une redirection sur un module externe PHPBB2

au fait comment peut on faire pour rediriger directement une rubrique vers un site ??? je voudrais qu un clic sur une rubrique "forum" m’emmène directement vers un forum externe phpbb2... comment est ce possible simplement ??? j’ai cherché mais je n’ai pas trouvé :(

voila toutes les remarques que je peux vous faire au bout d’une semaine... en tous cas le résultat actuel visible ici est déjà top et répond a la plupart de mes attentes... mais j espere bien arriver a surmonter mes petites difficultés (redirection rubrique, galerie dynamique)... voila je sais pas si mon experience peut vous aider a faire evoluer votre squelette, je l espere sincerement ca serait un tout petit retour par rapport a ce que vous m avez apporté MERCI INFINIMENT de mettre ainsi tout votre travail a notre disposition !!!

Logo de jebegood
mercredi 28 mars 2007 à 16h38 - par  Olysh

Résultat visible ici.

Logo de Olysh
mardi 27 mars 2007 à 13h27 - par  _Eric_

Salut,

Pour améliorer le squelette nous avons besoin aussi de vos commentaires, c’est essentiel.

Nous avons implémenter la galerie Sarka depuis la 1.9 pour répondre aux demandes expresses de certains utilisateurs. Nous avons l’intention de la faire évoluer rapidement.

Aussi, pourrais tu nous préciser ce que tu entends par semi-dynamique (diaporama, autre...) ? Peux tu préciser ton besoin ?

Merci d’avance.

Logo de _Eric_
mardi 27 mars 2007 à 11h30 - par  jebegood

salut je trouve que c vraiment ce qui manque a sarka...une galerie semi-dynamique ...

je n arrive pas a faire comme sur votre site de photo aerienne une rubrique photo avec le plugin diapo et lightbox... les photos du diapo depassent du cadre et le lightbox se lancent pas

si vous pouviez m’aider sur ce coup là ca serait super sympa

Logo de jebegood
mardi 27 mars 2007 à 02h05 - par  Olysh

Ca marche bien avec Spip 1.9.1 !

Spip 1.9.2 intégre la librairie JQuery, pas Spip 1.9.1. Ca viendrait pas de là ?

Logo de Olysh
vendredi 23 mars 2007 à 13h11 - par  Olysh

- J’ai finalement installé plugin diapo qui répond un peu à mes attentes : une galerie semi-dynamique avec un affichage du titre et du menu presque satisfaisant.
Voir le site

A + et merci encore pour tout le boulot.

Logo de Olysh
mercredi 21 mars 2007 à 14h17 - par  Olysh

La galerie intégrée dans Sarka fonctionne très bien, j’ai désinstallé la lightbox ; j’aurais préféré conserver un affichage dynamique comme le propose la lightbox (pour des raisons esthétiques) et surtout éviter le déplacement vertical de la page consultée qui fait disparaitre le bandeau et une partie des menus à chaque affichage d’une photo.

On en demande toujours plus...un grand grand merci tout de même pour tout le travail qui a été fourni sur Sarka-spip.

Je vais continuer mes tentatives pour faire fonctionner la lightbox (sur la version 1.9.1 de Spip et Sarka-spip 1.9.1).

Merci et bonne continuation.

Logo de Olysh
lundi 19 mars 2007 à 20h44 - par  _Eric_

Bonjour,

Une question surement idiote ;-). Pourquoi ne pas utiliser la galerie intégrée dans Sarka ?

A+

Logo de _Eric_
lundi 19 mars 2007 à 11h06 - par  Olysh

Je donne quelques informations supplémentaires :
- la lighbox ne se lance pas sur la page article de ce site
- j’utilise Spip 1.9.2 [8782] et Sarka-spip Version 1.9.1.
- Je n’ai pas fait de modifications du fichier article.html
- J’ai réinstallé plusieurs fois la lightbox.

Et la lighbox ne se lance pas, c’est à dire que les documents insérés dansun article s’afffichent comme le squelette Sarka -spip le prévoit par défaut.

Je ne comprends pas ce qui se produit ou ne se produit pas.
Un coup de main ne serait pas de refus...

Merci pour Sarka-spip et bonne continuation.

Site web : Le site en question
Logo de opopop
Intégration de la galerie Lightbox JS v2.0
mercredi 15 novembre 2006 à 17h31 - par  opopop

Bonjour, j’ai essayé d’intégrer lightbox sur mon site spip1.9.1 avec votre méthode mais ça ne marche pas ! peut-être n’est-ce réservé qu’au squelette Sarka-Spip ?

Je cherche dèsepérement le fichier plugin.xml pour lightbox2. Ne l’auriez vous pas vu passer ?

Logo de sage7fou
Intégration de la galerie Lightbox JS v2.0
jeudi 2 novembre 2006 à 05h33 - par  sage7fou

Bonjour.

En prunch’ merci, j’osais pas espérer que cette contrib existe... (de plus tu l’as posté le jour de mon anniv !)

J’ai un problème de cet ordre là :

Erreur(s) dans le squelette
* Syntaxe boucle incorrecte, BOUCLE_images_article : double définition

Je suis sur SPIP 1.9.1 et Sarka-SPIP 1.9.0 [rev86]

Une idée ? Merci d’avance.

Logo de sage7fou
vendredi 3 novembre 2006 à 15h22 - par  sage7fou

J’oubliais...

Après quelques manips, je trouve que ceci était un peu stupide :

- Suggestion pour la 1.9.1 : Possible de désactiver au choix la galerie pour simplement afficher l’image dans l’article ?

Sorry !

@+

Logo de sage7fou
vendredi 3 novembre 2006 à 14h40 - par  sage7fou

Après avoir recommencé 5 fois l’install, purgé la BdD etc., j’ai fini par trouver la solution !

Et je n’imaginais pas que ça pouvait avoir cette cause là...

- Au lieu de remplacer le code de < !— Liens vers les images jointes — > de article.html, j’ai gardé l’ancien code, mais en commentaires (de php < !— code — >). Je n’imaginais pas que SPIP allait le prendre en compte...
Donc, j’ai effacé l’ancien code (en commentaires), et v’la t-y pas que ça marchoie !

Etrange, autant que bizarre...

En tout cas, encore merci et bravo pour ta contrib !

Cordialement.

Logo de sage7fou
jeudi 2 novembre 2006 à 15h20 - par  sage7fou

Ok ! super pour la 1.9.1.

ça se produit tout simplement dans la page article.html.
Aucune modif, j’ai juste fait un copié/collé du code plus haut, et tout ça sur une install propre et neuve de spip et sarka.
J’ai installé le plugin accés restreint par groupes, et c’est un article "caché". ça pourrait venir de là ?

- Suggestion pour la 1.9.1 : Possible de désactiver au choix la galerie pour simplement afficher l’image dans l’article ?

Merci pour ta promptitude.

Logo de sage7fou
jeudi 2 novembre 2006 à 09h40 - par  _Eric_

Salut,

La contrib galerie est en cours d’élaboration et fera partie de la version 1.9.1.
Sinon, pour ton problème peux tu m’en dire plus : dans quelle page cela se produit ? As tu fais une modification ...?

A+