Shadowbox.js einbinden

Einbinden im Template

Zuerst die aktuelle Version von Shadowbox.js downloaden, auf dieser Seite wird die Version 3.0.3 verwendet. Danach die JS und die CSS Datei im Template einbinden.


<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
Einbinden der Dateien im Template

page.includeCSS.shadowbox = fileadmin/res/shadowbox/shadowbox.css
page.includeJS.shadowbox = fileadmin/res/shadowbox/shadowbox.js
alternativ per TS einbinden, je nach Seitenaufbau anpassen

Als nächstes muss das Popup deaktiviert (umgebaut) werden und die Links zum Öffnen der Bilder benötigen das rel="shadowbox" Attribut. Im folgenden Beispiel wird gezeigt wie der Umbau aussieht, wenn man die Extension DAM im Einsatz hat.


tt_content {
 image {
  20 {
   1 {
    # wichtig muss aktivert sein !
    titleInLink = 1
    titleInLinkAndImg = 0

    titleText >
    titleText.cObject = COA
    titleText.cObject {
     1 = LOAD_REGISTER
     1 {
      ceTitleText.cObject = TEXT
      ceTitleText.cObject {
       required = 1
       field = titleText
       stripHtml = 1
       listNum {
        stdWrap.data = register:IMAGE_NUM_CURRENT
        splitChar = 10
       }
      }
      ceAltText.cObject = TEXT
      ceAltText.cObject {
       required = 1
       field = altText
       stripHtml = 1
       listNum {
        stdWrap.data = register:IMAGE_NUM_CURRENT
        splitChar = 10
       }
      }
     }
     10 = TEXT
     10 {
      data = register:ceTitleText // register:ceAltText // field:txdam_title // field:txdam_alt_text
      wrap = |
     }

     99 =  RESTORE_REGISTER
    }

    imageLinkWrap >

    #shadowbox link
    imageLinkWrap = 1
    imageLinkWrap {
     enable {

      # image_link verwenden
      ifEmpty {
       typolink {
        parameter {
         field = image_link
         listNum.stdWrap.data = register:IMAGE_NUM_CURRENT
        }
        returnLast = url
       }
      }

      field = image_zoom
      # wenn image_link vorhanden dann abbrechen
      if {
       isTrue {
        field = image_link
        listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
       }
       negate = 1
      }
     }

     typolink {
      # shadowbox link erstellen
      parameter = {field:txdam_file_path}{field:txdam_file_name}
      parameter {
       insertData = 1
      }
      ATagParams = rel="shadowbox[cimage{field:uid}];"
      ATagParams {
       insertData = 1
      }
     }
    }

   }
  }
 }
}
TS Code ädern, im Setup eingeben
TS Code für TYPO3 4.4.x (ohne DAM)

tt_content.image.20.1.imageLinkWrap {
  JSwindow = 0
  # wegen dämlichster PHP Code in class.tslib_content.php#3229
  target = _self" rel="shadowbox[cimage];options={animate:false, animateFade:false};
}



TS Code für TYPO3 4.4.x
TS Code ab TYPO3 4.5 (ohne DAM)

tt_content.image.20.1.imageLinkWrap {
  JSwindow = 0
  directImageLink = 1
  linkParams.ATagParams >
  linkParams.ATagParams.cObject = TEXT
  linkParams.ATagParams.cObject {
    field = uid
    stdWrap.wrap = rel="shadowbox[cimage|];options={animate:false, animateFade:false};"
  }
}
TS Code ab TYPO3 4.5