[galerie d'image] intégration de lightbox 2 et d'autre fonction

Le6barbareLe6barbare Member
dans Entraide
Bonjour !

j'ai découvert pluxml il y'a peu, et j'essaie de réaliser un petit site pour un projet perso.
j'ai réussi a réaliser pas mal de mes envies, mais la création d'une galerie graphique me pose problème.
j'ai cherché dans le forum, et j'ai lu tout les sujet parlant de la question ( dont celui du wiki ), donc je devrait m'en sortir, sauf pour deux option :

l'intégration de Lightbox 2 pour afficher les images au lieu d'ouvrir une nouvelle page ( et regrouper les image dans le même set pour pouvoir passer de l'une a l'autre directement dans la lightbox )
( je pense aussi ajouter une fonction pour donner une legende aux image, mais il me semble avoir vu une technique au travers des pages du forum- celle avec le fichier texte )
le site de lightbox 2 : http://www.huddletogether.com/projects/lightbox2/

et j'aimerai aussi pouvoir afficher la dernière image mise en ligne dans la galerie sur la page d'accueil


ah, j'oubliais : je compte utiliser soit le script du wiki : http://wiki.pluxml.org/?page=Afficher%20toutes%20les%20images%20d%27un%20r%C3%A9pertoire
soit celui là : http://www.gourbeille.fr/?article8/une-galerie-photo-dans-pluxml

et j'ai pluxml 4.3.1

merci d'avance ^^

Réponses

  • lagraphistelagraphiste Member
    Tu peux aussi essayer clearbox, il permet de mettre des images mais aussi les page web, des flash, des vidéo...
    Mais pour faire ta galerie, si tu veux que ça fonctionne avec ce type de plugin, n'utilise pas l'outil du wiki car c'est une fonction automatique qui repertorie toute les images d'un dossier sans que tu puisse bisouner le lien comme tel. Il faut que tu suive la méthode de clearbox pour faire ta galerie.
  • HamtaroHamtaro Member
    Le mieux, à mes yeux, reste ShadowBox ;)

    http://www.shadowbox-js.com/
  • antistressantistress Member
    à noter que lightbox 2 est sous licence CC Attribution alors que Shadowbox.js est plus restrictif (l'utilisation commerciale est payante en gros on dirait)
  • antistressantistress Member
    janvier 2010 modifié
    ici des tests complets. clearbox est aussi cité (même genre de condition d'usage que Shadowbox)
    http://1loup.net/index.php/2008/05/08/1202-clearbox-et-shadowbox-en-remplacement-de-lightbox2
  • Le6barbareLe6barbare Member
    Merci de vos réponses ^^

    lagraphiste >> Ouaip, dans tout les cas, il faut que j'utilise la méthode de la box
    antistress >> pour moi, ce n'est pas si grave, je ne compte pas en faire une utilisation commerciale ^^
    et pour les tests, je les avait déjà trouvé en cherchant des infos sur Clearbox, il sont très intéressant ;)
    Hamtaro >> ouaip, en lisant les tests qu'antistress a linké, je suis arriver au même raisonnement !
    par contre, je galère a l'installer ><

    voilà mon code :
    dans header.php ( entre les balise <head> bien sur )
    <link rel="stylesheet" type="text/css" href="/pluxml/plugins/shadowbox/shadowbox.css">
<script type="text/javascript" src="/pluxml/plugins/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
    language:   "fr"
    });
</script>
    et dans ma page statique
    <a href="http://nsa08.casimages.com/img/2009/08/07/090807114004125710.png" rel="shadowbox[Screen]" title="Un marché, sur le port d'Akmor">My Image</a><br />
<a href="http://nsa10.casimages.com/img/2009/11/03/091103082532415955.png" rel="shadowbox[Screen]" title="Le port d'Akmor">My Image#2</a><br />
<a rel="shadowbox" href="http://farm2.static.flickr.com/1177/1150569783_61dbc56834.jpg" class="option">Single Image (Flickr)</a><br />
<a href="http://nsa08.casimages.com/img/2009/08/07/090807114004125710.png" rel="shadowbox" class="option">Test#2</a><br /><br />
<a href="http://nsa10.casimages.com/img/2009/11/03/091103082532415955.png" rel="shadowbox"><img src="http://nsa10.casimages.com/img/2009/11/03/091103082532415955.png" alt="Test#1"></a>
    l'adresse de la page, pour tester : http://rpgmakercdr.olympe-network.com/pluxml/?static1/

    comme vous le remarquer, ça ne marche pas :/
    et je ne voit pas pourquoi -_-'
    j'ai essayer de placer les lignes d'appel de shadowbox directement dans le code source de la page statique, mais ça n'a rien changé.
  • HamtaroHamtaro Member
    Enleve Pluxml du chemin, c'est en double je crois. ;)
    <link rel="stylesheet" type="text/css" href="./plugins/shadowbox/shadowbox.css">
<script type="text/javascript" src="./plugins/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
    language:   "fr"
    });
</script>
  • GzygGzyg Member
    J'ai utilisé thickbox (jquery inside) sur pluxml et j'ai détaillé l'installation ici :

    http://leloupetlechien.rocks-ho.fr/pluxml/?article15/thickbox

    Par contre je ne l'utilise pas comme galerie mais il le fait très bien.

    Le site de thickbox est très clair (mais en anglais) : http://jquery.com/demo/thickbox/


    à plus,

    Gzyg
  • ZugmyZugmy Member
    Le plus simple, c'est d'utiliser picasa, de mon coté, cela fonctionne très bien, fait une recherche sur google : pwi (picasa web intégrator).
    Un aperçu sur mon site (en cours de construction)
    waigunga.clanfree.net
  • Le6barbareLe6barbare Member
    Merci a vous trois !

    @Hamtaro : déjà essayé, ça change rien.
    @Gzyg sympa ! je vais tester ;)
    @Zugmy : ouaip, c'est sur, mais ça me semble long a afficher, alors que je peut surement créer un petit script en php/html pour me faire les code a copier coller dans ma galerie pour afficher les images ^^
  • fthanronfthanron Member
    Bonjour,
    Je suis confronté à la même difficulté que Le6barbare.
    Le script est ecrit dans header.php, les rel ajoutés mais rien ne se passe.
    Est ce qu'il y a une ame généreuse pour un tuto à destination des débutants ?
    @++

    PS: pour thickbox, la fonction de visualisation de page web externe est loin de valoir ce que j'ai vu avec Shadowbox. Est ce lié au parametrage ou le script est plus limité ?
  • GzygGzyg Member
    fthanron, tu utilises quelle box ? shadowbox ?

    de plus qu'utilisez-vous comme librairie js ? jquery, motools, prototype ?
    apparemment shadowbox a besoin de le savoir.

    thickbox est le moins lourd de tous les "lightbox-like" donc forcément, il doit manquer quelques petites choses... :)


    à plus,

    Gzyg
  • StéphaneStéphane Member, Former PluXml Project Manager
    De mon coté j'ai essayé lightbox2. J'ai pas réussi à le faire fonctionner.
    Je vais regardé vers un autre "lightbox-like"

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • fthanronfthanron Member
    Bonjour Gzyg,

    Dans les descriptions de l'installation de la box 'shadowbox', il n'est pas spécifié qu'il est necessaire d'installer jquery ou autre, aussi ... je n'ai pas installé. Un probleme majeur peut etre ?

    A bientot
  • GzygGzyg Member
    Bon je viens de l'installer, ça marche très bien... :)

    Méthode (en 10 étapes) :

    1) télécharge shadowbox ;
    2) crée un dossier js à la racine de pluxml (au même niveau que data, core et themes) ; le dossier peut s'appeler comme tu veux, c'est juste que ça fait des lignes moins longues à taper... ;) ;
    3) décompresses-y l'archive et renomme-la sb (même raison) ;
    4) ouvre le fichier header.php et colles-y ces lignes, juste au-dessus de la balise </head> : 
    <link rel="stylesheet" type="text/css" href="js/sb/shadowbox.css">
<script type="text/javascript" src="js/sb/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
    tu as bien noté ce qui est indiqué pour href et src ? si tu as appelé tes dossiers autrement, remplace js/sb par les noms que tu leur as donnés ;
    6) ouvre le panneau d'administration, écris un article et illustre-le d'une zolie image à l'aide du sélecteur image de la toolbar ;
    7) tu obtiens une ligne de la forme (si tu as choisi d'insérer la miniature) : 
    <img src="data/img/zolie_image.jpg.tb   alt="" />
    8) entoure cette ligne comme ceci : 
    <a href="data/img/zolie_image.jpg" rel="shadowbox"><img src="data/img/zolie_image.jpg.tb   alt="" /></a>
    9) enregistre ;
    10) enjoy !

    enfin, j'espère ! :)


    à plus,

    Gzyg
  • fthanronfthanron Member
    janvier 2010 modifié
    "Tu ne te prosterneras point..." :) Gzyg MERCI !!!!

    Pour ceux, débutants comme moi, que l'info interesse, pour afficher une page externe, il est necessaire de charger l'option "iframe" dans l'entete de header.php. Dans l'exemple ci dessous, fr pour Français et iframe ... pour iframe.

    Shadowbox.init({
    language: "fr",
    players: ["iframe"]
    });

    Encore merci Gzyg !
  • fthanronfthanron Member
    Annexe : je viens de tester plusieurs liens de sites et certains "s'echappent" de la box. La box s'ouvre, puis quelques secondes s'écoulent et le site passe en "plein ecran" comme lors d'un accès direct au site. Qu'en disent les spécialistes ?

    @+
  • GzygGzyg Member
    Avec ce code :
    Shadowbox.init({
    language:   'fr',
    players:    ['iframe']
});
    et un lien de la forme :
    <a rel="shadowbox;height=500;width=650" href="http://pluxml.org" >Aliquam erat volutpat</a>
    ça semble fonctionner...

    un exemple de site qui ne va pas ?


    à plus,

    Gzyg
  • fthanronfthanron Member
    Merci pour le suivi Gzyg

    Voici un lien http://www.examiner.com/x-2593-Modern-Love-Examiner~y2010m1d26-Tantra-Tuesday-The-fourletter-word-ending-in-K

    @+
  • GzygGzyg Member
    Ça fonctionne très bien pour moi...

    Tu as bien rentré les paramètres comme indiqué en faisant bien attention aux guillemets et aux points-virgules, notamment dans la syntaxe du lien... ?


    à plus,

    Gzyg
  • fthanronfthanron Member
    janvier 2010 modifié
    Bonjour Gzyg,

    Voici le "code" inséré dans le corps d'un article <a rel="shadowbox;height=500;width=650" href="http://www.examiner.com/x-2593-Modern-Love-Examiner~y2010m1d26-Tantra-Tuesday-The-fourletter-word-ending-in-K"; >TEST</a>

    Bizarrement, ça fonctionne sous Opera, pas sous FF 3.6 ni IE 8

    @+
  • GzygGzyg Member
    J'utilise Firefox 3.6 et je n'ai pas ce problème (pas de Ie sous la main pour tester).

    Peut-être une extension de firefox qui entre en conflit ?


    à plus,

    oh!rocks
  • fthanronfthanron Member
    Je viens de tester avec Safari 4.0.4 et la réaction est identique.

    Ce serait une extension Firefox qui agit sur IE et Safari ?

    @+
  • joebartjoebart Member
    Bonjour et merci pour l'astuce ! L'idéal serait de créer un bbcode pour éviter de saisir manuellement la partie :

    <a href="data/images/image.jpg" rel="shadowbox"> :)
Connectez-vous ou Inscrivez-vous pour répondre.