Benutzer-Werkzeuge

Webseiten-Werkzeuge


typo3:sk_fancybox

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:

  1. jQuery 1.7.x verwenden
  2. TypoScript: ATagParams anpassen
  3. 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

typo3/sk_fancybox.txt · Zuletzt geändert: 2015/12/03 19:32 von 127.0.0.1