4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
May 28, 2018, 07:28:47 AM

Login with username, password and session length
Search:     Advanced search
Togle to toolbar
Translate this page with =>
Translate this page >
* Home Help Search Login Register
 
+  4images Forum & Community
|-+  4images Modifications / Modifikationen
| |-+  Mods & Plugins (Releases & Support)
| | |-+  Tutorials (Moderators: mawenzi, Rembrandt)
| | | |-+  [TUT] Tooltip for Thumbnails
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] 2 3 4 5 6 » »» Print
Current Topic Rating: ****
Author Topic: [TUT] Tooltip for Thumbnails  (Read 113081 times)
ivan
4images Moderator
4images Guru
*****
Offline Offline

Posts: 2279

Thank You
-Given: 4
-Receive: 31


View Profile WWW
« on: June 27, 2008, 06:30:47 PM »

- zunächst einmal nur in deutsch ...
- a englisch version is coming soon ... or later ...  Wink ... 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
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
[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

* Beispiel 4images.gif (29.85 KB - downloaded 617 times.)
* Beispiel Walter Zorn.gif (16.77 KB - downloaded 397 times.)
« Last Edit: June 16, 2010, 06:56:56 PM by ivan » Logged

greetings / grüsse
ivan

Facebook Fan Page | Follow Twitter

Blog: Reisen Blog
Bilder Gallery: Bilder Gallery
asms
Full Member
***
Offline Offline

Posts: 154

Thank You
-Given: 3
-Receive: 3


View Profile
« Reply #1 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
Logged
Sumale.my
Addicted member
******
Offline Offline

Posts: 1769

Thank You
-Given: 168
-Receive: 83

Neverdie


View Profile
« Reply #2 on: June 27, 2008, 07:23:13 PM »

Super! Klasse, danke dir!
Sowas habe ich gesucht und nun ist es da Very Happy!!!!!

Perfekt!

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

LG
Phisker
Logged
ivan
4images Moderator
4images Guru
*****
Offline Offline

Posts: 2279

Thank You
-Given: 4
-Receive: 31


View Profile WWW
« Reply #3 on: June 27, 2008, 07:24:10 PM »

Leider nein...

Gruss ivan
Logged

greetings / grüsse
ivan

Facebook Fan Page | Follow Twitter

Blog: Reisen Blog
Bilder Gallery: Bilder Gallery
Sumale.my
Addicted member
******
Offline Offline

Posts: 1769

Thank You
-Given: 168
-Receive: 83

Neverdie


View Profile
« Reply #4 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?
Logged
Jan-Lukas
Addicted member
******
Offline Offline

Posts: 1278

Thank You
-Given: 153
-Receive: 48


View Profile WWW
« Reply #5 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 » Logged

Danke Harald



Sumale.my
Addicted member
******
Offline Offline

Posts: 1769

Thank You
-Given: 168
-Receive: 83

Neverdie


View Profile
« Reply #6 on: June 27, 2008, 08:47:19 PM »

Wirklich?
Liegt aber doch nicht daran oder? Kann ich mir nicht vorstellen!
Logged
Jan-Lukas
Addicted member
******
Offline Offline

Posts: 1278

Thank You
-Given: 153
-Receive: 48


View Profile WWW
« Reply #7 on: June 27, 2008, 08:48:51 PM »

dann muss ich wohl lügen   Question
ausgebaut, und die Seite läuft wieder, also liegt es daran  Wink
Logged

Danke Harald



Sumale.my
Addicted member
******
Offline Offline

Posts: 1769

Thank You
-Given: 168
-Receive: 83

Neverdie


View Profile
« Reply #8 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!
Logged
Jan-Lukas
Addicted member
******
Offline Offline

Posts: 1278

Thank You
-Given: 153
-Receive: 48


View Profile WWW
« Reply #9 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.
Logged

Danke Harald



JohnSmith79
Pre-Newbie

Offline Offline

Posts: 4

Thank You
-Given: 0
-Receive: 0


View Profile
« Reply #10 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
Logged
JohnSmith79
Pre-Newbie

Offline Offline

Posts: 4

Thank You
-Given: 0
-Receive: 0


View Profile
« Reply #11 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
Logged
mawenzi
Moderator
4images Guru
*****
Offline Offline

Posts: 4500

Thank You
-Given: 36
-Receive: 121


View Profile
« Reply #12 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 ...
Logged

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) ...
Omsky
Newbie
*
Offline Offline

Posts: 42

Thank You
-Given: 0
-Receive: 1


View Profile
« Reply #13 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



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?
Logged
mawenzi
Moderator
4images Guru
*****
Offline Offline

Posts: 4500

Thank You
-Given: 36
-Receive: 121


View Profile
« Reply #14 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 ....
Logged

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) ...
Pages: [1] 2 3 4 5 6 » »» Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.182 seconds with 21 queries.
Post your comments here