Eine einfache Möglichkeit in Drupal Popup-Fenster zu erzeugen, bietet das Drupal-Modul Colorbox, das auf dem gleichnamigen jQuery-Plugin basiert.
Dies wird in folgendem Beispiel anhand eines einfachen Szenarios gezeigt.
Ein Drupal-Modul erzeugt eine Liste von Daten mit Geokoordinaten auf einer Drupal-Seite. Diese Liste besteht aus einzelnen Links, die zum Beispiel folgendermaßen aufgebaut sind:
...
$lon = ...
$lat = ...
$link = "
<a href='/point/131'>Location xy</a>
 <small>(<a href=\"javascript: showLocationOnMap($lon, $lat); \">Map</a>)</small>
";
...Außerdem haben wir mit dem Modul OpenLayers eine Karte in die Seite eingebunden. Dies soll hier nicht näher erläutert werden. Wichtig ist nur, dass diese Karte über einen Selektor für jQuery erreichbar ist.
In diesem Beispiel ist der Selector für die OpenLayers-Karte ".view-openlayers-example-map-display-view .view-content". Der Drupal-Experte erkennt an diesem Selektor, dass die Karte per View erzeugt wurde und z.B. in ein Panel-Pane eingebettet ist.
Die Karte sollte zunächst sichtbar sein, was am Schluß dieses Artikels noch genauer begründet wird. Man sollte nicht der naheliegenden Idee folgen, z.B. das Pane auf invisible einzustellen.
Wir können also davon ausgehen, dass wir jetzt eine sichtbare Welt-Karte auf der Seite finden, und zwar unter einem definierten Selector, und wir wollen diese Karte mit der Funktion showLocationOnMap() in einem Colorbox-Popup sichtbar machen.
Dazu benötigen wir jetzt den hook_preprocess_page() in unserem Modul und bauen dort unsere Funktion ein.
/**
* Implements hook_preprocess_page
*
* @param array $vars (call by ref)
* The variables array (modify in place)
*
* @return void
*/
function coolfindcomm_preprocess_page(&$vars) {
drupal_add_js('var $ = jQuery;', 'inline');
drupal_add_js(""
. "function showLocationOnMap(lon, lat) {"
. ' $.colorbox({inline:true, width:"98%", href:".view-openlayers-example-map-display-view .view-content"});'
. " var ol = $('#openlayers-map').data('openlayers'); "
. " var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection('EPSG:4326'), ol.openlayers.getProjectionObject());"
. " ol.openlayers.setCenter(lonLat, 13);"
. "}",
array('type' => 'inline', 'scope' => 'footer', 'weight' => 5)
);
drupal_add_js(""
."$(document).ready(function(){"
." $('.view-openlayers-example-map-display-view').css('display', 'none');"
."}",
array('type' => 'inline', 'scope' => 'footer', 'weight' => 5)
);
}
Das erste drupal_add_js dient dazu, dass wir in Drupal '$' anstatt 'jQuery' verwenden können, um jQuery-Funktionen zu verwenden.
Das zweite drupal_add_js enthält die Funktion, die aufgerufen wird, wenn wir auf einen Link wie oben dargestellt klicken. Diese Funktion öffnet dann unser Colorbox-Popup-Fenster mit dem gewünschten Inhalt.
Das dritte drupal_add_js berücksichtigt eine Besonderheit, die für das dynamische Anzeigen von OpenLayers-Karten zu berücksichtigen ist.
Eine OpenLayers-Karte funktioniert nicht, wenn ein umschließender Container mit dem CSS-Attribut display:none erzeugt wurde. Allerdings sollte die Karte trotzdem beim Laden der Seite nicht zu sehen sein. Deshalb wird die Karte erst im DomReady-Event unsichtbar gemacht.
Die hier vorgestellte Vorgehensweise, den Source-Code komplett in hook_preprocess_page als String-Variable zu speichern ist keine optimale, sondern dient nur dazu, alle Aspekte des Problems komprimiert in einem Snippet darzustellen.
Empfehlenswert ist es, die Funktion in ein Skript auszulagern und dieses Skript dann in hook_preprocess_page zu laden. Die verschiedenen Möglichkeiten der Einbettung von Javascript in Drupal können der Dokumentation der Funktion drupal_add_js entnommen werden.
Selbstverständlich kann man auf die vorgestellte Weise auch Bilder, Videos und vieles mehr in einem Colorbox-Popup-Fenster darstellen.