Piwigo.org

Sixpo · 2011-11-02 19:31:24

Bonjour
J ai fais un script qui permet d afficher un infobull
Histoire de créer un descriptif ou un aperçu de l album à visiter.
Je vais essayer de vous le présenter si cela vous intéresse.
Vous avez un exemple ICI

Telecharger ce Zip
Dedans vous avez
Un dossier TooltipAlbum que j ai mi par FTP dans le dossier Plugin de ma gallérie
L intérieur est composé d’un fichier
Infobul.js
(Surtout ne le renommer pas en tooltip.js car si vous avez le plugin Image Preview vous aurez un conflit).

Pour changer la position du tooltip par apport au pointeur, ouvrez le fichier avec Notepad ou Notepad++
Modifier offsetx et offsety dans ce code

Code:

// the tooltip object
var tooltip = {  // setup properties of tooltip object
  id:"infobul",
  offsetx : -350,
    offsety : 20,
   _x : 0,
   _y : 0,
    _tooltipElement:null,
    _saveonmouseover:null
}

Apres vous pouvez mettre vos images dans le dossier slides (image du Diaporama)
Elles sont à la dimension de 300X225
laisser le nom d origine
(nature-photo0.jpg, nature-photo1.jpg etc........)
cela vous evitera de modifier le . js du Diaporama
Dans le dossier floom vous pouvez personnaliser le cadre du Diaporama

Ensuite a l aide du plugin Add < head > Element de ddtddt
Insérer ce code

Code:

<script type="text/javascript" src="ADRESSE DE VOTRE/infobul.js"> </script>
<link rel="stylesheet" type="text/css" href="ADRESSE DE VOTRE/css/disign.css">
<div id="infobul"></div>
 <div id="infobul">
</div>

Je vous laisse jouer avec le disign.css pour mettre à votre gout le TOOLTIP

Ensuite pour le thème avec description comme
Dark, Grum Dark, Metal, Wall, Sylvia, Pure ECT…………
Dans la description de votre album concerné vous coller ce code

Code:

Titre de votre Tooltip
<br/>
<div><p onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)"
    title='
&lt;center&gt;&lt;font size=4&gt;&lt;font color=#FFFFFF&gt; Vacances a Sant carles &lt;/font &gt;
&lt;/center &gt;
&lt;center&gt;
&lt;iframe src=
"ADRESSE DE VOTRE DIAPORAMA/Diapo.html" width="340"
 height="260" frameborder="0" scrolling="no" &gt;
&lt;/iframe&gt;
&lt;/center&gt;
&lt;/div&gt;
&lt;/p&gt;

&lt;div class="piedinfobul"&gt;
&lt;center&gt;
&lt;font size=2&gt;
&lt;font color=#FFFFFF&gt;

MESSAGE 
&lt;br&gt;
DE
 &lt;br&gt;
 PRESENTATION'>

  Pointer votre souris ICI pour<br>
voir un petit apercu de L Album </center>
</div>

Il est normal Que vous voyer des < et des > car tout ce qui est dans la balise title
Utilise .htmlspecialchars et tout mes < > a l intérieur de mon "title" je dois les transformer comme ceci

"<" (inférieur à) devient "<"
">" (supérieur à) devient ">"

Pour les Thème qui n ont pas de description
Comme Stripped, ou stripped &Columns moi j ai réussi quand passant par PWG Stuffs de P@t
Mais je suis sur que le concepteur des Thèmes seront ravi de vous aider si possible.
Moi j ai essayé ceci

Code:

<TABLE frame="border" border="0" height="5" cellpadding="10">
  
<!--debut du premier tooltip -->

<tr>
<th>
 <p onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)"
    title='
<center><font size=4><font color=#FFFFFF> TITRE DE VOTRE INFOBULL </font >
</center >

<center>
<iframe src=
"ADRESSE DE VOTRE DIAPO/Diapo.html" width="340"
 height="260" frameborder="0" scrolling="no" >
</iframe>
</center>
</p>


<div class="piedinfobul">

<center>
<font size=2>
<font color=#FFFFFF>
MESSAGE
<br>
DE
 <br>
 PRESENTATION'>
*TITRE DE VOTRE ALBUM 1
</div>
</th>

<!--fin du premier tooltip -->

<td width="20" > </td><!-- espace entre les deux cellule -->

<!--debut du deuxieme tooltip -->

<th>
 <p onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)"
    title='
<center><font size=4><font color=#FFFFFF> TITRE DE VOTRE INFOBULL </font >
</center >

<center>
<iframe src=
"ADRESSE DE VOTRE DIAPO/Diapo.html" width="340"
 height="260" frameborder="0" scrolling="no" >
</iframe>
</center>
</p>


<div class="piedinfobul">

<center>
<font size=2>
<font color=#FFFFFF>
MESSAGE
<br>
DE
 <br>
 PRESENTATION'>
*TITRE DE VOTRE ALBUM 2
</div>
</th>

<!--fin du deuxieme tooltip -->

<td width="20" > </td><!-- espace entre les deux cellule -->

<!--debut du troisieme tooltip -->

<th>
 <p onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)"
    title='
<center><font size=4><font color=#FFFFFF> TITRE DE VOTRE INFOBULL </font >
</center >

<center>
<iframe src=
"ADRESSE DE VOTRE DIAPO/Diapo.html" width="340"
 height="260" frameborder="0" scrolling="no" >
</iframe>
</center>
</p>


<div class="piedinfobul">

<center>
<font size=2>
<font color=#FFFFFF>
MESSAGE
<br>
DE
 <br>
 PRESENTATION'>
*TITRE DE VOTRE ALBUM 3
</div>
</th>
<!--fin du troisieme tooltip -->
</tr>
</table>

J ai essayé d être le plus clair possible afin que ceux qui bataille comme moi ;-) réussisse

Dernière modification par Sixpo (2011-11-04 08:15:39)

bozojmdt · 2011-11-03 09:26:59

Bonjour,

Je viens juste de regarder l'exemple.
Tout simplement génial, du plus bel effet.

Je regarde dès que possible pour adapter cela chez moi.

Merci

Sixpo · 2011-11-03 19:45:35

Merci
les liens sont de nouveau actif mon hebergeur avait un petit souci de serveur

malouxa · 2011-11-03 23:02:04

ça à l'air très sympa :)

ben28l · 2012-08-15 22:02:55

bonjour il existe pas une version plus simple pour le coller directement dans le dossier plugin et tous ce fait automatiquement comme les divers extensions qu'il existe car pour ma part je ne comprend rien.

ou je dois mettre tous les fichiers sur mon ftp ?

Sixpo · 2012-08-18 16:12:31

non pas de pluging je ne sais meme pas comment en faire un
par contre je peux t aider si tu ne sais pas par ou commencer

flop25 · 2012-08-18 21:41:41

Sixpo a écrit:
non pas de pluging je ne sais meme pas comment en faire un

Allons allons tout s'apprend ;-)

Sixpo · 2012-08-19 18:04:07

flop25 a écrit:
Allons allons tout s'apprend ;-)

pour le coup c est moi qui sais meme pas par ou commencer ;-)

ben28l · 2012-08-19 22:08:52

Sixpo a écrit:
flop25 a écrit:
Allons allons tout s'apprend ;-)
pour le coup c est moi qui sais meme pas par ou commencer ;-)

Alors comment faire ;)
courage un petit tuto est ce possible ?
merci en tout cas
amicalement

Benoit

Sixpo · 2012-08-20 20:47:21

tu peux commencer par télécharger le ZIP le decompresser et le mettre par ftp dans ta gallerie
moi je l ai mi dans le dossier plugins

ensuite telecharger le pluging de dttt Add < head > Element, dans ta galerie
administration
plugins
gerer
autre plugins disponible

et de coller se script dedans

Code:

<script type="text/javascript" src="ADRESSE DE VOTRE/infobul.js"> </script>
<link rel="stylesheet" type="text/css" href="ADRESSE DE VOTRE/css/disign.css">
<div id="infobul"></div>
 <div id="infobul">
</div>

ensuite previens moi

Dernière modification par Sixpo (2012-08-20 21:09:50)

ben28l · 2012-08-20 21:06:43

Sixpo a écrit:
tu peux commencer par télécharger le ZIP le decompresser et le mettre par ftp dans ta gallerie
moi je l ai mi dans le dossier plugins

ensuite telecharger le pluging de dttt ICI
et de coller se script dedans
Code:
<script type="text/javascript" src="ADRESSE DE VOTRE/infobul.js"> </script>
<link rel="stylesheet" type="text/css" href="ADRESSE DE VOTRE/css/disign.css">
<div id="infobul"></div>
 <div id="infobul">
</div>
ensuite previens moi

C'est fait

Sixpo · 2012-08-20 21:11:57

as tu bien renseigner le adresse de infobul.js et disign.css propre a ta gallerie

sinon quelle theme utilise tu?

ben28l · 2012-08-20 21:18:50

Oui oui modif url

elegant (par défaut)

Dernière modification par ben28l (2012-08-20 21:19:08)

Sixpo · 2012-08-20 21:35:36

c est ou ce theme je ne le vois pas? lol

sinon dans la desciption de ton album tu colle ce code

Code:

Titre de votre Tooltip
<br/>
<div><p onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)"
    title='
&lt;center&gt;&lt;font size=4&gt;&lt;font color=#FFFFFF&gt; Vacances a Sant carles &lt;/font &gt;
&lt;/center &gt;
&lt;center&gt;
&lt;iframe src=
"ADRESSE DE VOTRE DIAPORAMA/Diapo.html" width="340"
 height="260" frameborder="0" scrolling="no" &gt;
&lt;/iframe&gt;
&lt;/center&gt;
&lt;/div&gt;
&lt;/p&gt;

&lt;div class="piedinfobul"&gt;
&lt;center&gt;
&lt;font size=2&gt;
&lt;font color=#FFFFFF&gt;

MESSAGE 
&lt;br&gt;
DE
 &lt;br&gt;
 PRESENTATION'>

  Pointer votre souris ICI pour<br>
voir un petit apercu de L Album </center>
</div>

n oublie pas de mettre l adresse de ton Diapo.html que tu a mis dans ton ftp

ensuite quand tu va passer devant
Pointer votre souris ICI pour sur ta page d accueil l infobull devrait apparaitre

pour te faire un petite explication on creer un infobull ensuite dedans un iframe qui permet da faire apparaitre un diaporama et un peu de bla bla au tour histoire d expliquer ce qu il vont voir
exemple
ICI

Dernière modification par Sixpo (2012-08-20 21:40:14)

ben28l · 2012-08-20 22:10:55

oki merci bien
Amicalement
Benoit

Piwigo.org

Annonce

#1 2011-11-02 19:31:24

Infobull pour apercu d album

Code:

Code:

Code:

Code:

#2 2011-11-03 09:26:59

Re: Infobull pour apercu d album

#3 2011-11-03 19:45:35

Re: Infobull pour apercu d album

#4 2011-11-03 23:02:04

Re: Infobull pour apercu d album

#5 2012-08-15 22:02:55

Re: Infobull pour apercu d album

#6 2012-08-18 16:12:31

Re: Infobull pour apercu d album

#7 2012-08-18 21:41:41

Re: Infobull pour apercu d album

Sixpo a écrit:

#8 2012-08-19 18:04:07

Re: Infobull pour apercu d album

flop25 a écrit:

#9 2012-08-19 22:08:52

Re: Infobull pour apercu d album

Sixpo a écrit:

flop25 a écrit:

#10 2012-08-20 20:47:21

Re: Infobull pour apercu d album

Code:

#11 2012-08-20 21:06:43

Re: Infobull pour apercu d album

Sixpo a écrit:

Code:

#12 2012-08-20 21:11:57

Re: Infobull pour apercu d album

#13 2012-08-20 21:18:50

Re: Infobull pour apercu d album

#14 2012-08-20 21:35:36

Re: Infobull pour apercu d album

Code:

#15 2012-08-20 22:10:55

Re: Infobull pour apercu d album

Pied de page des forums