====== FancyBox (sk_fancybox) ======

Um zu funktionieren, benötigt der Link zur Großansicht die CSS-Klasse und das //rel//-Attribut ''fancybox''. Wenn beim //rel//-Attribut zusätzlich die UID des Inhaltselements ausgegeben wird, kann bei mehreren Bildern innerhalb deselben navigiert werden.

**Constants:**
<code typoscript>
# Inhaltselemente: rel und class für Fancybox
styles.content.imgtext.linkWrap {
  lightboxEnabled = 1
  lightboxCssClass = fancybox
  lightboxRelAttribute = fancybox{field:uid}
}
</code>

**Setup:**
<code typoscript>
# Anpassung sk_fancybox - page.1000 ist von Powermail belegt:
page {
  1001 < plugin.tx_skfancybox
  includeJSFooterlibs.powermailJQuery >
  includeJSFooterlibs.powermailJQueryUi >
}
</code>

----

===== FancyBox im News System (news) =====

Um FancyBox auch innerhalb der News zu verwenden, muss die Klasse im Fluid-Partial (FalMediaImage.html) hinzugefügt werden. Das //rel//-Attribut kann entweder manuell dort oder aber über TypoScript gesetzt werden.

**TypoScript:**
<code typoscript>
plugin.tx_news.settings.detail.media.image.lightbox = fancybox
</code>

**Fluid Partial (FalMediaImage.html):**
<code html>
<div class="mediaelement mediaelement-image">
  <f:if condition="{settings.detail.media.image.lightbox}">
    <f:then>
      <a class="fancybox" rel="{settings.detail.media.image.lightbox}" title="{mediaElement.caption}" href="{f:uri.image(src:'{mediaElement.uid}' treatIdAsReference:1 maxWidth:'800')}">
        <f:image src="{mediaElement.uid}" treatIdAsReference="1" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" maxWidth="{settings.detail.media.image.maxWidth}" maxHeight="{settings.detail.media.image.maxHeight}" />
      </a>
      
      [...]
</code>

----

===== FancyBox im Shop System (tt_products) =====

Grundsätzlich kein Problem, außer es werden Inhalte dynamisch mit AJAX nachgeladen, wie es bei Artikelfotos von Varianten der Fall ist. Nach dem Wechsel einer Variante öffnet sich das neue Bild nicht mit der Fancybox.

**Lösung:**
  - jQuery 1.7.x verwenden
  - TypoScript: ''ATagParams'' anpassen
  - Ergänzendes JavaScript einbinden

**TypoScript:**
<code typoscript>
plugin.tt_products.image.imageLinkWrap = 1
plugin.tt_products.image.imageLinkWrap {
  enable = 1
  typolink {
    parameter.override.cObject = IMG_RESOURCE
    parameter.override.cObject {
      file.import.data = TSFE:lastImageInfo|origFile
      file.maxH = 850
      file.maxW = 650
    }
    # tabindex="1" ist wichtig für Chrome!
    ATagParams = tabindex="1" class="ajaxFancyBox" rel="fancybox"
  }
}
</code>

**Javascript:**
<code javascript>
$(".container").on("focusin", function(){
 $("a.ajaxFancyBox").fancybox({
  // fancybox API options here
  'padding': 0
 }); // fancybox
}); // on
</code>

Quelle: [[http://stackoverflow.com/questions/9081571/how-to-bind-fancybox-to-dynamic-added-element/9084293#9084293|stackoverflow.com]]