Aujourd’hui je vous présente une de mes créations, je l’ai nommée LinkinTips.
Grâce à ce plugin jQuery personnalisable vous serez en mesure de fournir à vos visiteurs des infobulles sexy et adaptées à votre charte graphique !
Le petit plus c’est qu’il vous sera même possible, grâce à une syntaxe que vous choisirez, d’ajouter un hyperlien à l’intérieur de vos infobulles. Très pratique pour les informations annexes d’une image par exemple.
Comme il s’agit de mon premier plugin, il est fort probable que certaines évidences m’aient échappées et que vous le remarquiez, surtout si vous êtes connaisseurs ou si vous avez tout simplement un peu plus dormi que moi ces derniers temps 😉
Surtout si vous avez des commentaires ou critiques à apporter n’hésitez surtout pas, cela me sera utile autant qu’à vous.
Enjoy !
Partager la publication "Améliorez vos infobulles tout en les rendant sexy"
Excellent plugin! Merci 🙂
Merci pour ce commentaire Chris, bonne continuation à toi 😉
Bonjour !
Je me demandais si vous accepteriez de m’expliquer comment puis-je adapter ceci à forumactif. En effet je sais parfaitement héberger le script en passant par une page HTML de forum seulement pour la suite, la mise en place dans un template (lequel d’ailleurs) et la marche à suivre pour insérer les info bulle dans mon message d’accueil, j’en suis tout simplement incapable.
Merci d’avance !
Bonjour,
Logiquement le principe est le même que pour l’intégration du plugin SlideBox que tu as réussi à mettre en place.
Sur Forum-Actif l’appel à la bibliothèque est automatique. Tu peux donc zapper la première étape de l’installation.
La deuxième étape consiste à appeler le script du plugin, ça tu as dû le d’après ce que je comprends.
Enfin il faut définir sur quoi sera appliquée la fonction des infobulles :
Ici le code proposé activera les infobulles sur tous les éléments qui possèdent la classe juiztips.
Exemple :
Il faut que l’élément soit porteur de la classe, et porteur d’un
title, puisque le plugin récupère le contenu du title.Bon courage 😉
Bonjour !
Décidément, je vais passer pour un gros boulet !
J’ai placé donc ceci :
$(document).ready(function() {
$(« img[info-bulle] »).juizTips();
});
Dans mon template « index_body » après la balise /head puisqu’il s’agit du template d’accueil. Cependant, j’ai dû me planter car rien ne se passe dans le sens ou au survol de mes essaies, je n’ai pas d’info-bulle. Je n’ai pas tenté de personnalisé puisque le visuel de présentation me convenait parfaitement donc j’ai dû me planter dans l’installation elle-même.
Comme pour le précédent tutoriel, j’ai hébergé le plugin sur une page HTML du forum pour l’appel.
Pour la mise en place HTML j’ai fait ceci en essaie :
<a href="" title="Le contenu de l’infobulle"></a>
Est-ce que tu vois l’endroit ou je me suis loupé ? (je m’améliore semble-t-il, je tutoie 😉 )
Merci une nouvelle fois de m’accorder un peu de temps 😉
Hello,
Pas de souci, il faut bien commencer quelque part :p
Ton lien doit posséder une classe ici, c’est le plus facile :
<a href="#" title="contenu de l'infobulle" class="tips">Lien</a>Ensuite ton code JS doit cibler ces éléments porteurs de cette classe.
$(document).ready(function(){$(".tips").juizTips();
});
Dans le code JS, ce qui se trouve entre guillemets est le sélecteur (qui ressemble à un sélecteur CSS). C’est là dessus que le script va s’exécuter.
Bonne continuation 😉
Bonjour, j’ai énormément de mal à comprendre comment l’appliquer sur notepad ++. Je suis entrain de faire une page d’accueil pour forumactif et j’ai apparemment placé tous les codes aux endroits indiqués mais ça ne marche pas… J’ai téléchargé le fichier de la page mais je ne sais pas quoi faire des fameux fichiers qu’il contient, je sèche totalement.
Bonne journée !
Hello Zalou,
Les fichiers du dossier doivent normalement se retrouver sur un serveur.
Le problème de Forum-actif c’est que tu dois placer directement dans le template header le contenu du fichier Javascript du meme nom que le plugin.
Forum-Actif charge déjà jQuery, tu n’aurais donc pas à le charger.
Il te reste donc les CSS à placer dans ta feuille de styles FA en copiant et collant sans contenu dans le champ prévu dans l’interface d’administration.
J’espère que ces quelques explications te suffiront 🙂
Bonne continuation.
Bonjour,
Je reviens vers vous suite à un souci sur l’environnement forumactif.
Comme certains de mes collègues plus haut, je tente d’intégrer ces infobulles à travers un onglet en accordéon.
Le test sous Notepad ++ est concluant. Mon code m’apparait comme il se doit mais ce n’est qu’au moment de le passer sur la Page d’accueil de forumactif que cela merdouille un peu ^^.
Pour les tests j’en ai effectué un bon paquet.
Ayant téléchargé le plugin, j’ai donc zieuté un peu tout l’intérieur et constate deux choses qui me chagrinent :
Dans le « index.html » tu fais appel à une id « images » et à une fonction « center » que l’on ne retrouve nulle part ailleurs
D’où ma première question, à quoi ces deux id/class servent-elles au final ?
Maintenant attaquons la partie la plus compliqué pour moi 😛
Les deux fichiers .js fourni dans le script sont (je suppose) maintenant adaptables avec les forumactifs dans le PA => Gestion des codes javascript.
J’ai donc les deux fichiers .js sous une forme :
h t t p : / / x x x x / y y y y y / z z z z . j s
Est-ce que je dois placer ces deux codes obligatoirement dans un template ou puis-je me contenter de les placer entre deux balises script sur la page d’accueil ?
Ensuite il y a autre chose qui me perd un peu :
Sur la fonction d’appel : $(document).ready(function() {
$(« img[title] »).juizLinkinTips();
});
Je suppose que « img[title] » est la class appelée pour lancer l’infobulle or « img » me semble être une classe générique à forumactif pour définir l’ensemble des images d’un forum. ( Car toutes mes images de mon forum de test prennent le CSS en compte :O )
J’ai donc tenté de passer à travers une autre class de la manière suivante :
$(document).ready(function(){
$(« .infobulle »).juizTips();
});
Mais à ce moment précis, je ne vois pas quelle class je dois renommer pour placer ma class « infobulle » dans le CSS.
Est-ce la class .juizTips ? .juisTipsWrapper ?
Dois-je modifier le .js afin de le faire correspondre ?
Je suis un peu paumé avec tous ces noms de class qui se ressemblent fortement ^^ »
Concrètement je pense avoir compris que les deux fichiers .js ne sont pas à toucher au final.
C’est juste sur la partie CSS et HMTL que je rame car j’arrive pas à comprendre la partie à modifier afin d’afficher les infobulles…
Désolé pour la longueur du post, en espèrant que vous puissiez répondre à mes interrogations.
Cordialement,
Oyo
Bonsoir Oyo,
Merci pour ton intérêt envers ce plugin.
Effectivement les ID et classes
centeretimagessont l’héritage d’une ancienne version de la page de présentation. Ils n’avaient aucune autre utilité que celle de présentation à l’époque, et ne servent aujourd’hui à rien.Pour le reste, j’ai moi-même tenté il y a peu de temps de placer un code JavaScript basique sur une forum que je gère chez Forum Actif, cependant la prise en charge du fichier n’est pas automatique. Il faut rajouter l’appel au fichier sur un des templates modifiable.
Tu peux également te contenter de placer entre balises
scriptle contenu du fichier JS du plugin. En effet, Forum-Actif utilise déjà par défaut jQuery, tu n’as donc pas besoin de le charger une nouvelle fois.img[title]est en fait un sélecteur qui permet de cibler automatiquement toutes les images possédant un attributtitle.Il est également possible de cibler des choses plus précises, comme par exemple les éléments porteur d’une classe que tu auras choisi, dans ce cas on aura
.nom_de_classeen lieu et place deimg[title].Inutile ici de remplacer les classes du plugin, tu peux cependant remplacer les styles de la feuille de styles fournie si tu le souhaites.
J’espère avoir répondu à tes questions.
Bon week-end 😉
Bonjour!
Voila j’ai eu un coup de cœur pour votre système d’infobulle des plus original mais je rencontre quelques probleme pour les appliqué sur ma page d’accueil forum actif, ayant pourtant lu les messages precedent =/.
Je vous explique ce que j’ai appliqué.
J’ai hebergé le fichier juizLinkinTips.min.js sur un hebergeur et je l’ai mis entre balise script dans mon HTML de page d’accueil.
J’ai ensuite placé juste en dessous de ce dernier
$(document).ready(function(){
$(« .juiztips »).juizTips();
});
entre balise script aussi toujours dans mon HTML de Page d’accueil.
Enfin, j’ai bien mis votre CSS dans ma feuille de style.
Et pour l’application sur ma page d’accueil, je l’ai codé de cette façon pour appliquer l’infobulle à mon image.
texte dans info
Sauriez-vous ou j’ai pu faire une erreur?
Merci d’avance!
Cordialement.
Bonsoir et merci pour ton commentaire.
Il faut bien vérifier que les éléments sur lesquels tu veux ajouter une infobulle portent les classes .juiztips.
Ex :
J’ai déjà eu des soucis avec Forum-Actif pour l’insertion de JS. L’interface a tendance à ne pas trop aimer le JS insérer sauvagement dans les champs dispo dans l’administration des forums.
Le meilleur moyen de tester c’est d’écrire ceci :
une ligne au dessus de
$(document).. Enregistre et va sur l’accueil de ton forum. Si tu as une popup qui s’ouvre avec ton mot « Test » dedans, c’est que JS fonctionne et que mon script devrait aussi fonctionner. Autrement c’est que F-A a filtré tes scripts.Bon courage.
PS : désolé pour les titres pourris sur le HTML :p
PS2 : l’appel à la fonction se fait avec
juizLinkinTips()et nonjuizTips(), peut-être ça aussi ? (tout dépend de la version du script que tu as)Desolé pour le temps de reponse j’ai essayé de bidouiller comme je pouvais ^^ ».
Après plusieurs essaie qui n’etait toujours pas concluant, j’ai finalement crée une page HTML que j’insere par iframe, ça me permet de les voir sinon non j’ai pas trouvé /boulet/
J’aurais juste une derniere question avec une insertion de ce type :
Comment je peux modifier l’apparence du texte qui apparaitra dans l’infobulle? Et est ce possible d’inclure une autre image à l’interieur?
Merci beaucoup pour votre aide précieuse. 🙂
Hello,
Forum-actif est assez embêtant avec le JavaScript, mais c’est une question de sécurité.
Pour styler différemment les infobulles ou leur texte il faut utiliser le CSS, notamment grâce aux classes
.juizTipsWrapperet.juizTipsqui sont respectivement le conteneur qui englobe l’élément porteur dutitleet l’infobulle.Exemple :
Pour l’image ça n’est pas possible autrement que par CSS, ce qui peut être un peu gênant si tu veux y mettre des avatars par exemple. À la base ce plugin n’est pas fait pour ça mais bien pour un contenu textuel avec éventuellement un lien.
Bon courage 😉
Bonjour,
Merci pour cette infobulle que j’ai installée. Mon problème est que j’ai une page pleine en écriture et dedans quelques images à droite ou à gauche noyées dans les écritures. Si j’installe linkin tips, cela marche bien mais les images se mettent à gauche et l’écriture commence en dessous au lieu d’être en continu dans la hauteur de l’image.
Pouvez-vous me m’expliquer le code à faire!
Merci d’avance.
Bonjour Michel.
Si votre image était initialement flottante (
float:left;), il est possible que le plugin viennent perturber le flux.Dans ce cas il convient de rétablir les flottements directement sur le conteneur de l’infobulle avec ce code CSS.
.juizTips { float:left; }Bonne continuation.
Merci,
j’arrive a affiché l’image de droite ou de gauche mais avec un espace horizontale très grand et il n’y a pas l’écriture de la page sur toute la hauteur de l’image.
Voici le code insertion d’image.
<img src="../imag-gif/m.forge.gif" border=0 width=132 height=132 align="right" hspace=0 vspace=10 alt="Ancienne forge" title="ancienne forgepropriété de la commune, avec de nombreux outils relatifs au métier de maréchal ferrand »>
merci
Merci pour ce code, mais je vais avoir du mal à fournir plus d’aide sans le contexte dans lequel il apparait. Plusieurs choses peuvent entrer en conflit.
Bonjour,
Impecable pour le texte et images incorporées, mais j’ai un souci toutes mes images s’affichent soit à droite ou tous à gauche. Comment résoudre se problème!
J’ai refait un linkintips.css avec float:right mais comment l’appeler sur certaine image!
D’avance merci pour la rapidité.
Bonjour,
Comme je disais juste avant difficile de vous aider sans voir le contexte de mes propres yeux.
Inutile de refaire un fichier CSS, le fichier du plugin peut très bien être complété de quelques lignes de code.
Pour l’application du CSS tout dépend du contexte comme je l’ai dit.
Bonjour,
Je reviens et vous communique l’emplacement de la page avec tout les fichiers css et js
http://www.sitebm.com/lutzelhouse/info-bulle/lutzelhouse1.html
Les trois images sont à droite, alors que dans le code une est à l’opposée.
Est-ce que l’on peu adapter ce code pour afficher la bulle sur un mot !
Merci pour votre aide précieuse
Bonjour,
félicitations pour le plug-in c’est très sympa. J’ai réalisé à l’installer mais je voudrais savoir s’il est possible de placer une balise dans le title avec une class colorbox pour ouvrir le lien dans une lightbox ?
Merci pour votre aide
Bonsoir Daniel,
Merci bien 🙂
As-tu déjà réussi a créer un lien vers l’image ou la page à placer dans la colorbox ?
Mon plugin ne prévoit pas de pouvoir ajouter une classe au lien, par contre tu peux cibler ce que tu veux avec jQuery et l’appliquer à Colorbox, il me semble.
J’espère que je ne te dis pas trop de bêtise, je ne connais pas toute la syntaxe de Colorbox.
Bonne soirée.
Tout d’abord merci pour la réponse rapide malgré l’heure tardive !!
Je n’ai pas encore réussi à insérer un lien vers une ancre précise ou une autre page (mis à part avec http://…..
Tout se passe dans le title de ton image.
Mon script prévoit de détecter une portion de texte pour transformer ce qui suit en lien.
Du coup en initialisant JuizTips ainsi :
ça devrait te créer une infobulle avec un lien vers l’URL du title.
Tu peux diriger vers une page web ou une ressource image, c’est la même chose.
Ensuite en branchant colorbox comme dit précédemment ça devrait fonctionner.
Merci Geoffrey,
j’avais compris le fonctionnement.
Je te laisse voir à l’adresse suivante le résultat pour l’instant
http://www.lineacuisine.fr/cuisine_moderne.php
comme j’utilise jqzoom, le lien n’est accessible qu’ne faisant un clic droit, je vais essayer de faire ce que tu as dit.
Merci encore
Effectivement il semble y avoir un conflit.
L’ergonomie de cette partie de ton site serait à revoir, il y a trop d’informations discrètes selon moi. Peut-être passer par quelque chose de plus concret comme une légende aux image avec un lien réelle et géré par tes soins, au lieu de le faire construire dynamiquement par mon plugin.
À réfléchir 😉
Bonne continuation.
Tu as raison, merci beaucoup en tous cas et félicitations pour le travail accompli. Je vais me resservir de ce plug-in c’est certain.
a+
Merci 🙂
Au plaisir.
C’est exactement ce que je recherche mais impossible de télécharger le plugin; Le lien n’est pas bon apparement. Est-il possible de me l’envoyer ?
Merci
Hello,
C’est une erreur PHP qui provoquait le problème. Normalement ça devrait fonctionner à nouveau.
Merci 🙂
Bonjour,
je vois ici pas mal d’administrateurs des forums Forumactif qui ont essayé d’utiliser ce code, ça fait plaisir.
Ce petit commentaire juste pour vous remercier, j’ai réussi à utiliser cet astuce sur mon forum chez Forumactif, c’est pas mal du tout.
Bonjour Geoffrey,
Merci pour cette superbe infobulle.
Je rencontre cependant un soucis. J’utilise l’infobulle sur des petits points d’interrogation en image et pour les ? se situant en bord droit de la fenêtre, l’infobulle apparait sur la droite … et sort donc de l’écran.
N’étant pas expert, je ne sais comment corriger cela. Par exemple, tester que dans les conditions ou l’infobulle sortirait du navigateur, alors il faut l’afficher à gauche et non à droite. (à mon avis il y a peut-être la même problématique avec haut/bas)
Merci de votre aide.
Bonjour Michaël,
Hélas ce plugin date de bien trop longtemps pour vous proposer du support.
Mais je vous invite à regarder du côté de qTip2 : http://qtip2.com/demos#styling
Bonne continuation.
Bonjour
J’ai découvert hier ce plugin superbe. La seule adaptation qui me manque serait de pouvoir centrer l’infobulle sur la page.
Sur ma page (http://ecole2chenes.free.fr), j’ai 6 onglets au-dessus desquels ce serait parfait de les voir apparaitre mais ça finit par sortir de la page à droite.
Ce réglage est-il possible ?
Merci.
Bonjour !
Juste un petit message pour vous remercier, certes mais également signifier que le lien ne mène plus nulle part 🙂
Bonne journée !
Hello,
Merci pour l’information. Avec la récente migration j’ai oublié de vérifier l’intégrité de ce site. C’est corrigé.
Il a mal vieilli, il va falloir que je refonde tout cela :p
Bonjour,
Visiblement les sujets date tout comme le plugin. Mais le trouvent intéressent et plutôt agréable niveau design des info-bulles, je me dis que tout est encore possible.
je viens voir si il y a toujours un petit support.
puis dans un premier temps, j’aimerais savoir si il est possible de l’installer sur un forum tel que xooit… ?
Ayant accès au template, j’imagine que oui, mais un petit décodage des explications serait un plus a toute fin utile.
dans l’attente (j’espère)
merci par avance.
cdt
Hello,
Non désolé je ne peux pas proposer de support pour xooit mais je suis persuadé que ça pourrait fonctionner. Je sais que par le passé il était possible de passer ce script sur du forumactif.
Courage 🙂
Hello !
Déjà un grand merci d’avoir répondu !
Je ne demande pas un support, juste une aide des installes.
Je reste également persuadé que cela reste possible pour l’avoir eu déjà installé y a plus de 10 ans.
Je sais que jQuery est comme sur forum actif déjà en place, donc idem que ce que déjà dit, inutile de d’installer la bibli.
Mon problème réside sur le reste donc.
j’ai deux fichiers css de télécharger :
juizLinkinTips.css et styles.css
Je sais qu’ils vont dans le template css du forum, mais y a t’il un endroit et un ordre (l’un avant l’autre etc) spécifique … ?
J’ai ensuite le fichier js :
juizLinkinTips.min.js
qui lui va avant le
Et pour finir la fonction :
$(document).ready(function() {
$(« img[title] »).juizLinkinTips();
});
qui lui va avant le aussi.
Puis que sur mes liens ceux si doivent se présenter de la sorte :
`
Je me trompe ou, j’ai peut-être mal compris quelques choses…Car après une multitude d’essais rien ne fonctionne.
[code][/code]