---
title: "perfectlightbox mit wt_gallery und Titel-Anzeige und Lupe"
url: "https://www.typo3.net/d/108347-perfectlightbox-mit-wt-gallery-und-titel-anzeige-und-lupe"
source: "typo3.net"
tags: ["Extensions","Bilder","Tipp"]
created: "2011-11-22"
last_reply: "2011-11-22"
replies: 0
solved: false
page: 1
pages: 1
lang: "de"
---

# perfectlightbox mit wt_gallery und Titel-Anzeige und Lupe

Extensions · 0 Antworten · gestartet 2011-11-22

## Eröffnungsbeitrag

**hecki_t3** · 2011-11-22 · [Beitrag #1](https://www.typo3.net/d/108347-perfectlightbox-mit-wt-gallery-und-titel-anzeige-und-lupe/1)

Hallo,

wenn man nach wt_gallery und perfectlightbox "googelt", findet man die abenteuerlichsten Beschreibungen, um wt_gallery und Perfect Lightbox oder andere Lightbox-Varianten zu einer Zusammenarbeit zu "überreden" und einige zusätzliche Features einzubauen.
Dabei ist doch alles so einfach ;)

Fangen wir also erstmal mit der einfachsten Variante an:

**1. Öffnen einer Bildergalerie aus dem 'list-view-Modus' der wt-gallery als Dia-Show:**

```typoscript
### WT_Gallery mit Perfect Lightbox

// Pfad zum List-Template von wt_gallery - evtl. anpassen
plugin.tx_wtgallery_pi1.template.list = typo3conf/ext/wt_gallery/templates/list.html

plugin.tx_wtgallery_pi1 {
  list {
    image = IMAGE
    image {
      imageLinkWrap.typolink {
        parameter.cObject = IMG_RESOURCE
        parameter.cObject.file.import.field = picture
        parameter.cObject.file.maxW = 640
        parameter.cObject.file.maxH = 480
        // Add the "rel" attribute to activate the lightbox effect
        ATagParams = rel="lightbox[slideshow]"     
      }
    }
  }
}
```

Die Anweisung **ATagParams = rel="lightbox*[slideshow]*"** sorgt dafür, dass beim Anklicken eines beliebigen Bildes die Dia-Show startet.

Weiter geht's mit:

**2. Anzeige von Titel oder Exif-Informationen im Lightbox-Popup:**

```typoscript
plugin.tx_wtgallery_pi1 {
  list {
    image = IMAGE
    image {
      imageLinkWrap.typolink {
        parameter.cObject = IMG_RESOURCE
        parameter.cObject.file.import.field = picture
        parameter.cObject.file.maxW = 640
        parameter.cObject.file.maxH = 480
        // Add the "rel" attribute to activate the lightbox effect
        // and 'title' and 'alt' attributes
        ATagParams = rel="lightbox[slideshow]" title="{field:title}" alt="{field:comments}"
        ATagParams.insertData = 1
      }
    }
  }
}
```

Wichtig ist hier die Erweiterung der ATagParams-Anweisung um
**title="{field:title}" alt="{field:comments}"**
und die zusätzliche Anweisung
**ATagParams.insertData = 1**

Als kleines "Schmankerl" verpassen wir jetzt noch jedem Vorschau-Bild eine kleine Lupe, um den Anwender darauf aufmerksam zu machen, dass er das Bild auch in einer vergrösserten Darstellung oder - wie in unserem Fall - in einer Dia-Show betrachten kann.
Dazu reicht eine einzige Zeile im TS-Setup und ein paar Zeilen in den CSS-Stylesheets.

**3. Thumbnails in wt_gallery mit einer Lupe versehen:**

wir fügen in unser TS-Setup folgende Zeile ein:
***stdWrap.innerWrap = <div class="lupe-aussen"><div class="lupe-innen"></div></div> |***

Anschliessend sollte Euer komplettes Template wie folgt aussehen:

```typoscript
plugin.tx_wtgallery_pi1 {
  list {
    image = IMAGE
    image {
      stdWrap.innerWrap = <div class="lupe-aussen"><div class="lupe-innen"></div></div> |
      imageLinkWrap.typolink {
        parameter.cObject = IMG_RESOURCE
        parameter.cObject.file.import.field = picture
        parameter.cObject.file.maxW = 640
        parameter.cObject.file.maxH = 480
        // Add the "rel" attribute to activate the lightbox effect
        // and 'title' and 'alt' attributes
        ATagParams = rel="lightbox[slideshow]" title="{field:title}" alt="{field:comments}"
        ATagParams.insertData = 1
      }
    }
  }
}
```

Jetzt fehlen nur noch die CSS-Anweisungen:

*/**************************************************/
/* Lupensymbol auf klickbare Bilder positionieren */
/**************************************************/
.lupe-aussen {
    top: 0px;
    clear: both;
    position: relative;
}

.lupe-innen {
    background: url('Pfad_zum_Lupen_Bild') no-repeat scroll center center transparent;
    height: 16px;
    width: 16px;
    position: absolute;
    right: 3px;
    top: 5px;
}*

Ich hoffe, dass ich damit etwas Klarheit in die teilweise verwirrenden Anleitungen zur Implementierung 'wt_gallery/Perfect Lightbox' gebracht habe.

Das Ganze lässt sich u.a. "live" [hier](http://www.rettungshunde-oberberg.de/medien/fotos/gallery/35744583.html) betrachten.

Gruss,
Günter

---

Quelle: „perfectlightbox mit wt_gallery und Titel-Anzeige und Lupe“, typo3.net, https://www.typo3.net/d/108347-perfectlightbox-mit-wt-gallery-und-titel-anzeige-und-lupe
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.