Effet Lightbox html

zoulou86

Bonjour,

Je suis en train d'apprendre à utiliser Pluxml qui est le CMS que je cherchais depuis un moment. Simple, rapide, efficace et complet.

Toutefois, l'aspect blog n'est pas le plus intéressant pour mon site. Je suis donc en train d'élaborer un nouveau template dans lequel je souhaiterais que les liens s'ouvrent dans une lighbox (articles et pages statisques).

J'ai effectué quelques recherches sur le forum et dans la docu sans succès. Quelqu'un aurait-il développé quelque chose de semblable ou pourrait-il m'aider ?

Merci !!!

super_g2

Bonjour,

pourrais-tu développer un peu plus (dessin?) le style d'interface (si j'ai bien saisi, il s'agit plus d'interfce que de réelles fonctionnalités) que tu aimerais voir ?

merci

zoulou86

L'interface ressemble à ça. J'ai donc repris les titres des articles pour qu'ils s'affichent et j'aimerais que, au clic, le détail s'ouvre dans une lightbox pour dynamiser le site.

J'arrive sans problème à installer un script externe et à le configurer pour de liens html standard (<a></a>). Par contre, je ne sais pas comment appeler les liens des articles ('link')

<?php $plxShow->artTitle('link'); ?>

pour qu'ils se chargent directement par la lightbox ?!? C'est certainement tout bête... mais parfois ;-)

super_g2

il faut ajouter un rel="lightbox" c'est ça (aux liens de tout type) ?
si oui, il suffit dans ton template de changer la ligne qui génère la liste de pages par une ligne du type :

de : (si tu évoques par exemple la liste de pages statiques générée dans ton header.php)

<?php $plxShow->staticList('Accueil','<li class="#static_status_page_item page-item" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>',''); ?>

à :

<?php $plxShow->staticList('Accueil','<li class="#static_status_page_item page-item" id="#static_id"><a href="#static_url" title="#static_name" rel="lightbox">#static_name</a></li>',''); ?>

pour la liste d'article : (vu que tu l'as mise dans un menu latéral)
de :

<?php while($plxShow->plxMotor->plxRecord_arts->loop()): # On boucle sur les articles ?>
     <h2><?php $plxShow->artTitle('link'); ?></h2>

à : utiliser le code http://wiki.pluxml.org/index.php?page=Lister+les+articles+par+cat%C3%A9gories+dans+une+page+statique en mettant en forme la ligne

echo '<li>'.$art_date.': <a href="'.$plxShow->plxMotor->aConf['racine'].'?article'.$art_num.'/'.$art_url.'" rel="lightbox">'.$art_title.'</a></li>';

il faut bien sûr adapté le code de la page du wiki sus-mentionnée, pour la mise en forme de la liste des articles dans ta sidebar.


EDIT : je viens de saisir la difficulté, car tu auras une redondance aussi des header et footer et sidebar.php dans ta lightbox. Dans ce cas, pour éviter qu'ils ne se répètent aussi dans ta lightbox, il faut utiliser les template article-xxx.php, static-xxx.php comme c'est expliqué sur un des derniers articles du blog pluxml.
http://pluxml.org/article45/gestion-avancee-des-themes-dans-pluxml


EDIT 2 : pour modifier la forme des liens 'link', tu peux aussi modifier la fonction ArtTitle() présente dans la class.plx.show.php (core/lib/)
de :

/**
         * Méthode qui affiche le titre de l'article linké (variable $type='link') ou non
         *
         * @param       type    type d'affichage : link => sous forme de lien
         * @return      stdout
         * @scope       home,categorie,article
         * @author      Anthony GUéRIN, Florent MONTHEL, Stephane F
         **/
        public function artTitle($type='') {

                if($type == 'link') { # Type lien
                        $id = intval($this->plxMotor->plxRecord_arts->f('numero'));
                        $title = plxUtils::strCheck($this->plxMotor->plxRecord_arts->f('title'));
                        $url = $this->plxMotor->plxRecord_arts->f('url');
                        # On effectue l'affichage
                        echo '<a href="'.$this->plxMotor->urlRewrite('?article'.$id.'/'.$url).'" title="'.$title.'">'.$title.'</a>';
                } else { # Type normal
                        echo plxUtils::strCheck($this->plxMotor->plxRecord_arts->f('title'));
                }
        }

par :

/**
         * Méthode qui affiche le titre de l'article linké (variable $type='link') ou non
         *
         * @param       type    type d'affichage : link => sous forme de lien (avec lightbox, par JL, j'ai honte de mettre ca...)
         * @return      stdout
         * @scope       home,categorie,article
         * @author      Anthony GUéRIN, Florent MONTHEL, Stephane F - (modif Jérémy L)
         **/
        public function artTitle($type='') {

                if($type == 'link') { # Type lien
                        $id = intval($this->plxMotor->plxRecord_arts->f('numero'));
                        $title = plxUtils::strCheck($this->plxMotor->plxRecord_arts->f('title'));
                        $url = $this->plxMotor->plxRecord_arts->f('url');
                        # On effectue l'affichage
                        echo '<a href="'.$this->plxMotor->urlRewrite('?article'.$id.'/'.$url).'" title="'.$title.'">'.$title.'</a>';
                } elseif($type == 'linklight') { # Type lien lightbox
                        $id = intval($this->plxMotor->plxRecord_arts->f('numero'));
                        $title = plxUtils::strCheck($this->plxMotor->plxRecord_arts->f('title'));
                        $url = $this->plxMotor->plxRecord_arts->f('url');
                        # On effectue l'affichage
                        echo '<a href="'.$this->plxMotor->urlRewrite('?article'.$id.'/'.$url).'" title="'.$title.'" rel="lightbox">'.$title.'</a>';
                } else { # Type normal
                        echo plxUtils::strCheck($this->plxMotor->plxRecord_arts->f('title'));
                }
        }

et en mettant le code suivant dans ton menu :

<?php while($plxShow->plxMotor->plxRecord_arts->loop()): # On boucle sur les articles ?>
     <h2><?php $plxShow->artTitle('linklight'); ?></h2>

super_g2

je double post 'pour mes modif' et surtout pour dire que ma "solution" n'est pas forcément la plus propre, surtout la première en passant par le code de listing identique à celui du wiki.

par contre, la seconde possibilité est plus propre et correspond à mon avis parfaitement à tes attentes.

zoulou86

Arf merci pour ton dévouement ! Les différents essais ne sont pas très concluants pour le moment mais j'y travaille. Est-ce que ce script (ton EDIT 2) tient compte d'un lightbox particulier ? J'ai essayé de l'adapter à Fancybox et à ThickBox mais sans succès...

super_g2

ben, tu parles de lightbox, donc je t'ai mis ce que je sais de lightbox (ou lightbox2 de mémoire), c'est-à-dire qu'il s'active pour un lien (ou image) avec le rel="lightbox".

c'est étonnant que mon EDIT2 (^^) ne fonctionne pas.

tu as bien remplacer le mot link par linklight dans l'appel arttitle?
enjoy

zoulou86

Enjoy! En bidouillant un peu j'y suis arrivé. En tout cas pour les articles, je ne me suis pas encore attardé sur le reste.

J'ai finalement utilisé le script greybox que j'ai adapté à ton EDIT 2. Ca marche nickel !

Merci beaucoup !