Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Forum › Drupalcenter.de › Module ›

[gelöst]Benötige Hilfe bei einer mouseover-Anzeige

Eingetragen von Leeroy (14)
am 03.11.2015 - 19:23 Uhr in
  • Module
  • Drupal 7.x

Hi,
Ich bin neu hier und hoffe, dass ich das richtige Forum gewählt habe.

Also folgender Sachverhalt:
Ich habe überall auf meiner Seite verteilt Links, die beim draufklicken ein Bild in einem Overlay anzeigen (Ich benutze dafür das Modul colorbox)
Diese Links sehen so aus:

<a class="colorbox-load" href="http://adresse.zum/bild.png">Text</a>

Das funktioniert auch wunderbar. Jetzt hätte ich jedoch gerne zusätzlich, dass beim Mouseover über den Text bereits eine verkleinerte Version des Bildes eingeblendet wird. Und daran verzweifle ich gerade, da ich leider auch nur sehr rudimentäre Grundkenntnisse in html und php habe.

Ich bin so weit gekommen, dass ich weiss, dass folgende Module mein Problem lösen können sollten:
https://www.drupal.org/project/qtip
https://www.drupal.org/project/beautytips
Jedoch bin ich offensichtlich zu dumm um zu verstehen, wie ich diese Module denn tatsächlich nutze.

Ich habe versucht mir Tutorialvideos zu diesen Modulen anzusehen, jedoch verstehe ich leider nicht genug davon, um es für meine Zwecke umzusetzen.

Ich hoffe, dass mir hier jemand helfen kann, das ganze möglichst simpel zu lösen.

Nochmal in Kurzform:
Auf meiner gesammten Seite sind in den verschiedenen Artikeln links zu BIldern wie oben im Code angegeben und ich suche nach einer Möglichkeit, dass beim Bewegen der Maus über diese Links das Bild bereits in einer verkleinerten Version angezeigt wird.

‹ Taxonomy Menu funktioniert nicht (findet eine Menge an Klassen nicht) [gelöst]Benötige Hilfe bei einer mouseover-Anzeige ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

Im Prinzip genauso wie colorbox mMn

Eingetragen von maen (547)
am 03.11.2015 - 20:29 Uhr

Sieht aus als solltest Du qtip mit der ajax Option benutzen. Nach der Installation müsstest Du theoretisch die Inhalte erstellen, die angezeigt werden sollen, und zusätzlich zur colorbox css Klasse noch die qtip Klasse mitgeben.

Müsste eigentlich nicht stören, da colorbox auf onclick und qtip wahrscheinlich auf den hover reagiert!?

  • Anmelden oder Registrieren um Kommentare zu schreiben

Ich kann mit deiner Antwort

Eingetragen von Leeroy (14)
am 04.11.2015 - 08:04 Uhr

Ich kann mit deiner Antwort leider wenig anfangen, da mir wahrscheinlich wichtige Grundlagenkentnisse fehlen um sie zu richtig verstehen.
Ich habe eine qtip instance mit dem Namen tooltip erstellt und dort eingestellt, dass es bei Hover aktiviert werden soll.

wo vorher folgendes stand:

<a class="colorbox-load" href="http://adresse.zum/bild.png">Text</a>

habe ich jetzt tooltip als Klasse hinzugefügt:

<a class="colorbox-load tooltip" href="http://adresse.zum/bild.png">Text</a>

Dabei passiert jedoch garnichts. Auch wenn ich das colorbox-load komplett entferne, passiert beim mouseover nichts.

  • Anmelden oder Registrieren um Kommentare zu schreiben

Das jquery update ist

Eingetragen von maen (547)
am 04.11.2015 - 09:14 Uhr

Das jquery update ist drinnen?

Ich habe im Moment leider keine Zeit das qtip zu testen. Aber ich hatte mir ehrlich gesagt vorgestellt, dass der Ansatz

<a class="colorbox-load tooltip" href="http://adresse.zum/bild.png">Text</a>

funktionieren sollte. Auf jeden Fall bist Du auf der richtigen Spur!

  • Anmelden oder Registrieren um Kommentare zu schreiben

Ja, das jquery update Modul

Eingetragen von Leeroy (14)
am 04.11.2015 - 10:18 Uhr

Ja, das jquery update Modul ist installiert und aktiviert.

Ich werde mal noch weiter rumprobieren. Falls jemand noch Ideen haben sollte, nur zu, ich bin für jede Hilfe dankbar.

  • Anmelden oder Registrieren um Kommentare zu schreiben

Also wieso qtip ohne weitere

Eingetragen von Stefan.Korn (286)
am 04.11.2015 - 10:52 Uhr

Also wieso qtip ohne weitere Konfiguration auf die Klasse tooltip reagieren soll, erschließt sich mir weder aus der Modul-Dokumentation (http://cgit.drupalcode.org/qtip/tree/README.txt) noch aus der qtip-Doku (http://qtip2.com/guides)? Oder habe ich da was übersehen?

Bei der Modul-Doku lese ich eigentlich nur das qtip als Textfilter verwendet werden kann. Ob Du das so benutzen kannst hängt sicherlich davon ab wie Deine Links erzeugt werden.

Wenn es mit dem Modul nicht klappt könntest Du ja auch versuchen qtip ohne Modul direkt einzubinden, unter http://qtip2.com/guides ist ja auch schon ein entsprechendes Drupal-Snippet vorhanden. Und dann könnte es bei entsprechender Konfiguration vielleicht auch mit der Klasse "tooltip" klappen.

  • Anmelden oder Registrieren um Kommentare zu schreiben

Nunja, auf diese Weise

Eingetragen von Leeroy (14)
am 04.11.2015 - 22:54 Uhr

Nunja, auf diese Weise probiert hatte ich es ja erst, nachdem mir hier gesagt wurde, dass es so ähnlich funktionieren sollte wie colorbox. Und da ich in qtip eine 'instance' (so heisst das im Konfigurationsmenu) mit dem namen tooltip erstellt habe, welche Einstellungen für das aussehen und das triggern des qtips beinhaltet, hätte es ja durchaus sein können, dass ich damit eine entsprechende Klasse erstellt habe.

Mein größtes Problem ist wie weiter oben schon erwähnt wohl, dass ich nur grobe Grundkentnisse in html und php habe und daher überfordert damit bin, wie ich qtip oder auch beautytips denn in meine Seite integriere. Bisher kam ich dank CKEditor und diversen Modulen, welche vieles erleichtern, gut ohne weiterführende Kenntnisse klar, jedoch versage ich gerade an den Mouseoverbildern, da es kein Modul gibt, welches dieses in einer für mich simpel verständlichen Weise integriert. Und die 'Dokumentation' von qtip ist leider so lächerlich kurz, dass sie mir einfach nicht reicht um zu verstehen, wie genau ich es benutze.
Ich versuche mich gerade erstmal daran, allgemein zu verstehen, wie ich javascript in drupal einfüge ( https://www.drupal.org/node/304255 ) und hoffe, dass ich dannach in der Lage sein werde, das Modul auch zu nutzen.

  • Anmelden oder Registrieren um Kommentare zu schreiben

Verwende qTip2!

Eingetragen von Ionit (1774)
am 04.11.2015 - 23:54 Uhr

Verwende qTip2! http://qtip2.com

Ich nutze das bei mir (ohne extra Modul) und damit kannst Du wirklich alles machen!

http://qtip2.com/demos
http://qtip2.com/guides
http://qtip2.com/options

qTip2 ist sehr mächtig und dafür brauchst Du auch etwas Zeit um Dich einzuarbeiten aber es lohnt sich.

Wie das genau zu verwenden ist, lies Dir die Doku durch (sehr umfangreich) und schau Dir die Demos an (und den Quelltext dazu).

Ich habe auch eine Weile gebraucht um damit klarzukommen aber qTip2 ist das beste was man zur Zeit finden kann!

Ob Text, Grafik oder LInk .... egal wo Du willst, kannst Du Deinen eigenen Bubbles triggern lassen und in den Bubbles kannst Du alles mögliche einbinden .... Bilder, CSS-Tags zum Formatieren ... Du kannst das mit Ajax laden (wenn Du willst) usw ...

Drupal rockt!!!

  • Anmelden oder Registrieren um Kommentare zu schreiben

Bin ein Stück weiter

Eingetragen von Leeroy (14)
am 17.11.2015 - 12:55 Uhr

Bin ein Stück weiter gekommen, hänge jetzt aber trotzdem fest.

Ich habe nun das Modul beautytips benutzt, da ich dessen Dokumentation noch am besten verstand. ( http://cgit.drupalcode.org/beautytips/tree/README.txt?id=HEAD )

Normale Text-Tooltips funktionieren einwandfrei. Ich schaffe es jedoch nicht, das Bild anzeigen zu lassen.

In meiner template.php habe ich folgendes im preprocessblock hinzugefuegt (noch keinerlei einstellungen fuer den tooltip, da er erstmal nur funktionieren soll):

if(module_exists('beautytips') ) {
    $options['tooltips'] = array(
      'cssSelect' => '.colorbox-load',
      'text' => 'Testtooltiptext',
    );
    beautytips_add_beautytips($options);
   }

Das funktioniert soweit auch wie gesagt. Wenn ich jetzt jedoch statt der 'text'-Zeile folgende Zeile verwende:
'ajaxPath' => '$(this).attr("href")',

steht in der Tooltipblase: ERROR: Not Found

Ich dachte eigentlich, dass er dann die Seite aus dem href anzeigen würde, aber irgendwo habe ich da offensichtlich einen Denkfehler.

Achja und falls es hilft. Wenn ich stattdessen:

'contentSelector' => '$(this).attr("href")',

eingebe, dann zeigt er mir die URL zum Bild als tooltip an. Das heisst, dass er das href eigentlich auslesen kann und ich dachte ajaxpath zeigt es dann auch an, tut es aber scheinbar nicht.
Wär super, wenn mir da jemand auf die Sprünge helfen könnte.

Nochmal zur Erinnerung.
Der html Teil sieht so aus:

<a class="colorbox-load" href="http://adresse.zum/bild.png">Text</a>

  • Anmelden oder Registrieren um Kommentare zu schreiben

Noch ein Update

Eingetragen von Leeroy (14)
am 18.11.2015 - 12:43 Uhr

Noch ein Update

Ich habe bemerkt, dass ich ajaxPath eventuell garnicht brauche, da html ja auch im 'text' funktioniert.
Wenn ich jetzt manuell

'text' => '<img src="http://adresse.zum/bild.png" height="197" width="200">',

eingebe, funktioniert das wunderbar und zeigt mein Bild auch an. Problem ist nur, dass dann ja nicht das Bild aus dem href ausgelesen wird, sondern er für alle das gleiche Bild benutzt. Nun bin ich zu dumm, um das Bild aus dem href da reinzubekommen.
'text' => '<img src="'.'$(this).attr("href")'.'" height="197" width="200">',

funktioniert nicht, weil er dabei nicht das href ausliest, sondern '$(this).attr("href")' direkt als String wiedergibt, was dann natuerlich keine gueltige url ist.
Wenn ich jetzt wüsste, wie ich das href auslesen und in den string einfügen kann, wäre mein Problem erledigt.
Jemand Ideen?

  • Anmelden oder Registrieren um Kommentare zu schreiben

Lösung

Eingetragen von Leeroy (14)
am 21.11.2015 - 22:28 Uhr

Hab das ganze fuer mich jetzt gelöst.

'text' gibt nur strings wieder ist aber nicht in der Lage scripts zu nutzen um die url auszunutzen.
'contentSelector' => t('"<img src=\"" + $(this).attr("href") + "\" height=\"197\" width=\"220\">"'),
So funktioniert es.

  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • Wer ist online Block
  • Doppelte Anzeige von Node im View
  • Content Ex-/Import
  • URL-Alias von bestehendem Link wird gelöscht und auf -0 gesetzt 404 Fehler entsteht
  • Ausblenden von Taxonomy wenn diese keinen Inhalt haben
  • Image als Anhang
  • [gelöst] Benutzer erstellen ohne Berechtigung zum ändern von E-Mail oder Passwort
  • HTTP ERROR 500, wenn der Node eines bestimmten Typs gespeichert wird oder ein neuer Inhalt dieses Typs erzeugt werden soll
  • Module modifizieren zb Statuses
  • Exposed Filter einer View in seperatem Block darstellen, wie kann ich die exposed Filter der zug. View deaktivieren
  • Website ohne öffentlichen Zugriff
  • »Geschwister« Nodes anzeigen
Weiter

Neue Kommentare

  • dinmikkith schrieb Ja du hast
    vor 1 Tag 13 Stunden
  • SaarlandToday schrieb Es gibt
    vor 1 Tag 21 Stunden
  • ich hab das Problem gefunden!
    vor 1 Tag 22 Stunden
  • Sorry, das mit dem Theme war
    vor 1 Tag 22 Stunden
  • Zitat: Es gibt in den
    vor 1 Tag 23 Stunden
  • Es gibt in dem Template das
    vor 2 Tagen 9 Stunden
  • Zitat: da es dort eine
    vor 2 Tagen 10 Stunden
  • Sorry, dachte das ich das
    vor 2 Tagen 12 Stunden
  • Ich habe den Fehler gemacht
    vor 2 Tagen 13 Stunden
  • Kein zusätzliches Modul nötig
    vor 2 Tagen 14 Stunden

Statistik

Beiträge im Forum: 245939
Registrierte User: 18824

Neue User:

  • Damian1802
  • MrWebMV
  • kiba

» Alle User anzeigen

User nach Punkten sortiert:
wla9007
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3916
ronald3829
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 4 Gäste online.

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association