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?
- Kopieren der Javascript Dateien z.B. in mytheme/js
- Einbinden der benötigten Javascript Bibliothek (in der View)
- Einbinden eines JavaScript Start-, oder Konfigurationsscripts (in der View)
- 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;
}
?>