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:

# Inhaltselemente: rel und class für Fancybox
styles.content.imgtext.linkWrap {
  lightboxEnabled = 1
  lightboxCssClass = fancybox
  lightboxRelAttribute = fancybox{field:uid}
}

Setup:

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

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:

plugin.tx_news.settings.detail.media.image.lightbox = fancybox

Fluid Partial (FalMediaImage.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>
 
      [...]

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:

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"
  }
}

Javascript:

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

Quelle: stackoverflow.com

Snippets + Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Inhaltsverzeichnis

FancyBox (sk_fancybox)

FancyBox im News System (news)

FancyBox im Shop System (tt_products)

Seiten-Werkzeuge