thomas hirt . visuelle kommunikation
Wie man alte Scanner unter OSX wieder zum laufen bringt: SANE
tt_news um ein Feld mit RTE erweitern und Links ermöglichen
 
Freitag, 26. Nov 2010

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

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">
   <!--
   function openPreviousLink(elem) {
      elem.parentNode.getElementsByTagName('a')[0].onclick();
   }
   //-->
   </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>
      }
    }
  }
}

Hier auch gleich mal das wt_gallery List Template und ein Lupen Icon als Download:

3. Ein wenig CSS

Was jetzt noch fehlt, ist ein wenig CSS um das Icon richtig zu platzieren:

.clickEnlargeIcon {
    position: absolute;
    margin-left: -12px;
}

So, ich hoffe das klappt auch bei euch so gut und hilft irgendeiner suchenden Seele weiter.

 
 
Joe Lipps schrieb am 19.5.11, 23:44
Erste Sahne, genau danach habe ich gesucht!!!
Freu mich schon, das so umzusetzen.
1000 Dank für Die Veröffentlichung dieses Workarounds!
 
 
kalender
November 2010
M D M D F S S
« Jun   Dez »
1234567
891011121314
15161718192021
22232425262728
2930