4images Modifications / Modifikationen > Tutorials

[TUT] Tooltip for Thumbnails

(1/15) > >>

bildergallery:
- 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: ---<body bgcolor="#FFFFFF" text="#0F5475" link="#0F5475" vlink="#0F5475" alink="#0F5475">
<br />
--- End code ---

ersetze durch

--- Code: ---<body bgcolor="#FFFFFF" text="#0F5475" link="#0F5475" vlink="#0F5475" alink="#0F5475">
<script type="text/javascript" src="wz_tooltip.js"></script>
<br />
--- End code ---

3) öffne /templates/default/thumbnail_bit.html
suche

--- Code: ---{thumbnail}<br />
--- End code ---

ersetze durch

--- Code: ---<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>
--- End code ---


Beispiel mit Bild Namen, Kategorie und Kommentare

--- Code: ---onmouseover="Tip('{image_name}<br />{lang_category} {cat_name}<br />{lang_comments} {image_comments}')" onmouseout="UnTip()"
--- End code ---


* <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: ---$site_template->register_vars(array(
  "lang_site_stats" => $lang['site_stats'],
--- End code ---

ersetze mit

--- Code: ---$site_template->register_vars(array(
  "lang_site_stats" => $lang['site_stats'],
  "lang_category" => $lang['category'],
--- End code ---

Konfiguration des Tooltips
5) öffne /wz_tooltip.js
suche zwischen diesen Zeilen und konfiguriere es nach Deinen Wünschen

--- Code: ---//===================  GLOBAL TOOPTIP CONFIGURATION  =========================//

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

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

asms:
/templates/default/page_header.html
to
/templates/default/header.html

--- Quote ---2) öffne /templates/default/page_header.html
suche
--- End quote ---
yas or no

qBass17:
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

qBass17:
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: ---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.
--- End code ---

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

Also


--- Code: ---{template_url}/js/tip_balloon/
--- End code ---
geht nicht!

auch nicht wenn ich direkt:

--- Code: ---/tip_balloon/ oder tip_balloon
--- End code ---
eingebe

Woran liegt das?

Jan-Lukas:
hmm, läuft super, aber sehr lange Ladezeiten ?


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

Navigation

[0] Message Index

[#] Next page

Go to full version