4images Forum & Community

4images Modifications / Modifikationen => Tutorials => Topic started by: ivan on June 27, 2008, 06:30:47 PM



Title: [TUT] Tooltip for Thumbnails
Post by: ivan on June 27, 2008, 06:30:47 PM
(http://img517.imageshack.us/img517/1378/deu8yc.gif) - zunächst einmal nur in deutsch ...
(http://img517.imageshack.us/img517/7821/eng9tu.gif) - a englisch version is coming soon ... or later ...  ;) ... meanwhile use this  English-Google-Translation (http://translate.google.com/translate?u=http%3A%2F%2Fwww.4homepages.de%2Fforum%2Findex.php%3Ftopic%3D20747.0&langpair=en%7Cde&hl=de&ie=UTF-8) ...
     - but don't use the php-/html-code from this translation, use the php-/html-code from the original topic ...


Hallo zusammen,
Auf grossen Wunsch stelle ich hier ein kleines Tutorial zusammen, dass in Thumbnails (kleine Bilder) einen gewünschten Tooltip-Text anzeigt.
Beispiele siehe Bilder unten!

Weitere Treads
http://www.4homepages.de/forum/index.php?topic=20882.0
http://www.4homepages.de/forum/index.php?topic=11252.0


1) downloade das Plugin von Walter Zorn Link -> hier klicken (http://www.walterzorn.de/tooltip/tooltip.htm)
-Extrahiere den Ordner.
-Kopiere wz_tooltip.js in den Root (Hauptordner) von 4images

2) öffne /templates/default/header.html
suche
1
2
<body bgcolor="#FFFFFF" text="#0F5475" link="#0F5475" vlink="#0F5475" alink="#0F5475">
<br />

ersetze durch
1
2
3
<body bgcolor="#FFFFFF" text="#0F5475" link="#0F5475" vlink="#0F5475" alink="#0F5475">
<script type="text/javascript" src="wz_tooltip.js"></script>
<br />

3) öffne /templates/default/thumbnail_bit.html
suche
1
{thumbnail}<br />

ersetze durch
1
2
3
4
5
<table width="1%" border="0" cellspacing="0" cellpadding="0" onmouseover="Tip('{image_name}<br />{lang_category} {cat_name}<br />{lang_comments} {image_comments}')" onmouseout="UnTip()">
  <tr>
    <td>{thumbnail}</td>
  </tr>
</table>


Beispiel mit Bild Namen, Kategorie und Kommentare
1
onmouseover="Tip('{image_name}<br />{lang_category} {cat_name}<br />{lang_comments} {image_comments}')" onmouseout="UnTip()"

  • <br /> Zeilenschaltung
  • {image_name} Bild name
  • {lang_category} Sprache: Kategorie
  • {cat_name} Kategorie
  • {lang_comments} Sprache: Kommentare:
  • {image_comments} Kommentar Zähler

Die Sprache "Kategorie" {lang_category} wird standardmässig nicht angezeigt.
Um dies oder andere Sprachtags zu integrieren, gehe wie folgt vor:

Language {Tag} registrieren
4) öffne /includes/page_header.php
suche
1
2
$site_template->register_vars(array(
  "lang_site_stats" => $lang['site_stats'],

ersetze mit
1
2
3
$site_template->register_vars(array(
  "lang_site_stats" => $lang['site_stats'],
  "lang_category" => $lang['category'],

Konfiguration des Tooltips
5) öffne /wz_tooltip.js
suche zwischen diesen Zeilen und konfiguriere es nach Deinen Wünschen
1
2
3
//===================  GLOBAL TOOPTIP CONFIGURATION  =========================//

//=======  END OF TOOLTIP CONFIG, DO NOT CHANGE ANYTHING BELOW  ==============//

Lasst eurer Fantasy freien Lauf und kreiert eure eigenen Tooltips!

Bitte nutzt für erweiterte Funktionen wie Bild integration u.s.w die Hilfe von Walter Zorn!
[DE] Hilfe und Erweiterungen (http://www.walterzorn.de/tooltip/tooltip.htm)
[EN] Help und Extensions (http://www.walterzorn.com/tooltip/tooltip_d.htm)


edited by mawenzi :

... Und wenn ihr im Tooltip über dem Thumbnail das jeweils betreffende Bild schon anzeigen wollt ...
... so empfehle ich eine kleine Tooltip-Erweiterung von HorrorCrafT ...
... zu finden hier ... http://www.4homepages.de/forum/index.php?topic=22067.msg120365#msg120365 ...

Nachtrag 16. Juni 2010
Leider ist die Webseite von Walter Zorn nicht mehr erreichbar. Das Script könnt Ihr unter folgendem Link Download
http://www.4homepages.de/forum/index.php?topic=22030.msg148277#msg148277


Title: Re: [TUT] Tooltip in Thumbnails
Post by: asms on June 27, 2008, 06:45:38 PM
/templates/default/page_header.html
to
/templates/default/header.html
Quote  [Expand]
2) öffne /templates/default/page_header.html
suche
yas or no


Title: Re: [TUT] Tooltip in Thumbnails
Post by: Sumale.my on June 27, 2008, 07:23:13 PM
Super! Klasse, danke dir!
Sowas habe ich gesucht und nun ist es da :D!!!!!

Perfekt!

** Frage: bekommst du sowas auch hin?
http://www.4homepages.de/forum/index.php?topic=20034.msg119948#msg119948

LG
Phisker


Title: Re: [TUT] Tooltip in Thumbnails
Post by: ivan on June 27, 2008, 07:24:10 PM
Leider nein...

Gruss ivan


Title: Re: [TUT] Tooltip in Thumbnails
Post by: Sumale.my on June 27, 2008, 07:48:23 PM
Schade eigentlich!

ich habe gerade das Ballon Tips dinges eingebaut, dass klappt auch gut, allerdings habe ich dazu mal eine Frage!

Also voweg,

alle JAvascript Dateien liegen bei mir:

templates/dedault/js

Darin liegt auch die tip_balloon.js und der Ordner tip_balloon mit den Grafiken des Balloon Tooltips!

In der JS muss man den Pfad der Bilddateien angeben:

1
config. BalloonImgPath = "http://localhost/1/templates/default/js/tip_balloon/" // Path to images (border, corners, stem), in quotes. Path must be relative to your HTML file.

Ich muss den gesamten Pfad der Webseite angeben, ist das möglich das es gekürtzt wird?

Also

1
{template_url}/js/tip_balloon/
geht nicht!

auch nicht wenn ich direkt:
1
/tip_balloon/ oder tip_balloon
eingebe

Woran liegt das?


Title: Re: [TUT] Tooltip in Thumbnails
Post by: Jan-Lukas on June 27, 2008, 07:54:08 PM
hmm, läuft super, aber sehr lange Ladezeiten ?


edit: habs wieder rausgenommen, der eintrag in der header verursagt bei mir sehr lange Ladezeiten.


Title: Re: [TUT] Tooltip in Thumbnails
Post by: Sumale.my on June 27, 2008, 08:47:19 PM
Wirklich?
Liegt aber doch nicht daran oder? Kann ich mir nicht vorstellen!


Title: Re: [TUT] Tooltip in Thumbnails
Post by: Jan-Lukas on June 27, 2008, 08:48:51 PM
dann muss ich wohl lügen   :?:
ausgebaut, und die Seite läuft wieder, also liegt es daran  :wink:


Title: Re: [TUT] Tooltip in Thumbnails
Post by: Sumale.my on June 27, 2008, 09:09:36 PM
lol ich sag doch nicht das du lügt, nur du bist der einzigste bei dem es larm läuft.

Ich meinte damit das es nicht "AN DIESEM TOOLTIP" liegt. Das kann doch eine andere Ursache haben, mit dem was du sonst noch so eingebaut hast kann doch sein!

Also ich finde das es sehr gut läuft auch die Balloon erweiterung ist ganz cool!


Title: Re: [TUT] Tooltip in Thumbnails
Post by: Jan-Lukas on June 27, 2008, 09:16:29 PM
Logisch liegt das an anderen Sachen, so ist das halt mit allen Erweiterungen, beim einen läufts, beim anderen nicht.
Trotzdem läuft es bei mir nicht  :wink:
Aber hab es ja auch nur getestet, da bei mir die Daten sowiso im Thumb stehen, finde ich das nicht so interessant.


Title: Re: [TUT] Tooltip in Thumbnails
Post by: JohnSmith79 on June 28, 2008, 05:46:36 PM
Hi,
first big thanks to IVAN!!
I have a further question if it is possilbe to implement EXIF and IPTC information in the tooltip?

Best regards
Jo


Title: Re: [TUT] Tooltip in Thumbnails
Post by: JohnSmith79 on June 29, 2008, 02:29:03 AM
Hi,
first big thanks to IVAN!!
I have a further question if it is possilbe to implement EXIF and IPTC information in the tooltip? Or are there more possibilities to make some additions to the following "shortcuts" like these:

<br /> Zeilenschaltung
{image_name} Bild name
{lang_category} Sprache: Kategorie
{cat_name} Kategorie
{lang_comments} Sprache: Kommentare:
{image_comments} Kommentar Zähler

EXIF
IPTC
Filesize
The date the photo was daten
etc...

Best regards
Jo


Title: Re: [TUT] Tooltip for Thumbnails
Post by: mawenzi on July 03, 2008, 01:24:17 AM
@ ivan

... habe im ersten Post einen Hinweis auf die Tooltip-Erweiterung von HorrorCrafT gegeben ...
... und danke für dieses Tutorial ...


Title: Re: [TUT] Tooltip for Thumbnails
Post by: Omsky on July 30, 2008, 02:49:49 PM
hi.
i install this mod, worked

and i modifed thumbnail_bit.html

change code
1
onmouseover="Tip('{image_name}<br />{lang_category} {cat_name}<br />{lang_comments} {image_comments}')" onmouseout="UnTip()">

on

1
onmouseover="Tip('{image_name}<br><b>{lang_category}</b> {cat_name}<br> <b>{lang_file_size}</b> {image_file_size}<br> <b>{lang_hits}</b> {image_hits}<br><b>{lang_downloads}</b> {image_downloads}<br><b>{image_rating}</b> ({image_votes} {lang_votes})<br><b>{lang_comments}</b> {image_comments}')" onmouseout="UnTip()">

and have small bugs

(http://www.picamatic.com/show/2008/07/30/04/717938_bigthumb.gif) (http://www.picamatic.com/view/717938_not_show1/)

and

(http://www.picamatic.com/show/2008/07/30/04/718009_bigthumb.gif) (http://www.picamatic.com/view/718009_not_show2/)

in photo information not showed "words" on index page:
1) File Size:
2) Rating:

in categories no showed words:
1) File Size:
2) Rating:
3) Hits:
4) Downloads:

numbers showed, words not showed

what correct this?


Title: Re: [TUT] Tooltip for Thumbnails
Post by: mawenzi on July 30, 2008, 05:00:06 PM
... the fast way ...
... if you use only one language on your website, then you can hardcode these tags ...
... use e.g. for {lang_file_size} -> File Size : ... in your thumbnail_bit.html ... a.s.o. ...
... the better way ...
... these lang-tags must be registered in categories.php or in includes/page_header.php like in details.php ....


Title: Re: [TUT] Tooltip for Thumbnails
Post by: Omsky on July 30, 2008, 06:22:10 PM
ok, thank you, I do not know what add   :)

6 languages on my new gallery, look this mod on http://sexy-girls-photo.com

look please my files:
categories.php (http://sexy-girls-photo.com/categories.php.txt)
page_header.php (http://sexy-girls-photo.com/page_header.php.txt)
thumbnail_bit.html (http://sexy-girls-photo.com/thumbnail_bit.html.txt)


show example for one language plz


Title: Re: [TUT] Tooltip for Thumbnails
Post by: ivan on July 30, 2008, 06:30:07 PM
go to page_header.php

search
1
2
$site_template->register_vars(array(
  "lang_site_stats" => $lang['site_stats'],

and below (example)
1
2
3
4
"lang_category" => $lang['category'],
"lang_downloads" => $lang['downloads'],
"lang_rating" => $lang['rating'],
"lang_votes" => $lang['votes'],

the can use the {lang_category}
the "lang" tags is in page_header available in every view :!:


Title: Re: [TUT] Tooltip for Thumbnails
Post by: mawenzi on July 30, 2008, 06:34:06 PM
... thanks ivan ... ;)


Title: Re: [TUT] Tooltip for Thumbnails
Post by: Omsky on July 30, 2008, 06:55:58 PM
word "Downloads:" showed earlier, on all languages - on index page.

lines
1
"lang_downloads" => $lang['downloads'],
does not in page_header.php


my changed code in page_header.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$site_template->register_vars(array(
  "lang_site_stats" => $lang['site_stats'],
  "lang_category" => $lang['category'],
  "lang_downloads" => $lang['downloads'], <---- it is added
   "lang_rating" => $lang['rating'],              <---- it is added
   "lang_votes" => $lang['votes'],               <---- it is added
  "lang_registered_user" => $lang['registered_user'],
  "lang_random_image" => $lang['random_image'],
  "lang_categories" => $lang['categories'],
  "lang_sub_categories" => $lang['sub_categories'],
  "lang_new_images" => $lang['new_images'],
  "lang_top_images" => $lang['top_images'],
  "lang_search" => $lang['search'],
  "lang_advanced_search" => $lang['advanced_search'],
  "lang_lightbox" => $lang['lightbox'],
  "lang_register" => $lang['register'],
  "lang_control_panel" => $lang['control_panel'],
  "lang_login" => $lang['login'],
  "lang_auto_login" => $lang['lang_auto_login'],
  "lang_logout" => $lang['logout'],
  "lang_lost_password" => $lang['lost_password'],
  "lang_user_name" => $lang['user_name'],
  "lang_password" => $lang['password'],
  "lang_go" => $lang['go'],
  "lang_images_per_page" => $lang['images_per_page'],
  "charset" => $lang['charset'],
  "direction" => $lang['direction']
));



not work


Title: Re: [TUT] Tooltip for Thumbnails
Post by: Omsky on July 30, 2008, 07:35:20 PM
ohh... i sleep  :oops:

i change...
new code
in thumbnail_bit.html

1
<table width="1%" border="0" cellspacing="0" cellpadding="0" onmouseover="Tip('{image_name}<br><b>{lang_category}</b> {cat_name}<br> <b>{lang_file_size}</b> {image_file_size}<br> <b>{lang_hits}</b> {image_hits}<br><b>{lang_downloads}</b> {image_downloads}<br><b>{lang_votes}</b> {image_votes} <br> <b>{lang_rating}</b> {image_rating} <br> <b>{lang_comments}</b> {image_comments}')" onmouseout="UnTip()">

and add in page_header.php line
1
2
  "lang_file_size" => $lang['file_size'],
 "lang_hits" => $lang['hits'],

big thank you all


Title: Re: [TUT] Tooltip for Thumbnails
Post by: ivan on July 30, 2008, 07:36:55 PM
its right ;)


Title: Re: [TUT] Tooltip for Thumbnails
Post by: Omsky on August 09, 2008, 07:36:33 PM
small bugs http://www.4homepages.de/forum/index.php?topic=18761.msg122116#msg122116

if there is a ' symbol in the picture's file names then IE determines an error and [TUT] Tooltip for Thumbnails (http://www.4homepages.de/forum/index.php?topic=22030.0) stops working fot those pages.

how to fix this from happenings with '?


Title: Re: [TUT] Tooltip for Thumbnails
Post by: mawenzi on August 09, 2008, 07:55:00 PM
@Omsky

... have a look at V@no's statement "Your site's name has an ' (apostrophe), its messes up the javascript" ...
... here : http://www.4homepages.de/forum/index.php?topic=22406.msg122263#msg122263 ...
... it is the same for ... picture's file names ...


Title: Re: [TUT] Tooltip for Thumbnails
Post by: sigma. on August 16, 2008, 10:24:04 PM
love this. thanks for sharing!
I have one bug though.

It looks like any type of special character other than text (',",url,html,! and even spaces) cause the tooltip to not display, and sometimes mess up the thumbnail alignment in 4images.

Anyone know how to enable special characters in the tooltip?


Title: Re: [TUT] Tooltip for Thumbnails
Post by: V@no on August 17, 2008, 12:19:29 AM
Its not "special characters" that messing up on your site, but the new lines image descriptions.
use this instead:
1
onmouseover="Tip('<?=str_replace("'", "\\'", str_replace("\r", "", str_replace("\n", "\\n", "<b>{image_name}</b><br />{lang_description} {image_description}<br />__________<br />{lang_comments} {image_comments}")));?>')"


Title: Re: [TUT] Tooltip for Thumbnails
Post by: sigma. on August 17, 2008, 01:07:13 AM
So should my thumbnail_bit.html look like this then?

1
2
3
4
5
6
7
8
9
<!-- you wish detail page in a small javascript open window, use {thumbnail_openwindow} -->
<table width="" border="0" cellspacing="0" cellpadding="" onmouseover="Tip('<?=str_replace("'", "\\'", str_replace("\r", "", str_replace("\n", "\\n", "<b>{image_name}</b><br />{lang_description} {image_description}<br />__________<br />{lang_comments} {image_comments}")));?>')" onmouseout="UnTip()">
  <tr>
    <td>{thumbnail}</td>
  </tr>
</table>
<font color="#FF0000">| </font> <b>{image_name}</b>
<br />
| <a href="{cat_url}">{cat_name}</a><br />

It works if I remove this:
1
onmouseout="UnTip()">

but then the tooltip doesnt go away. Where should I position the onmouseout call?


Title: Re: [TUT] Tooltip for Thumbnails
Post by: sigma. on August 17, 2008, 02:28:44 AM
oh wait. i got it.

1
onmouseover="Tip('<?=str_replace("'", "\\'", str_replace("\r", "", str_replace("\n", "\\n", "<b>{image_name}</b><br />{lang_description} {image_description}<br />__________<br />{lang_comments} {image_comments}")));?>', BALLOON, true)"onmouseout="UnTip()">

thanks V.

now please.. what exactly did you do to get this to work? what does str_replace function do? string replace?


Title: Re: [TUT] Tooltip for Thumbnails
Post by: V@no on August 17, 2008, 03:36:19 AM
It creates javascript friendly string - escapes newlines and apostrophes


Title: Re: [TUT] Tooltip for Thumbnails
Post by: sigma. on August 17, 2008, 04:13:45 AM
good to know. thanks again!

is there any way to make a word in "quotes" javascript friendly? I tried """, but that had a nasty effect.


Title: Re: [TUT] Tooltip for Thumbnails
Post by: Boemmel on October 28, 2008, 09:07:44 AM
wie bekomme ich den Mod zum Laufen ? bei mir tut sich nichts.

muß ich irrgendwas aktivieren, ich bin ratlos.
 :wink:

hat sich erledigt!


Title: Re: [TUT] Tooltip for Thumbnails
Post by: AKIN on October 28, 2008, 12:17:10 PM
very nice.
it's work.thanks all..


Title: Re: [TUT] Tooltip for Thumbnails
Post by: vitara on March 04, 2009, 09:44:21 AM
Sehr guter Mod, Danke

Nun möchte ich aber hier eine kleine Bildvorschau zeigen.
Ich schaffe das nicht ein das Bild in der grösse von 200px  einzufügen ohne kommentare und informationen, kannst Du mir weiterhelfen mit einem script?

Danke schon mal vorab.....


Title: Re: [TUT] Tooltip for Thumbnails
Post by: ivan on March 04, 2009, 08:01:53 PM
Hi,
hast Du das schon probiert?
http://www.4homepages.de/forum/index.php?topic=22067.msg120365#msg120365


Title: Re: [TUT] Tooltip for Thumbnails
Post by: vitara on March 05, 2009, 11:46:44 AM
Hi ivan

Das ginng aber flott, besten Dank das nenn ich Hilfe..... :D

Der Moid läuft jetzt wunderbar bei mir auf localhost nur zeigt er mit die gnze grösse des Bildes an, ich möcht aber nur 200 pixel, wie oder wo kann ich das nun einstellen?

Grossen Dank für deine Unterstützung

Vitara


Title: Re: [TUT] Tooltip for Thumbnails
Post by: ivan on March 05, 2009, 08:27:56 PM
versuche mal dies

suche
1
"image_tip" => "<img src=\'".MEDIA_PATH."/".$image_row['cat_id']."/".$image_row['image_media_file']."\' width=\'".$width."\' height=\'".$height."\'>",

ersetze durch
1
"image_tip" => "<img src=\'".MEDIA_PATH."/".$image_row['cat_id']."/".$image_row['image_media_file']."\' width=\'"200px"\' height=\'"200px"\'>",


Title: Re: [TUT] Tooltip for Thumbnails
Post by: paule on July 29, 2009, 02:56:44 PM
Hallo Zusammen,

funktioniert einwandfrei mit den Feldern : {image_name} {lang_category} {cat_name} usw
Ich habe zusätzliche IPTC Felder angelegt (funktioniert alles perfekt)
Wenn ich nun statt der besagten Felder nur das neues IPTC Feld : {image_caption}  einsetze wird nichts mehr angezeigt!?

Hat jemand eine Idee?

Dank im Voraus

paule


1.7.7.  www.kosecki.de





Title: Re: [TUT] Tooltip for Thumbnails
Post by: GaYan on July 30, 2009, 07:13:39 AM
hey... can i show the thumbnail image in the tooltip as well ..  :mrgreen: i cant unrestand anything cuz i dun no anything ab grman langauge .. ! ! !

is it possible ?? !  :roll:


Title: Re: [TUT] Tooltip for Thumbnails
Post by: mawenzi on July 30, 2009, 10:02:15 AM
@g2gayan

... it is possible ...

... as I said in the first post ...
Quote from: mawenzi   [Expand]
edited by mawenzi :

... Und wenn ihr im Tooltip über dem Thumbnail das jeweils betreffende Bild schon anzeigen wollt ...
... so empfehle ich eine kleine Tooltip-Erweiterung von HorrorCrafT ...
... zu finden hier ... http://www.4homepages.de/forum/index.php?topic=22067.msg120365#msg120365 ...

... and for your better understanding use google-translator ... ;)


Title: Re: [TUT] Tooltip for Thumbnails
Post by: paule on July 30, 2009, 04:45:38 PM
Hallo Zusammen,

funktioniert einwandfrei mit den Feldern : {image_name} {lang_category} {cat_name} usw
Ich habe zusätzliche IPTC Felder angelegt (funktioniert alles perfekt)
Wenn ich nun statt der besagten Felder nur das neues IPTC Feld : {image_caption}  einsetze wird nichts mehr angezeigt!?

Hat jemand eine Idee?

Dank im Voraus

paule


1.7.7.  www.kosecki.de




Hallo, ich befürchte ich habe mein Problem schlecht formuliert.
Ich versuche es noch einmal.

onmouseover="Tip('{image_name}')" onmouseout="UnTip()"> funktioniert
onmouseover="Tip('{image_caption}')" onmouseout="UnTip()"> funktioniert nicht!

Der tag: {image_caption} auf der Detailseite funktioniert

Gruß paule





Title: Re: [TUT] Tooltip for Thumbnails
Post by: mawenzi on July 30, 2009, 05:19:03 PM
mein kurzer Erklärungsversuch ... ;)

... der Tag {image_name} wird für die Thubnails in der functions.php definiert und ist somit auf den Kategorie-, Such- u.a. Seiten einsetzbar ...
... der Tag {image_caption} für die Bildseite wird bei dir offensichtlich in der details.php definiert und ist somit nur auf der Detail-Seite (details.html) einsetzbar ...
... du müsstest diesen Tag ebenfalls in der functions.php in der Sektion "function show_image" definieren und registrieren ...


Title: Re: [TUT] Tooltip for Thumbnails
Post by: paule on July 31, 2009, 01:56:57 PM
Vielen Dank für die schnelle Antwort,

wie definiere und registriere ich den Tag?
Bin nicht wirklich fit in PHP....

Gruß paule





Title: Re: [TUT] Tooltip for Thumbnails
Post by: Fragezeichen on November 28, 2009, 10:23:02 PM
Bei mir läuft das Mod irgendwie nicht,egal was gemacht wird.
Statt des Tooltips versauts einfach nur die Thumbs mit Beschreibung,Kommentaren usw...

That Mod want running by me.It just messy up the thumbs with discriptions,comments... not window opend

 :?: :?:


Title: Re: [TUT] Tooltip for Thumbnails
Post by: nameless on March 20, 2010, 01:51:27 PM
nice one

all i can understand is this Tooltip for Thumbnails

What i can do If i need it for category

and when I mouseover a catagory display a photo in the tooltip not a text

sorry for my bad english



Title: Re: [TUT] Tooltip for Thumbnails
Post by: surferboy on April 22, 2010, 01:50:41 AM
Hi -

I'm using v1.7.7

I just installed the Tooltip for Thumbnails MOD and love its preview capabilities.

I tried adding the code to the last_comment_bit.html that is used in the Last Commend Received MOD, topic 15701.0, so that the same preview could happen:

Quote  [Expand]
<table width="1%" border="0" cellspacing="0" cellpadding="0" onmouseover="Tip('{image_tip}<br />{image_name}<br />{lang_category} {cat_name}<br />{lang_comments} {image_comments}')" onmouseout="UnTip()">
  <tr>
    <td>{thumbnail}</td>
  </tr>
</table>

Yikes! What a disaster.

Does anyone know if it can be added? I had a look at the german -> english translation of this MOD several times and couldn't find anything except a remark  by Manwenzi here:

http://www.4homepages.de/forum/index.php?topic=22030.msg139389#msg139389

Thanks for any ideas. I'd love to use the same principle on the other MOD Show Received Comments V.2, topic 12695.0, and on Rinaldo's Top100 MOD, topic 23055.0.

The Last Comment MOD and the Show Received Comments MOD both have *bit.html type files but the code does not digest at all. In Rinaldo's Top 100, he has a Top100.php file and a top100.html file. I tried adding the code I quoted here and the template went splat all over the screen but ... one image did go into preview... but just one!

Thanks for any ideas or thoughts you have.

- Brian


Title: Re: [TUT] Tooltip for Thumbnails
Post by: surferboy on April 23, 2010, 10:06:21 AM
HI -

I just installed V@no's Auto Thumbnailer v2.3.1, topic 6921.0, and hoped that it would create thumbnails on the fly for remote images uploaded by url. It doesn't seem to but it does create them from the acp.

The problem is that walterzorn.js does not like the thumbnails and does not see the connection so when you hover over them, the tooltip shows a broken link for the image but does show the category and image name and number of comments...

Anyone have any ideas what could be wrong?

I checked in edit images and the image names are in fact the same so it doesn't really make sense.

Thanks for any thoughts and maybe someone else who has tooltip and autothumbnailer can try it out and see if they get the same result?

Thanks,

Brian


Title: Re: [TUT] Tooltip for Thumbnails
Post by: uli480 on June 15, 2010, 01:22:43 PM
Wo kann ich Walter Zorns Tooltip herunterladen?
Seine Hompepage ist leider offline.


Title: Re: [TUT] Tooltip for Thumbnails
Post by: surferboy on June 15, 2010, 05:39:59 PM
I was surprised to read your post since I had used the link just two months ago.  After some research on the web, I found some posts that said Walter Zorn had passed away last year and apparently the web hosting had expired.

I found this archive link where you can still download the the tooltip:

http://web.archive.org/web/20080103025045/www.walterzorn.com/tooltip/tooltip_e.htm

If anyone who has enjoyed the tooltip has any idea how we can preserve this knowledge, please speak up!

I still have two unresolved posts (on page 4) in this topc on how to make the tooltip work for:
1. thumbnails that appear in remote images uploaded by url (topic 6921.0) but the image won't preview in tooltip
2. thumbnails that appear in the last comments received MOD (topic 15701.0) but the image won't preview in tooltip

- Brian


Title: Re: [TUT] Tooltip for Thumbnails
Post by: ivan on June 16, 2010, 09:05:25 AM
@uli480
Irgendwo habe ich die Version noch auf dem PC ...
Die im obigen Post ist eine alte Version!

Gruss Ivan


Title: Re: [TUT] Tooltip for Thumbnails
Post by: surferboy on June 16, 2010, 06:12:53 PM
Ivan,

If you have a later version, please share! My version is v 5.3.1 from that link even though it says 4.12, and it says it was last modified 07 Nov 2008.

Cheers,

Brian

- see attached -


Title: Re: [TUT] Tooltip for Thumbnails
Post by: ivan on June 16, 2010, 06:54:41 PM
@surferboy
yes, my Version is the same ...

Greets ivan


Title: Re: [TUT] Tooltip for Thumbnails
Post by: Tino23 on August 13, 2010, 11:24:48 AM
@IVAN der Tipp http://www.4homepages.de/forum/index.php?topic=22030.msg133202#msg133202 (http://www.4homepages.de/forum/index.php?topic=22030.msg133202#msg133202) füht bei mir zu einer Fehlermeldung. Gehen tut folgender Code bei mir
1
"image_tip" => "<img src=\'".MEDIA_PATH."/".$image_row['cat_id']."/".$image_row['image_media_file']."\' width=\'300\' height=\'225\'>",

Da ich aber das Bild in der Größe des Thumbnailbildes haben möchte hab ich den Code wie folgt geändert.

1
"image_tip" => "<img src=\'".ROOT_PATH.THUMB_DIR."/".$image_row['cat_id']."/".$image_row['image_media_file']."\' >",
Einzigen Schönheitsfehler den ich da noch habe, bei mir wird dann leider nicht das Icon passend zur Dateiendung angezeigt, wenn kein Thumbnailbild vorhanden ist. Hat da einer noch eine Idee?

Walter Zorns Tooltip und die dazugehörigen PlugIns könn ihr euch hier runterladen. (http://ko.sourceforge.jp/projects/sfnet_wztip/releases/)


Title: Re: [TUT] Tooltip for Thumbnails
Post by: zakaria666 on August 20, 2010, 04:07:45 PM
hello

links are dead please fix, cannot download plugin


Title: Re: [TUT] Tooltip for Thumbnails
Post by: Rembrandt on August 20, 2010, 06:19:03 PM
http://www.4homepages.de/forum/index.php?topic=22030.msg148277#msg148277


Title: Re: [TUT] Tooltip for Thumbnails
Post by: Tino23 on August 20, 2010, 10:18:38 PM
Obriger Link von mir geht auch, dort gibts auch das PlugIN http://ko.sourceforge.jp/projects/sfnet_wztip/downloads/extensions/tip_balloon_1.6/tip_balloon_16.zip/ (http://ko.sourceforge.jp/projects/sfnet_wztip/downloads/extensions/tip_balloon_1.6/tip_balloon_16.zip/)

Hat noch einer eine Idee für "mein" obriges Problem? http://www.4homepages.de/forum/index.php?topic=22030.msg149866#msg149866 (http://www.4homepages.de/forum/index.php?topic=22030.msg149866#msg149866)


Title: Re: [TUT] Tooltip for Thumbnails
Post by: surferboy on September 09, 2010, 04:48:14 AM
Seemingly random problems with Tooltip for Thubnails:

using v1.7.7
php: 5.2.13
mysql: 5.1.47

Issue: some of the uploaded photos do not display to full size on mouseover.  Case in point - two members uploaded a single image each. One expands to full size on mouseover and the other does not.

Is there a setting or db field to check for this?

Any ideas?

Thanks,

Brian


Title: Re: [TUT] Tooltip for Thumbnails
Post by: V@nо on September 09, 2010, 06:50:17 AM
I think the problem is in image name or category name when it has an apostrophe (single quote: ' ).
if that is the case, then replace
1
onmouseover="Tip('{image_name}<br />{lang_category} {cat_name}<br />{lang_comments} {image_comments}')" onmouseout="UnTip()"

with:
1
onmouseover="Tip('<?=addslashes("{image_name}<br />{lang_category} {cat_name}<br />{lang_comments} {image_comments}")?>')" onmouseout="UnTip()"


Title: Re: [TUT] Tooltip for Thumbnails
Post by: surferboy on September 09, 2010, 07:40:19 AM
Hi -

Thanks the suggestion. Attached is the thumbnail file - I think you have nailed it although when I tried to implement your fix, the mouseover enlargement worked but no large image appeared.

The problem, I think, based on your analysis, is that I have include the description in the tooltip thumbnail_bit.html file and some of the descriptions have a single apostrophe in the informal descriptions, such as "I'm wearing a t-shirt ..."  When I went back and deleted the apostrophes, the image did not enlarge on mouseover.  Not sure if this is due to the 'big' file not updating when the image is edited. (since it is the original image that enlarges on mouseover)

What do you think?

Thanks for taking the time to look at this.

Brian





Title: Re: [TUT] Tooltip for Thumbnails
Post by: V@no on September 09, 2010, 02:34:08 PM
Try implement my fix


Title: Re: [TUT] Tooltip for Thumbnails
Post by: surferboy on September 09, 2010, 05:11:11 PM
Hi -

Thanks for your help on this.

I implemented your fix exactly as your specified.  ALL of the images showed the smaller pop up of the image name, image category, and comment count. Even the images that were a problem. (see attached file thumbnail_bit.html

Then I added the description language to the code you provided so that I could get the image description displayed as well. When I did that, all of the images worked except one. This worked with several images whose description have apostrophes in their text.  (see attached file thumbnail_bit_wdesc.html)

Then I added the image_tip functionality since that is what makes this MOD so spectacular, the full size pop up of the image as you mouseover the thumbnail.  When I did that, the screen pop up goes to full size but the image does not appear. This applied to all of the images except the same one as previous modification. (see attached file thumbnail_bit_wdesc_wimagetip.html)

Not sure why the image_tip functionality gets broken with the extra coding your provide.

Thanks again for looking at this.

Brian


Title: Re: [TUT] Tooltip for Thumbnails
Post by: V@no on September 10, 2010, 01:30:08 AM
I think the problem is that descriptions have newlines, but javascript doesn't allow multi-line strings. Try this:

1
<table width="1%" border="0" cellspacing="0" cellpadding="0" onmouseover="Tip('<?=str_replace(array("\n", "\r"), "", addslashes("{image_tip}<br />{lang_imagename} {image_name}<br />{lang_category} {cat_name}<br />{lang_description} {image_description}<br />{lang_comments} {image_comments}"))?>')" onmouseout="UnTip()">


Title: Re: [TUT] Tooltip for Thumbnails
Post by: surferboy on September 10, 2010, 02:42:31 AM
Hi -

Thanks for continuing to follow this.  I replaced the code you provided. That seemed to fix the mouseover functionality for all the images, even the problem ones but the image_tip functionality is still an issue.  What happens is the image box expands to full size but the image does not appear. Instead, a very small broken image icon appears in the blow up on mouseover.

I will send you a PM with an access code so you can log on and have a look at the category and image that was a problem but if you go to the home page of the gallery and mouseover any of the images, you'll see the same thing as well.

Thanks so much for your time.

Brian


Title: Re: [TUT] Tooltip for Thumbnails
Post by: V@no on September 10, 2010, 03:01:19 AM
Try use instead of {image_tip} this: {image}

If this not what you want, then you'll need remove backslashes ( \ ) in this line of includes/functions.php
"image_tip" => "<img src=\'".MEDIA_PATH."/".$image_row['cat_id']."/".$image_row['image_media_file']."\' width=\'".$width."\' height=\'".$height."\'>",


Title: Re: [TUT] Tooltip for Thumbnails
Post by: surferboy on September 10, 2010, 03:41:27 AM
Hi -

Thanks so much for that.  I tried shortening the image_tip to image but it caused the layout to go haywire with huge long columns and visible code.

However, following your instructions on removing the backslashes on image_tip line of code in the includes/functions.php file did the trick. Now all of the images appear in full size on mouseover, and with your help, the apostrophe problem won't plague the image gallery as our members upload and write descriptions.

Thank you so much for your help.

Brian


Title: Re: [TUT] Tooltip for Thumbnails
Post by: Tino23 on September 19, 2010, 08:58:22 PM
Was muß ich denn ändern, damit mir die Tooltipps auch bei dem MOD Mini-Top http://www.4homepages.de/forum/index.php?topic=5874.0 (http://www.4homepages.de/forum/index.php?topic=5874.0) angezeigt werden bzw. der Text auch im Tooltip erscheint?

Nachtrag vom 29.09.2010:
OK, ich hab mein Anliegen noch mal mit einem Bild besser dargestellt. Wie man sehen kann Funktioniert der Mod hier bei den Vorschaubildern für neue Bilder ohne Probleme. Bei dem MOD Mini Top hingegen fehlt wieder die Textanzeige und das Baloon PlugIn scheint auch ignoriert zu werden

(http://tinonc.ti.ohost.de/Bild2.jpg)


Title: Re: [TUT] Tooltip for Thumbnails
Post by: Sumale.my on October 19, 2010, 10:27:39 PM
Die Seite von Herrn Walter Zorn geht nimmer..,


Title: Re: [TUT] Tooltip for Thumbnails
Post by: x23piracy on October 20, 2010, 07:25:49 AM
Hi,

ich benutze den mod similar images, damit zeige ich auf der details.html
similar images an ;).

In den Popups zu den similar images auf der detailseite funktionieren alle
variablen außer:

1
  "lang_category" => $lang['category'],

Weiß jemand woran das liegt?
Sonst klappt das überall


Gruß Jens


Title: Re: [TUT] Tooltip for Thumbnails
Post by: Tino23 on October 20, 2010, 06:48:37 PM
@Benny Links gibts doch noch in den Beiträgen über mir ;-) http://www.4homepages.de/forum/index.php?topic=22030.msg148268#msg148268


Title: Re: [TUT] Tooltip for Thumbnails
Post by: x23piracy on October 20, 2010, 09:47:15 PM
Hi,

weiß jemand wie man den Titel in der wz_tooltip.js dynamisch mit
dem Bildnamen füllen kann? Wie hier zu sehen:

(http://www.xup.in/pic,20979690/temp.png) (http://www.xup.in/dl,20979690/temp.png/)

1
config. Title = 'Preview' // Default title text applied to all tips (no default title: empty string ''

Ich habe bereits {image_name} getestest allerdings wird das als Text interpretiert.

Dann interessiert mich noch wie ich für den Tooltip den Eintrag:

1
Von User: {Name des Users der das Bild hochgeladen hat}

Kann mir da jemand helfen?


Gruß Jens


Title: Re: [TUT] Tooltip for Thumbnails
Post by: Tino23 on October 21, 2010, 08:33:39 PM
Hi, für deine letzte Frage einfach im 4. Teil des MOD ( /includes/page_header.php) zusätzlich noch hinzufügen
1
"lang_added_by" => $lang['added_by'],
und in der thumbnail_bit.html zusätzlich noch folgendes an passender Stelle Einfügen ( Punkt 3 im MOD )
1
<b>{lang_added_by}</b> {user_name}<br />

Für deine erste Frage hab ich auch noch keine Lösung, aber es geht hab ich schon auf anderen Seiten gesehen. Schade bloß das auch für mein obriges Problem noch keine Lösung sich gefunden hat  :(


Title: Re: [TUT] Tooltip for Thumbnails
Post by: x23piracy on October 21, 2010, 10:15:17 PM
Hi, für deine letzte Frage einfach im 4. Teil des MOD ( /includes/page_header.php) zusätzlich noch hinzufügen
1
"lang_added_by" => $lang['added_by'],
und in der thumbnail_bit.html zusätzlich noch folgendes an passender Stelle Einfügen ( Punkt 3 im MOD )
1
{lang_added_by}

Für deine erste Frage hab ich auch noch keine Lösung, aber es geht hab ich schon auf anderen Seiten gesehen. Schade bloß das auch für mein obriges Problem noch keine Lösung sich gefunden hat  :(

Hi,

danke für den Tip bei mir wird leider der Benutzername nicht angezeigt...
im Popup steht nur Added by: welche variable {} hat den benutzer der
den upload getätigt hat? ich hab mal naiv image_added_by probiert...  :mrgreen:


Gruß Jens


Title: Re: [TUT] Tooltip for Thumbnails
Post by: Tino23 on October 22, 2010, 11:22:58 AM
Sorry mein Fehler, hatte noch etwas vergessen. Richtig muß es lauten
1
<b>{lang_added_by}</b> {user_name}<br />


Title: Re: [TUT] Tooltip for Thumbnails
Post by: x23piracy on October 22, 2010, 12:19:38 PM
Sorry mein Fehler hatte noch vergessen. richtig muß es lauten
1
<b>{lang_added_by}</b> {user_name}<br />

Hi,

danke dir da wäre ich nicht drauf gekommen, user_name würde ich
mit dem angemeldeten user in verbindung bringen...

Woher entnehme ich eigentlich die mir zur Verfügung stehenden
Variablen? Wie kann ich für die Zukunft erkennen welche ich nutzen kann?


MfG Jens


Title: Re: [TUT] Tooltip for Thumbnails
Post by: Tino23 on October 23, 2010, 01:44:05 PM
Schau am besten mal in die detail.html dort sind ja schon einige "Beispiele" für Details aufgeführt, die kannst du auch für diesen MOD verwenden.


Title: Re: [TUT] Tooltip for Thumbnails
Post by: x23piracy on October 23, 2010, 02:10:11 PM
Schau am besten mal in die detail.html dort sind ja schon einige "Beispiele" für Details aufgeführt, die kannst du auch für diesen MOD verwenden.

Hi,

danke das schau ich mir an vielleicht finde ich noch was interessantes :)
Was stellst du denn alles in deinem Tooltip dar?

Noch eine andere Frage, ich nutze auch das MOD Media Sites und
habe einige Youtube Videos, bei denen wird aber im Tooltip nicht
der Thumb angezeigt sondern lediglich das Symbol das die Grafik
nicht geladen werden konnte?

Das ist komisch da für den MOD ja auch ganz normal die Thumbnails
generiert werden / wurden... verstehe ich nicht

(http://www.xup.in/pic,22495719/temp.png) (http://www.xup.in/dl,22495719/temp.png/)

Nutzt das jemand in Verbindung mit dem MOD Media Sites und hat
das gleiche Problem?

Kann ich evtl. wie beim MOD Gravatar ein anderes Bild laden
falls das eigentliche nicht funktioniert?


Gruß Jens


Title: Re: [TUT] Tooltip for Thumbnails
Post by: Tino23 on October 24, 2010, 09:52:43 AM
Das ist nicht komisch, da der MOD die Bilder nur im MEDIA_PATH sucht und sonst nirgendst wo anders. Die Vorschaubilder vom MediaMOD sind aber nicht in diesem Ordner, so das sie auch nicht gefunden werden. Das Problem hatte ich schon einmal angesprochen, aber noch keine Antwort erhalten.
http://www.4homepages.de/forum/index.php?topic=22030.msg149866#msg149866 (http://www.4homepages.de/forum/index.php?topic=22030.msg149866#msg149866)


Title: Re: [TUT] Tooltip for Thumbnails
Post by: x23piracy on December 03, 2010, 07:07:09 AM
Hi,

weiß jemand wie man den Titel in der wz_tooltip.js dynamisch mit
dem Bildnamen füllen kann?

ich habe gerade herausgefunden wie es geht: Klick (http://www.himmera.com/Javascript_scripts/Tooltip_Javascript_example_html_css_js_tooltips_JQuery-Tooltip_javascript_and_CSS_JavaScript,_DHTML_Tooltips_WalterZorn.com__9.htm)

Folgendes habe ich hinter das letzte Tip Argument geschrieben:

onmouseover="Tip('{image_tip}...{image_comments}', TITLE, '{image_name}')"

Screenshot:

(http://www.xup.in/pic,11522010/temp1.jpg) (http://www.xup.in/dl,11522010/temp1.jpg/)

@ivan
Maybe you like update your first post with that solution?


Gruß Jens


Title: Re: [TUT] Tooltip for Thumbnails
Post by: Tino23 on December 03, 2010, 08:31:19 PM
Also ich hab mein Problem vom vorherigem Beitrag http://www.4homepages.de/forum/index.php?topic=22030.msg151283#msg151283 (http://www.4homepages.de/forum/index.php?topic=22030.msg151283#msg151283) jetzt auf die einfache weise erst mal gelöst. Ist nicht die beste Lösung, aber sie geht und ich habs einfach nicht auf die reihe sonst bekommen und leider auch keine Antworten erhalten...

ich hab die Language {Tag} einfach nicht Registriet bekommen. Außer bei {lang_comments} da gins von Anfang an....

mini_top_bit.html
1
2
3
4
5
6
7
8
9
10
11
<div align="center">
<table cellpadding="0" cellspacing="0" border="0" width="100%"  align="center">
<tr><td valign="bottom">
<table border="0" cellspacing="0" cellpadding="0" onmouseover="Tip('<b>Kategorie:</b> {cat_name}<br /><b>Datum:</b> {image_date}<br /><b>Hinzugefügt von:</b> {user_name}<br /><b>Hits:</b> {image_hits}<br /><b>Stimme(n):</b> {image_votes}<br /><b>Bewertung:</b> {image_rating}<br /><b>{lang_comments}</b> {image_comments}')" onmouseout="UnTip()">
  <tr>
    <td valign="bottom">{thumbnail}</td>
</tr>
</table>
  {if image_is_new}<sup class="new">{lang_new}</sup>{endif image_is_new}<b>{lang_mini_top_mode}</b>
</td></tr></table>
</div>

Original wenn das mit den Tags geklapt hätte müßte es so lauten
1
2
3
4
5
6
7
8
9
10
<div align="center">
<table cellpadding="0" cellspacing="0" border="0" width="100%"  align="center">
<tr><td valign="bottom">
<table border="0" cellspacing="0" cellpadding="0" onmouseover="Tip('<b>{lang_category}:</b> {cat_name}<br /><b>{lang_date}</b> {image_date}<br /><b>{lang_added_by}:</b> {user_name}<br /><b>{lang_hits}:</b> {image_hits}<br /><b>{lang_votes}:</b> {image_votes}<br /><b>{lang_rating}:</b> {image_rating}<br /><b>{lang_comments}</b> {image_comments}')" onmouseout="UnTip()">
  <tr>
    <td valign="bottom">{thumbnail}</td>
</tr>
</table>
  {if image_is_new}<sup class="new">{lang_new}</sup>{endif image_is_new}<b>{lang_mini_top_mode}</b>
</td></tr></table>


Title: Re: [TUT] Tooltip for Thumbnails
Post by: haider512 on February 18, 2011, 03:41:16 PM
how to download?? not able to download the file from the given link?


Title: Re: [TUT] Tooltip for Thumbnails
Post by: mawenzi on February 18, 2011, 04:45:09 PM
@haider512

... try this ... http://www.4homepages.de/forum/index.php?topic=22030.msg148277#msg148277 ...


Title: Re: [TUT] Tooltip for Thumbnails
Post by: haider512 on February 18, 2011, 09:53:42 PM

i want to do like this..how to make my tooltip looks pretty like this??