Author Topic: [TUT] Tooltip for Thumbnails  (Read 151948 times)

0 Members and 1 Guest are viewing this topic.

bildergallery

  • Guest
[TUT] Tooltip for Thumbnails
« on: June 27, 2008, 06:30:47 PM »
- zunächst einmal nur in deutsch ...
- a englisch version is coming soon ... or later ...  ;) ... meanwhile use this  English-Google-Translation ...
     - 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
-Extrahiere den Ordner.
-Kopiere wz_tooltip.js in den Root (Hauptordner) von 4images

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

ersetze durch
Code: [Select]
<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
Code: [Select]
{thumbnail}<br />
ersetze durch
Code: [Select]
<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
Code: [Select]
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
Code: [Select]
$site_template->register_vars(array(
  "lang_site_stats" => $lang['site_stats'],

ersetze mit
Code: [Select]
$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
Code: [Select]
//===================  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
[EN] Help und Extensions


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
« Last Edit: June 16, 2010, 06:56:56 PM by ivan »

Offline asms

  • Full Member
  • ***
  • Posts: 154
    • View Profile
Re: [TUT] Tooltip in Thumbnails
« Reply #1 on: June 27, 2008, 06:45:38 PM »
/templates/default/page_header.html
to
/templates/default/header.html
Quote
2) öffne /templates/default/page_header.html
suche
yas or no

Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.804
  • I ♥ 4I
    • View Profile
Re: [TUT] Tooltip in Thumbnails
« Reply #2 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

Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.804
  • I ♥ 4I
    • View Profile
Re: [TUT] Tooltip in Thumbnails
« Reply #3 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:

Code: [Select]
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

Code: [Select]
{template_url}/js/tip_balloon/ geht nicht!

auch nicht wenn ich direkt:
Code: [Select]
/tip_balloon/ oder tip_ballooneingebe

Woran liegt das?

Offline Jan-Lukas

  • Addicted member
  • ******
  • Posts: 1.288
    • View Profile
    • Discover the New World of Kindersurprise
Re: [TUT] Tooltip in Thumbnails
« Reply #4 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.
« Last Edit: June 27, 2008, 08:35:48 PM by Jan-Lukas »
Danke Harald




Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.804
  • I ♥ 4I
    • View Profile
Re: [TUT] Tooltip in Thumbnails
« Reply #5 on: June 27, 2008, 08:47:19 PM »
Wirklich?
Liegt aber doch nicht daran oder? Kann ich mir nicht vorstellen!

Offline Jan-Lukas

  • Addicted member
  • ******
  • Posts: 1.288
    • View Profile
    • Discover the New World of Kindersurprise
Re: [TUT] Tooltip in Thumbnails
« Reply #6 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:
Danke Harald




Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.804
  • I ♥ 4I
    • View Profile
Re: [TUT] Tooltip in Thumbnails
« Reply #7 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!

Offline Jan-Lukas

  • Addicted member
  • ******
  • Posts: 1.288
    • View Profile
    • Discover the New World of Kindersurprise
Re: [TUT] Tooltip in Thumbnails
« Reply #8 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.
Danke Harald




Offline JohnSmith79

  • Pre-Newbie
  • Posts: 4
    • View Profile
Re: [TUT] Tooltip in Thumbnails
« Reply #9 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

Offline JohnSmith79

  • Pre-Newbie
  • Posts: 4
    • View Profile
Re: [TUT] Tooltip in Thumbnails
« Reply #10 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

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: [TUT] Tooltip for Thumbnails
« Reply #11 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 ...
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

Offline Omsky

  • Newbie
  • *
  • Posts: 42
    • View Profile
Re: [TUT] Tooltip for Thumbnails
« Reply #12 on: July 30, 2008, 02:49:49 PM »
hi.
i install this mod, worked

and i modifed thumbnail_bit.html

change code
Code: [Select]
onmouseover="Tip('{image_name}<br />{lang_category} {cat_name}<br />{lang_comments} {image_comments}')" onmouseout="UnTip()">
on

Code: [Select]
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



and



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?

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: [TUT] Tooltip for Thumbnails
« Reply #13 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 ....
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

Offline Omsky

  • Newbie
  • *
  • Posts: 42
    • View Profile
Re: [TUT] Tooltip for Thumbnails
« Reply #14 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
page_header.php
thumbnail_bit.html


show example for one language plz