Infobulles améliorées et sexy

Hello,

J'ai conçu un plugin il n'y a pas longtemps entièrement compatible avec forum-actif.
Vous pouvez le tester ici même :
http://jq.creativejuiz.fr/plugins-jquery/linkin-tips.php

Pour plus de renseignement ou une aide si vous bloquez dans son utilisation, n'hésitez pas à suivre les instructions de la page ou à demander directement ici. (n'oubliez pas aussi de visiter le lien menant vers le blog, il se pourrait que quelqu'un ait déjà posé votre question)

Si vous rencontrez des soucis dans l'intégration du plugin à un forum de chez Forum Actif, rendez-vous ici :
http://forum.forumactif.com/t327339-un-tutoriel-un-peu-trop-complique-pour-moi

Bisous !

Oh !! C'est si gentil de ta part
Je crois que je vais l'utiliser pour mon forum :rerte:
Merci encore :o

J'ai juste une question, qu'est-ce que "L'api Google" ?

Sympa, vais peut-être le mettre tiens =)
Merci =D

Hello,

Merci pour les retours ^^

L'api Google est un système permettant au développeur ou au webmaster de passer par les serveurs Google pour charger le fichier jQuery, cela permet d'éviter de passer par un serveur personnel ou de l'héberger sur un serveur privé.

En gros Google ici met à disposition son serveur pour héberger la bibliothèque jQuery dont vous aurez besoin pour faire fonctionner le plugin.

J'espère que mon explication est claire.
au plaisir

Super ce 'petit' plugin o.o Merci beaucoup !

trow chouette (comment ça pas constructif ce message? :p bah vi mais rien à dire de plus^^")

Merci les louloups !

N'hésitez pas à m'en faire part si vous bloquez dans l'utilisation ou la personnalisation de ce plugin.

Bises

Bonjour Riku, je vais faire ma bécasse mais, que doit on faire du fichier jquery ?

Hello,

si tu parles de la bibliothèque il suffit de placer ce code entre les balises HEAD du template overall_header_new sur un forum-actif, ou sur le template correspond au footer, juste avant la balise de fin BODY. C'est au choix du webmaster

Si tu parles du fichier du plugins, il vous suffit de rajouter une ligne de script juste en dessous de la ligne bibliothèque, remplacez simplement le chemin par celui du fichier en ligne :

Code:

<script type="text/javascript" src="http://www.creativejuiz.fr/juiz/plugins/juiz-linkin-tips/scripts/jquery-juizLT.min.js"></script>

Je déconseille généralement cette utilisation qu'on appelle "hotlink" (prendre le lien direct d'un autre serveur), donc dans l'idéal si vous ne pouvez pas héberger vous-même votre fichier javascript, essayez cet hébergeur gratuit :
http://www.toofiles.com/fr/documents-upload.html


Au plaisir

Bonjour,
J'ai placé le lien dans overall_header_new mais après je comprend pas ce que je dois faire :S
Merci d'avance

Cool super merci (je vais le faire mais sa ma l'air pas simple de le faire) si quelqu'un la fait je peux avoir un rendu Svp?

Pardon, je n'avais pas vu vos messages.

Il va me falloir plus d'explications sur les endroits où tu bloques, car logiquement tout est expliqué sur le site. Mais j'ai peut-être oublié des points de précision.

Merci

Bonjour ! C'est un excellent rendu visuel, cependant, je ne comprends pas comment l'adapter sur forumactif (où placer les scripts tout ça :$) je suis un peu boulet, désolé...

Inaccessible malheureusement.

Riku à refait son site donc l'adresse n'est peut-être pas la même mais elle existe toujours ici: Ici ^^

Obligado Sui'

Obligado

?_? (no flood =D)

je ne peux acceder au site, c'est normal ?

Hello,

Ce n'était pas normal, mais ça doit être corrigé maintenant.

Merci

Je n'arrive virament pas à comprendre comment ça fonctionne ^^ Que dois-je faire après avoir télécharger le jquery? Et elle est ou la feuille de style ? OwO

Hello,

Tout est expliqué sur la page du plugin, si tu bloques sur un point précis merci de préciser ta question :)

Concernant la feuille CSS, tu la trouveras dans ton panneau d'administration à la page :
Affichage > Onglet "Images & Couleurs > Couleurs > Onglet "Feuille de style CSS".

Bon courage,
Riku

Tu peux regarder le code please ? =/ J'ai héberger les dossier & tout & tout mais ça ne semble pas fonctionner. Je n'ai jamais utilisé de Jquery ê__o

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<html>

  <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<style type="text/css">

body {
   padding: 0;
   margin: 0 auto;
   width: 700px;
   font-size: 0.625em;
   background: url(http://www.toofiles.com/fr/oip/images/png/bg_main.html);
   color: #515742;
   text-align: center;
   text-shadow: 1px 1px 0 #fff;
   font-size: 1.1em;
}
h1 {
   margin: 1.5em 0;
   font-size: 3em;
}
p span {
   text-align: left;
}

img {
   display: inline-block;
   padding: 10px 10px 20px 10px;
   margin: 0 10px;
   background: #fff;
   -moz-box-shadow: 2px 2px 5px #aaa;
   -webkit-box-shadow: 2px 2px 5px #aaa;
   box-shadow: 2px 2px 5px #aaa;
}
.back a {
   display: block;
   background: #4D9EB4;
   width: 185px;
   margin: 45px auto 20px auto;
   padding: 5px;
   color: white;
   font-weight: bold;
   text-decoration :none;
   text-shadow: -1px -1px 0 #328197;
   clear: both;
   -webkit-border-radius: 20px 0 20px 20px;
   -moz-border-radius: 20px 0 20px 20px;
   border-radius: 20px 0 20px 20px;
}
.back a:hover,.back a:focus {
   text-decoration: underline;
}

.juizTips {
   position: absolute;
   top: 0;   left: 0;
   display: none;
   width: 150px;
   padding: 7px;
   border: 3px solid #AAA;
   font-size: 0.9em;
   line-height: 1.2em;
   color: #555;
   background: #f2f2f2;
   overflow: hidden;
   z-index: 500;
   
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   border-radius: 8px;
   
   -moz-box-shadow: 2px 2px 9px #999;
   -webkit-box-shadow: 2px 2px 9px #999;
   box-shadow: 2px 2px 9px #999;
   word-wrap: break-word;
}

.juizTipsWrapper {
   position: relative;
   display: inline-block;
   cursor: help;
}
</style>

  </head>


  <body>

<h1>Juiz LinkinTips</h1>      


      <p id="images" class="center">
         <img src="http://www.toofiles.com/fr/oip/images/jpg/kiwi-confit.html" alt="The Weepers Circus" title="The Weepers Circus in live !" width="150" height="113" />
         <img src="http://www.toofiles.com/fr/oip/images/jpg/super-rabbit.html" alt="A super Rabbit" title="The smiling piece of chocolate, go to the page http://chocolat.net/ in order to learn more about chocolate" width="150" height="113" />
         <img src="http://www.toofiles.com/fr/oip/images/jpg/weeps.html" alt="A good breakfast" title="A kiwi banana jam aprouved by Alsacréations, go to the page http://alsacreations.fr in order to learn more information about exotism" width="150" height="113" />
      </p>      
      
      <p class="back"><a href="http://www.creativejuiz.fr/plugins/plugins-jquery/linkin-tips.php" title="Return to the plugin homepage">The plugin homepage</a></p>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>


<script type="text/javascript" src="http://www.toofiles.com/fr/oip/documents/js/jquery-142min.html"></script>

<script type="text/javascript" src="http://www.toofiles.com/fr/oip/documents/js/juizlinkintipsmin.html"></script>

<script type="text/javascript">
        $(document).ready(function() {
                $("img[title]").juizTips();
        });
</script>
   </body>
</html>


Désolée de te faire perdre du temps =/

Bonsoir,


En fait tu as des fichiers qui ne correspondent pas à ce que "HTML attend" comme type de fichiers.
Dans le SRC des IMG, tu as des fichiers se terminant en .html, alors que sont attendus des fichiers en .png, .jpg, .jpeg ou .gif.

Idem pour les SRC des SCRIPT où sont attendus des fichiers de type .js

Il faut que tu remplaces ces url par les "liens directs" des fichiers que tu peux retrouver sur les pages HTML de chacun d'eux.
Exemple pour la photo de la confiture : http://www.toofiles.com/fr/t/images/kiwi-confit.jpg

Tu vois ce que je veux dire ?
Bon courage, c'est pas facile au début

Merci de ta patience ^^ Mais j'ai toujours le même problème après avoir héberger les scripts avec l'extention .JS

Code à l'appui

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<html>

  <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<style type="text/css">

body {
   padding: 0;
   margin: 0 auto;
   width: 700px;
   font-size: 0.625em;
   background: url(http://www.toofiles.com/fr/oip/images/png/bg_main.html);
   color: #515742;
   text-align: center;
   text-shadow: 1px 1px 0 #fff;
   font-size: 1.1em;
}
h1 {
   margin: 1.5em 0;
   font-size: 3em;
}
p span {
   text-align: left;
}

img {
   display: inline-block;
   padding: 10px 10px 20px 10px;
   margin: 0 10px;
   background: #fff;
   -moz-box-shadow: 2px 2px 5px #aaa;
   -webkit-box-shadow: 2px 2px 5px #aaa;
   box-shadow: 2px 2px 5px #aaa;
}
.back a {
   display: block;
   background: #4D9EB4;
   width: 185px;
   margin: 45px auto 20px auto;
   padding: 5px;
   color: white;
   font-weight: bold;
   text-decoration :none;
   text-shadow: -1px -1px 0 #328197;
   clear: both;
   -webkit-border-radius: 20px 0 20px 20px;
   -moz-border-radius: 20px 0 20px 20px;
   border-radius: 20px 0 20px 20px;
}
.back a:hover,.back a:focus {
   text-decoration: underline;
}

.juizTips {
   position: absolute;
   top: 0;   left: 0;
   display: none;
   width: 150px;
   padding: 7px;
   border: 3px solid #AAA;
   font-size: 0.9em;
   line-height: 1.2em;
   color: #555;
   background: #f2f2f2;
   overflow: hidden;
   z-index: 500;
   
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   border-radius: 8px;
   
   -moz-box-shadow: 2px 2px 9px #999;
   -webkit-box-shadow: 2px 2px 9px #999;
   box-shadow: 2px 2px 9px #999;
   word-wrap: break-word;
}

.juizTipsWrapper {
   position: relative;
   display: inline-block;
   cursor: help;
}
</style>

  </head>


  <body>

<h1>Juiz LinkinTips</h1>      


      <p id="images" class="center">
         <img src="http://i52.tinypic.com/33k4nm9.jpg" alt="The Weepers Circus" title="The Weepers Circus in live !" width="150" height="113" />
         <img src="http://i52.tinypic.com/33k4nm9.jpg" alt="A super Rabbit" title="The smiling piece of chocolate, go to the page http://chocolat.net/ in order to learn more about chocolate" width="150" height="113" />
         <img src="http://i52.tinypic.com/33k4nm9.jpg" alt="A good breakfast" title="A kiwi banana jam aprouved by Alsacréations, go to the page http://alsacreations.fr in order to learn more information about exotism" width="150" height="113" />
      </p>      
      
      <p class="back"><a href="http://www.creativejuiz.fr/plugins/plugins-jquery/linkin-tips.php" title="Return to the plugin homepage">The plugin homepage</a></p>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>


<script type="text/javascript" src="http://sd-g1.archive-host.com/membres/up/6f4c71aaab16e37e21a1247b96a6c78fa78e310a/jquery-142min.js"></script>

<script type="text/javascript" src="http://www.archive-host.com/files/1167485/6f4c71aaab16e37e21a1247b96a6c78fa78e310a/juizLinkinTipsmin.js"></script>

<script type="text/javascript">
        $(document).ready(function() {
                $("img[title]").juizTips();
        });
</script>
   </body>
</html>


C'est grave docteur ? //PAN//

Hello,

Tu y es presque :

remplace

Code:

$("img[title]").juizTips();

par

Code:

$("img[title]").juizLinkinTips();

Et ça marchera
C'est juste le nom de la fonction qui n'est pas le bon.

Bonne continuation.
Riku