4images Modifications / Modifikationen > Tutorials
[TUT] Tooltip for Thumbnails
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
Sunny C.:
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
Sunny C.:
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