Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Forum › Drupalcenter.de › Anfängerfragen ›

Bitte um Hilfe bei der Einbindung von jQuery in Drupal7

Eingetragen von kaffeeholica (5)
am 20.01.2012 - 15:08 Uhr in
  • Anfängerfragen
  • Drupal 7.x

Hallo @ all,

Ich möchte folgendes jQuery in einer /localhost:8888/testsite/node/16 nutzen. Ich habe unter /sites/all/themes/zen/template.php mit drupal_add_js und drupal_add_css die Dateipfade gesetzt. Mein Code sieht am Ende der template.php folgendermaßen aus:

drupal_add_js('sites/all/themes/zen/js/jquery.contentcarousel.js', 'file');
drupal_add_js('sites/all/themes/zen/js/jquery.easing.1.3.js', 'file');
drupal_add_js('sites/all/themes/zen/js/jquery.mousewheel.js', 'file');

drupal_add_css('sites/all/themes/zen/css2/style.css', 'file');
drupal_add_css('sites/all/themes/zen/css2/jquery.jscrollpane.css', 'file');
drupal_add_css('sites/all/themes/zen/css2/reset.css', 'file');

Die Darstellung des Inhalts und die der CSS klappt. Auch zeigt Firebug mir an, dass die *.js & *.css - Dateien laufen.
Das Problem ist, dass keinerlei Interaktion passiert.
Wäre toll wenn ich einen Tip bekommen könnte. Danke !

‹ Filter für den Block "Neuster Inhalt" Auto data insert in list field ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

Hallo, wie es aussieht

Eingetragen von SvenLudwig (149)
am 20.01.2012 - 15:29 Uhr

Hallo,

wie es aussieht bindest Du schonmal die benötigten Bibliotheken für das Contentcarousel ein. Wenn Du es nur nich vergessen hast zu posten, fehlt jedoch noch der eigentliche jQuery-Aufruf, um das Carousel zu initialisieren. Schau mal zum Beispiel in dieses Tutorial: http://tympanus.net/codrops/2011/08/16/circular-content-carousel/

Gruß,
Sven

  • Anmelden oder Registrieren um Kommentare zu schreiben

SvenLudwig schrieb Schau mal

Eingetragen von kaffeeholica (5)
am 20.01.2012 - 15:51 Uhr
SvenLudwig schrieb

Schau mal zum Beispiel in dieses Tutorial: http://tympanus.net/codrops/2011/08/16/circular-content-carousel/

Danke Sven,
genau dieses Tutorial liegt dem zu Grunde. Ich hab die *.js & *.css anscheint richtig eingebunden, da mir firebug sonst nicht die Dateien anzeigen würde. Das Problem des Aufrufs seh' ich auch. Nur kann ich aus dem Tutorial, was du mir gepostet hast nicht ersehen wie ich den Aufruf an Drupal übergeben kann.

  • Anmelden oder Registrieren um Kommentare zu schreiben

Inline oder separate JS-Datei

Eingetragen von SvenLudwig (149)
am 20.01.2012 - 16:09 Uhr

Nun,

du kannst den jQuery-Aufruf für die Initialisierung auch inline per drupal_add_js oder in einer eigenen Javascript-Datei in Dein Theme einbinden.

Tutorials dazu gibt es zum Beispiel hier: http://forward-media.de/tutorial/javascript-richtig-einbinden-0 oder in der Drupal 7 JS-API Dokumentation.

Gruß,
Sven

  • Anmelden oder Registrieren um Kommentare zu schreiben

sind als seperate JS-Dateien eingebunden

Eingetragen von kaffeeholica (5)
am 20.01.2012 - 19:08 Uhr

Habe die JS-Dateien lokal im Ordner liegen und sie den Anleitungen nach in der template.php eingebunden. Über den Node-Body die Div's wie in der HTML gesetzt und auch mit den dazugehörigen css und image-Dateien verknüpft. Hab die Vermutung, dass ich vielleicht die Ausführung per php noch inde node einleiten muss. Oder muss ich die JS-Dateien noch in der theme.info einbinden? Wenn ich das aus den api's richtig entnommen habe, dann entweder in der template.php oder theme.info?!

AnhangGröße
firebug.jpg 111.29 KB
html_css.jpg 71.95 KB
  • Anmelden oder Registrieren um Kommentare zu schreiben

Der Aufruf erfolgt wie

Eingetragen von SteffenR@drupal.org (2262)
am 21.01.2012 - 19:03 Uhr

Der Aufruf erfolgt wie folgt:

JQuery('#ca-container').contentcarousel({
    // speed for the sliding animation
    sliderSpeed     : 500,
    // easing for the sliding animation
    sliderEasing    : 'easeOutExpo',
    // speed for the item animation (open / close)
    itemSpeed       : 500,
    // easing for the item animation (open / close)
    itemEasing      : 'easeOutExpo',
    // number of items to scroll at a time
    scroll          : 1
});

Dies kannst du entweder direkt über drupal_add_js() einbinden oder in eine eigene Javascript Datei, die du dann via drupal_add_js ans Ende deiner JS-Sachen "packst".
Wichtig fürs korrekte Funktionieren ist auch die korrekte HTML-Struktur und die Übergabe der korrekten IDs.

SteffenR

  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • für drupal11 ein Slider Modul
  • [gelöst] W3CSS Paragraphs Views
  • Drupal 11 neu aufsetzen und Bereiche aus 10 importieren
  • Wie erlaubt man neuen Benutzern auf die Resetseite zugreifen zu dürfen.
  • [gelöst] Anzeigeformat Text mit Bild in einem Artikel, Drupal 11
  • Social Media Buttons um Insteragram erweitern
  • Nach Installation der neuesten D10-Version kein Zugriff auf Website
  • Composer nach Umzug
  • [gelöst] Taxonomie Begriffe zeigt nicht alle Nodes an
  • Drupal 11 + Experience Builder (Canvas) + Layout Builder
  • Welche KI verwendet ihr?
  • Update Manger läst sich nicht Installieren
Weiter

Neue Kommentare

  • melde mich mal wieder, da ich
    vor 1 Woche 4 Tagen
  • Hey danke
    vor 1 Woche 5 Tagen
  • Update: jetzt gibt's ein
    vor 1 Woche 5 Tagen
  • Hallo, im Prinzip habe ich
    vor 2 Wochen 3 Tagen
  • Da scheint die Terminologie
    vor 2 Wochen 3 Tagen
  • Kannst doch auch alles direkt
    vor 3 Wochen 15 Stunden
  • In der entsprechenden View
    vor 3 Wochen 15 Stunden
  • Dazu müsstest Du vermutlich
    vor 3 Wochen 15 Stunden
  • gelöst
    vor 5 Wochen 4 Tagen
  • Ja natürlich. Dass ist etwas,
    vor 5 Wochen 5 Tagen

Statistik

Beiträge im Forum: 250233
Registrierte User: 20451

Neue User:

  • Mroppoofpaync
  • 4aficiona2
  • AppBuilder

» Alle User anzeigen

User nach Punkten sortiert:
wla9461
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3924
ronald3857
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 11 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