Typo3 Lightbox mit Lupen Icon und Download Link

Im Pressebereich der Seite www.wege-aus-de-krise.at sollte es die Möglichkeit geben Bilder vergrößert anzusehen und auch die Originaldatei herunterzuladen. Um diese Anforderungen umzusetzen, habe ich die Erweiterungen Perfect Lightbox, wt_gallery und PMK Forced Download kombiniert.

Das Resultat dieser Arbeit kann hier begutachtet werden.

1. Erweiterungen installieren

Folgende Erweiterungen werden in der hier beschriebenen Reihenfolge Installie

Perfect Lightbox
wt_doorman (Eine Sicherheitsklasse, nötig für wt_gallery)
wt_gallery
PMK Forced Download

Danach wird durch einen Klick auf "Edit the whole template record" im Typoscript Root Template das statische Templates "Perfect Lightbox" eingebunden.

2. Typoscript Constants und Setup

Um die Größe der Lightbox festzulegen, kommt nun folgendes in die Constants des Typoscript Templates:

##############################
### PLUGIN PERFECTLIGHTBOX ###
##############################
plugin.perfectlightbox.lightBoxMaxW = 700
plugin.perfectlightbox.lightBoxMaxH = 500

Im Setup habe ich folgendes stehen:

##########################
### CLICK ENLARGE ICON ###
##########################

# Javascript im Header damit der Link des Bildes vom Icon übernommen wird
page.headerData.111 = TEXT
page.headerData.111.value (
   <script type="text/javascript">
   
   </script>
)

# Damit standardmäßig bei allen Bildern ein kleines Lupen Icon angezeigt wird sobald clickenlarge aktiviert ist
# Achtung! Pfad zum Icon gegebenen Falls anpassen!
tt_content.image.20 {
   1 {
stdWrap.innerWrap (
         |<a href="#" class="clickEnlargeIcon" onclick="openPreviousLink(this);return false;"><img src="fileadmin/pfad/zur/lupe.gif" alt="Klicken um Bild zu vergrößern" title="Klicken um Bild zu vergrößern" /></a>
    )
      stdWrap.innerWrap{
         if.isTrue.field = image_zoom
         ifEmpty.field = image_link
      }
   }
}

##############################
### PLUGIN WT_GALLERY ########
##############################

# Dieser Pfad muss auf das List Template von wt_gallery zeigen, und daher angepasst werden
plugin.tx_wtgallery_pi1.template.list = fileadmin/pfad/zu/wt_gallery-list-template.html

# WT_GALLERY Lightbox Feature
plugin.tx_wtgallery_pi1 {
list {
    image = IMAGE
      # Damit bei den Bildern der wt_gallery ein kleines Lupen Icon angezeigt wird
     # Achtung! Pfad zum Icon gegebenen Falls anpassen!
   image {
         stdWrap.innerWrap = |<a href="#" class="clickEnlargeIcon" onclick="openPreviousLink(this);return false;"><img src="fileadmin/pfad/zur/lupe.gif" alt="Klicken um Bild zu vergrößern" title="Klicken um Bild zu vergrößern" /></a>
       # Damit die wt_gallery Bilder mit der Lightbox aufgehen
   imageLinkWrap.typolink {
         parameter.cObject = IMG_RESOURCE
         parameter.cObject.file.import.field = picture
         parameter.cObject.file.maxW = 700
         parameter.cObject.file.maxH = 500
         ATagParams = rel="lightbox[galerie]"
      }
    }
}
}

# WT_GALLERY download Link zusammensetzen
plugin.tx_wtgallery_pi1 {
list {
    image {
      stdWrap.append = COA
      stdWrap.append {
        5 = TEXT
        5.value = <div class="image-download-link">

        10 = TEXT
        10 {
          value = >> download
          typolink.parameter.field = picture
          typolink.parameter.makeDownloadLink = 1
        }

        20 = TEXT
        20.data = register:filesize
        20.bytes = 1
        20.wrap = (|)

        30 = TEXT
        30.value = </div>
      }
    }
}
}