Einbindung von JavaScript Bibliotheken in Drupal 7

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
You are viewing a wiki page. You are welcome to join the group and then edit it. Be bold!

Einbindung von JavaScript Bibliotheken in Drupal 7

Was möchte ich?

  • Inhaltsypen (zB Fotoalbum) verwenden
  • Ausgabe über Views und dabei
  • JavaScript Bibliotheken wie zB. 3D Carousel, Mansory, Slider, ... nutzen

Was ist zu tun?

  1. Kopieren der Javascript Dateien z.B. in mytheme/js
  2. Einbinden der benötigten Javascript Bibliothek (in der View)
  3. Einbinden eines JavaScript Start-, oder Konfigurationsscripts (in der View)
  4. Erzeugung der entsprechenden DIV-Klassen und Tags (View und oder template Datei)

Hier am Beispiel 3D Carousel

Beispiel HTML für 3D Carousel (http://www.professorcloud.com/mainsite/carousel-integration.htm)

<?php
   
echo '<img class = "cloudcarousel" src="'.base_path().'sites/default/files/pics/pic-1.jpg" alt="" title="" />';
    echo
'<img class = "cloudcarousel" src="'.base_path().'sites/default/files/pics/pic-2.jpg" alt="" title="" />';
   
 
?>

Was ist in Drupal zu tun?

1. Kopieren der Javascript Dateien z.B. in mytheme/js

2. Einbinden der benötigten Javascript Bibliothek und 3. des Konfigurationsscripts (in der View)

Einbinden z.B. im Kopfbereich der View als Textarea mit Textformat PHP Code
(wenn nur der Website admin darauf Zugriff hat)

<?php
  $options
= array( 'group' => JS_THEME, );
 
drupal_add_js(drupal_get_path('theme', 'dmt'). '/js/cloud-carousel.1.0.5.js', $options);
 
drupal_add_js(drupal_get_path('theme', 'dmt'). '/js/carousel-1.js', $options);
?>

4. Erzeugung der notwendigen DIV-Klassen und Tags (View und oder template Datei)

Für das 3D Carousel muss dem img Tag die Klasse "cloudcarousel" hinzugefügt werden, das geht
leider in der View nicht, deshalb ist ein template File (mytheme/templates/views-view-fields--carousel.tpl.php)
mit folgendem Inhalt notwendig:

<?php

foreach ($fields as $id => $field) {
 
$showimage = str_replace('<img ','<img class="cloudcarousel" ', $field->content);
  print
$showimage;
}
?>

München

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: