drucken :: thefox: 12.12.2010

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 ändern, 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