zoombox et titre

kgb93
Javascript

Bonjour,

dans le cadre d'un projet, le titre de chaque image sera codifié à partir de 3 champs (Titre, Client, Date).
J'aimerais que dans la div .zoombox_title le texte apparaise de cette façon :
Titre
Client
Date

Ceci afin de styliser chacun des trois champs.
Or la zoombox se contente (on ne lui en demandait pas plus jusque là ^^) de mettre le texte de l'attribut Title.

Pourriez vous me mettre sur la voie (voire une solution plus élaborée) afin de pouvoir remplir cette div par mes 3 éléments que constituent le titre?

D'avance,
Merci

3 réponses

jaa09

Bonjour,

As tu essayer tout simplement de mettre un <br> ?

<img src="monimage.png" title="Titre<br>Client<br>Date"/>
Grafikart

Sur zoombox une telle fonction n'est pas prévue essaie de regarder sur les autres systèmes lightbox.

kgb93
Auteur

Tout d'abord, merci pour vos réponses.

@jaa09 : Ce qui me gène dans cette idée c'est de mettre des balises dans un attribut title. Je ne trouve pas cela très élégant surtout que "Titre", "Client" et "Date" auront des styles différents.

Je me suis donc plutot orienté vers une modification dans le code de zoombox.js

Grafikart, j'espère que cela ne te dérange pas que je touche directement au code javascript.

Je vous mets tout de même ici ce que j'envisage.

Dans la balise title, je mettrais un séparateur unique entre les 3 champs (un # par exemple)

<a href="photos/Accueil.jpg" title="test#client#date" class="zoombox zgallery1">

Dans zoombox.js, dans la fonction open() :

Avant : 

if(elem != null && elem.attr('title')){
            $('#zoombox .zoombox_title').append(elem.attr('title'));
            }

Après : 

if(elem != null && elem.attr('title')){
            var legende = elem.attr('title');
            var finalLegende = legende.split('#');
            var stylizedLegend = '<div class="titreLegende">'+finalLegende[0].toString()+'</div><div class="clientLegende">'+finalLegende[1].toString()+'</div><div class="dateLegende">'+finalLegende[2].toString()+'</div>';

            $('#zoombox .zoombox_title').append(stylizedLegend);
        }

Voilà, ca fonctionne bien pour le moment. Mon projet est en développement, donc je verrais plus tard s'il y a des coquilles. Vos conseils sont évidemment les bienvenus.