Eigenes Javascript für einen View verwenden
Eingetragen von maria-rita (504)am 19.03.2015 - 09:48 Uhr in
Hallo zusammen,
heute habe ich einmal eine Verständnisfrage, weil ich das noch nie gemacht habe.
Ich möchte eine Slideshow machen mit Views. Das ist soweit ja kein Problem. Ich habe jetzt aber einen eigenen Javascript und css dafür die ich für die Ausgabe verwenden möchte.
Ich habe die javascript-Datei und die css-Datei schon in die Info-Datei des Themes eingebunden. Nur wie kommt das dann zusammen, das ist mir nicht so klar.
Muss ich den javascript-Datei eigentlich noch in das Modul Javascript Libraries hinzufügen?
Es wäre sehr nett, wenn Ihr mir da weiterhelfen könntet?
Viele Grüße
Marita Betz
- Anmelden oder Registrieren um Kommentare zu schreiben
maria-rita schrieb Nur wie
am 19.03.2015 - 10:13 Uhr
Nur wie kommt das dann zusammen, das ist mir nicht so klar.
Wenn du die JS Datei per .info im Theme einbindest, importiert Drupal das Script sitewide in den HTML Head- Bereich, wo es vom Browser interpretiert werden kann. Nein, extra in eine Library brauchst du nix mehr einbinden.
Wenn du das JS nur unter einer oder einigen wenigen URL's brauchst, kannst du es auch per hook_init() einbinden, dann wird es nicht bei jedem Seitenaufruf geladen. Beispiel:
<?phpfunction MYMODULE_init() {
if(arg(0) == 'mein_url_bestandteil') {
drupal_add_js('/sites/default/modules/meine_slideshow/meine_slideshow.js', 'file');
}
}
?>
Danke für die Antwort.
am 22.03.2015 - 12:38 Uhr
Hallo Glycid,
wie kann ich die Javascript-Datei in den view einbinden und die CSS-Klassen im View so ändern, dass Sie mit den Klassennamen zusammen passen die in der CSS-Datei sind.
Die css-Datei und die javascript-Datei sind für eine Slideshow.
Wenn ich jetzt ganz normal einen View baue mit einer Slideshow z.B. mit dem Modul views-slideshow und Views Slideshow: cycle dann wird da ja andere CSS-Klassen, Ids und javascript verwendet.
Wie kann man sicherstellen in Drupal, dass die eigene CSS-Klassen und die dafür vorgesehene Javascript-Code für die Slideshow verwendet wird.
Gibt es da überhaupt die Möglichkeit das über Views zu machen oder muss man da anders rangehen.
Viele herzliche Grüße
Marita Betz
Barrierefreies Webdesign
Marita Betz
http://www.barrierefreies-webdesign-mb.de
Hier gibt es Möglichkeiten -
am 22.03.2015 - 14:42 Uhr
Hier gibt es Möglichkeiten - nur solltest du dann vielleicht nicht unbedingt direkt auf Views Slideshow setzen. Dieses Modul schreibt dir den Views Output genau für das "mitgelieferte" Javascript um - sprich die Klassen etc. werden über das Style-Plugin entsprechend gesetzt.
Wenn du nun eine eigene Slideshow mit eigenem Javascript umsetzen möchtest, gibt es 3 Möglichkeiten
01) Suche nach einem passendem Modul, welches dir das jQuery Plugin zur Verfügung stellt - wichtig hierbei die Views Integration
02) Entwicklung eines eigenen Moduls auf Basis von Views Slideshow oder eines anderen Slideshow Moduls
03) Views Output entsprechend anpassen / Zufügen der nötigen Styles & Javascripts über dein Theme
Möglichkeit 3 möchte ich hier ein wenig näher erläutern. In Views gibt es die Möglichkeit für jede Ebene eigene CSS Klassen und/oder IDs zu hinterlegen. Bei der Ausgabe über Fields kannst du dies in den Design Einstellungen der Felder festlegen.
Screenshot (Klick auf der Bild zeigt vergrößerte Ansicht):
Gleiches gilt für die Zeilen eines Views - auch hier kann eine eigene Klasse hinzugefügt werden.
Screenshot (Klick auf der Bild zeigt vergrößerte Ansicht):
Die Klassen / IDs lassen sich natürlich auch direkt "hart" in den Views Templates setzen - hier hättest du dann auch die volle Kontrolle über die Ausgabe der einzelnen Bestandteile des Views (Global, Zeilen, Felder, einzelnes Feld). Ähnlich verhält sich das Ganze auch beim Einsatz von View-Modes in der Views-Ausgabe - mit der Ausnahme, dass du hier das Styling des Ergebnisses im Content Typ selbst festlegest und nicht im View (hier würde man dann nur eine Liste mit fertig gerenderten Inhalten ausgeben).
Doch nun zum Javascript und CSS - dies solltest du über eine Preprocess Funktion hinzufügen. Der hook_init ist hierfür der falsche Ort.
<?php
function THEME_preprocess_views_view(&$vars) {
$view = &$vars['view'];
// Make sure it's the correct view
if ($view->name == 'your-view-name' && $view->current_display == 'your-display-id') {
// Add jquery Plugin - single file.
drupal_add_js(drupal_get_path('theme', 'your-theme') . '/lib/jquery.slideshow.js');
// Add jquery Plugin - library.
libraries_load('my_custom_library');
// Add custom javascript.
drupal_add_js(drupal_get_path('theme', 'your-theme') . '/your-js.js');
// Add custom stylesheet.
drupal_add_css(drupal_get_path('theme', 'your-theme') .'/your-css.css');
}
}
?>
Je nach eingesetztem Slideshow / jQuery Plugin, müsstest du dies hier natürlich auch noch vorher einbinden / laden lassen. Die Initialisierung des Plugins würde im Beispiel dann in der Datei your-js.js erfolgen.
Falls das jQuery Plugin über mehrere Dateien - also auch CSS / Bilder etc. - verfügt, solltest du dies über den hook_library nutzen und dann per libraries_load einbinden.
Weitere Infos dazu: http://atendesigngroup.com/blog/adding-js-libraries-drupal-project-libra...
SteffenR
http://www.twitter.com/_steffenr
Drupal-Initiative e.V.