Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- typo3:sk_fancybox [2014/08/26 22:04] – angelegt admin
+++ typo3:sk_fancybox [2014/09/26 21:27] (aktuell) – [FancyBox im Shop System (tt_products)] admin
@@ Zeile 1: / Zeile 1: @@
 ====== 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:
@@ Zeile 9: / Zeile 22: @@
 }
 </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]]

Snippets + Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge