Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- typo3:sk_fancybox [2014/08/26 22:14] – admin
+++ typo3:sk_fancybox [2014/09/26 21:27] (aktuell) – [FancyBox im Shop System (tt_products)] admin
@@ Zeile 22: / Zeile 22: @@
 }
 </code>
+----
 ===== FancyBox im News System (news) =====
@@ Zeile 38: / Zeile 40: @@
     <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}" />
+        <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