Ein Einzelbild anzeigen

Jetzt kümmern wir uns um die Einzelansicht eines Bildes. Hierfür soll ein neues Fenster geöffnet werden, wenn der Benutzer auf ein Bild klickt. Zu diesem Zweck packen wir das img-Tag in einen Link ein, dessen Ziel wiederum das Bild ist. Dafür, dass sich ein neues Fenster öffnet, sorgen wir mit etwas JavaScript-Code. Diesen Code schreiben wir ganz an den Anfang unseres Sublayouts:

<script type="text/javascript">
function OpenWindow(address) {
  ImgWindow = window.open(address,"poster","width=150,height=200,left=650,top=100");
  ImgWindow.focus();
}
</script>

Hierdurch wird eine JavaScript-Funktion definiert, der eine URL (address) übergeben werden muss. window.open öffnet die URL in einem Fenster namens poster, das die angegebene Größe und Position hat.

Anschließend erweitern wir den Code innerhalb der table-Anweisung. Für das href-Tag des a-Elements, in dem sich das Bild befindet, benötigen wir den kompletten Pfad des Bildes. Er besteht aus dem Basispfad der CMS-Instanz, prefixUrl, ergänzt um den Pfad des Bildes in der Ordnerhierarchie, visiblePath. Diese beiden Bestandteile fügen wir mit Hilfe einer Exportvariablen, imgurl, zusammen. Hier das komplette Sublayout:

<script type="text/javascript">
function OpenWindow(address) {
  ImgWindow = window.open(address,"poster","width=150,height=200,left=650,top=100");
  ImgWindow.focus();
}
</script>

<npsobj list="ip_galleryFolders">
  <npsobj modifyvar="clear" varname="images" />
  <npsobj list="destination.children">
    <npsobj condition="isEqual" name1="objType" value2="image">
      <npsobj modifyvar="append" varname="images" name="self" />
    </npsobj>
  </npsobj>

  <npsobj table="images" columns="3">

    <!-- Pfad des Bildes in der Export-Variablen imgurl speichern.
         Bitte aus den folgenden 3 Zeilen die Umbrüche entfernen! -->
    <npsobj modifyvar="set" varname="imgurl">
      <npsobj insertvalue="var" name="urlPrefix" /><npsobj insertvalue="var" name="visiblePath" />
    </npsobj>
    
    <a href="@imgurl" onclick="OpenWindow(this.href); return false">
      <npsobj insertvalue="image" name="self" width="80" title="@self.title" />
    </a>
  </npsobj>
</npsobj>

Der Pfad des Bildes wird mit einer modifyvar="set"-Anweisung ermittelt und gespeichert. Hier hat die Anweisung kein name-Attribut, wodurch der Variablen imgurl nicht der Wert eines Feldes, sondern der Inhalt des npsobj-Elements zugewiesen wird. Dieses wiederum enthält zwei insertvalue="var"-Anweisungen, mit denen der komplette Pfad des Bildes ermittelt wird.

In dem darauf folgenden a-Tag wird imgurl mit Hilfe einer @-Referenz als Wert des href-Attributs angegeben. Beim onclick-Ereignis, d.h., wenn das verlinkte Bild angeklickt wird, wird die oben definierte Funktion OpenWindow mit der URL als Argument aufgerufen.

Öffnen Sie die Vorschau und probieren Sie Ihr Sublayout aus. Je nach Browser und dessen Einstellungen werden die verlinkten Bilder mit oder ohne Rahmen angezeigt.

Weiterführende Links