Galerie : Remplacer "BBCode de la Photo :" par "URL de la Photo:" dans les informations
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Galerie : Remplacer "BBCode de la Photo :" par "URL de la Photo:" dans les informations
Détails techniques
Version du forum : phpBB3Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://crysalis.frbb.net/
Description du problème
Bonjour,J'ai pas mal chercheé sur le net et ce forum avant de poster ici,
mais vu que je n'y connait absolument rien en code j'suis un peu perdu.
J'ai fait une galerie pour élargir un peu le nombre d'avatar disponible pour les menbres.
Je voudrai donc ajouter un champ avec l'url de la photo à la place du BBcode de la photo.
J'ai trouvé l'emplacement du code dans Template > Galerie > album_showpage_body :
- Code:
<form name="select_all1" action="#">
<dl>
<dt><label>{L_PIC_BBCODE} {L_PICTURE} :</label></dt>
<dd><input name="BBCode" class="inputbox" value="{PIC_BBCODE1}" type="text" readonly="readonly" onclick="javascript:this.form.BBCode.focus();this.form.BBCode.select();" /> <input type="button" name="btn_bb" value="{L_COPY}" class="button2" onclick="javascript:this.form.BBCode.focus();this.form.BBCode.select();copy_to_clip(this.form.BBCode.value);" /></dd>
</dl>
</form>
Je voudrai pouvoir afficher uniquement l'url de l'image dans un champ similaire.
Merci.
Rasa
_______
Résolu !
J'ai enfin fini par trouver une solution après de longues heures d'essais et d'erreurs.
Je vais donc poster ici ma solution pour ce problème au cas ou certain seraient intéressés.
J'ai commencé par chercher à remplacer value="{PIC_BBCODE1}" par un code qui me donnerai l'url
J'ai fini par trouvé une page sur github avec une liste des codes pour "album_showpage_body" :
Liens vers > github : album_showpage_body
Après quelques essais je suis tombé sur {U_PIC}, et parfait, ça marche, l'url de l'image s'affiche.
Les problèmes suivant étaient de trouver comment remplacer les scripts pour "SelectAll" et "CopyToClipboard".
J'ai donc commencé par chercher un script pour le "CopyToClipboard" et j'ai trouvé ma solution sur :
Liens vers > w3schools : howto_js_copy_clipboard
Pour le "SelectAll" du champ de texte dans lequel se trouve l'adresse de l'image j'ai trouvé ma solution ici :
Liens vers > javascript-array : onclick_select_all_text_in_field
A partir de là j'ai passé beaucoup de temps à essayer (bidouiller) différentes solutions pour intégrer tout ça.
Je vous donne donc ici le code final qui fonctionne (à priori) pour cette box url.
Dans </> Template > Galerie > album_showpage_body :
- Code:
<fieldset>
<input name="u" class="inputbox" value="{U_PIC}" type="text" readonly="readonly" id="txtfld" onClick="SelectAll('txtfld');" /><div class="tooltip">
<input type="button" name="copy_to_clip" value="{L_COPY}" class="button5" onClick="myFunction()" onmouseout="outFunc()" />
<span class="tooltiptext" id="myTooltip">Copier l'adresse</span></div>
</fieldset>
Pour les JavaScript je les ai également ajouter à album_showpage_body.
(je n'sais pas si j'ai fait proprement ou pas mais ça fonctionne très bien)
Pour le "SellectAll" :
- Code:
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
Pour le "CopyToClipboard" :
- Code:
function myFunction() {
var copyText = document.getElementById("txtfld");
copyText.select();
document.execCommand("Copy");
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Copié";
}
function outFunc() {
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Copier l'adresse";
}
Je vous donne également le CSS pour l'InputBox, le bouton Copier et le ToolTip :
- Code:
input#txtfld {
height: 16px;
width: 50%;
text-align: center;
border-radius: 10px;
border: 1px solid #ffffff;
background-color: #1b2224;
vertical-align: middle;
font-family: sans-serif;
}
.button5 {
margin-left: 15px;
width: 80px;
height: 24px;
vertical-align: middle;
border-radius: 10px;
border: 1px solid black;
font-family: sans-serif;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #fff;
color: #000;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
Voici le résultat final :
En espérant que certains d'entre vous trouverons ce post utile.
Merci et bonne journée.
Sujets similaires
» [Galerie] Être prévenu quand une photo est ajoutée dans la galerie
» modifier photo ou titre d'une photo dans galerie
» Informations Survol Photo .
» Remplacer un titre par une photo
» supprimer définitivement une photo de la corbeille dans la galerie
» modifier photo ou titre d'une photo dans galerie
» Informations Survol Photo .
» Remplacer un titre par une photo
» supprimer définitivement une photo de la corbeille dans la galerie
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum