Insert Tag kollidiert mit Revolution Slider - jemand ne Idee?

[creativx]

Hallo zusammen,

ich hirne gerade mit folgendem Problem:

Ich baue eine angepasste Erweiterung für die Implementierung des RevolutionSliders (https://revolution.themepunch.com ). Eine Option in diesem Slider ist die Darstellung von Navigationstabs. Die Konfiguration dieser Tabs wird via Javascript vorgenommen und schaut z.B so aus:

                        tabs: {
                            style:"zeus",
                            enable:true,
                            width:200,
                            height:60,
                            min_width:2000,
                            wrapper_padding:0,
                            wrapper_color:"transparent",
                            wrapper_opacity:"0",
                            tmp:'<div class="tp-tab-title">{{title}}{{description}}</div>',
                            visibleAmount: 3,
                            hide_onmobile: true,
                            hide_under:778,
                            hide_onleave:false,
                            hide_delay:200,
                            direction:"horizontal",
                            span:false,
                            position:"outer-bottom",
                            space:10,
                            h_align:"center",
                            v_align:"top",
                            h_offset:0,
                            v_offset:0,
                        }

Im Feld "tmp" kann ich für das Beschriften der Tabs Platzhalten einfügen, in diesem Falle {{title}} und {{description}}. Befüllt werden diese Platzhalter über den generierten Markup für den Slider. Soweit so gut, wenn ich das statisch als HTML entwickle, dann passt alles. Wenn ich jetzt aber via meiner Erweiterung das ganze durch Contao rendern lasse, dann denkt Contao natürlich dass es sich bei {{title}} und {{description}}*um Contao -Inserttags handelt und versucht diese zu ersetzen. Das funktioniert natürlich dann nicht, weil ja die Werte im Markup für den jeweiligen Slide stehen.

Ihr versteht mein Problem??

Hat jemand eine Idee wie man das lösen kann. Am allerbesten natürlich ohne das ich an den Code vom Slider ran muss

Dankeschön schon mal ...

[Merlin]

Ich hatte ein ähnliches Problem. Mir hat es geholfen, die contao insert-tags auf dieser Seite auszuschalten

<?php

global $objPage;
if($objPage->id == 42)
{
  $GLOBALS['TL_CONFIG']['disableInsertTags'] = true;
}

[creativx]

Hi Merlin,

naja das ist nicht wirklich die Lösung ich brauch an anderer Stelle schon die InsertTags, von daher wäre das nicht so wirklich gut wenn ich die deaktivieren würde.

[ihkwdiopk]

Lade doch das JS asynchron nach.

[creativx]

Moin,

öööööhm, da fehlt mir jetzt irgendwie der Hauch einer Ahnung wie das funktionieren soll - vor allem im Zusammenspiel dann mit dem Slider.
Hast du mir nen Tip?

[Spooky]

Sollte sich das Problem nicht mit

{[{]title[}]}{[{]description[}]}

lösen lassen?

[creativx]

Hey Spooky,

der Tip war gut - mit deiner Schreibweise wurde zwar die geschweifte Klammer noch angezeigt -aber es wurde zumindest was angezeigt. Jetzt habe ich aber den Code wie folgt geschrieben und jetzt passt es

[{]title[}]

Danke dir !

[Merlin]

Hey creativx

Wo hast du das geändert? Ist ja sicherlich die bessere Lösung als abzuschalten.

[creativx]

Achs sorry - ja hätte ich vielleicht auch dazu schreiben können

Also ich habs in der Config des Sliders geändert. Bei mir ist das so gelöst, dass ich quasi ein Start-Element, ein Slide-Element und ein Stop-Element als Content-Element habe. Und im Template vom Stop-Element hängt die Config für den Slider drin:

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        $(function(){

            var revapi<?= $this->sliderId; ?>;

            if($("#rev_slider_<?= $this->sliderId; ?>").revolution == undefined){
                revslider_showDoubleJqueryError("#rev_slider_486_1");
            }else{
                revapi<?= $this->sliderId; ?> = $("#rev_slider_<?= $this->sliderId; ?>").show().revolution({
                    sliderType:"standard",
                    jsFileLocation:"files/eilguthalle-v2/plugins/revolutionslider/js/",
                    sliderLayout:"fullwidth",
                    dottedOverlay:"none",
                    delay:9000,
                    navigation: {
                        keyboardNavigation:"on",
                        keyboard_direction: "horizontal",
                        mouseScrollNavigation:"off",
                        mouseScrollReverse:"default",
                        onHoverStop:"on",
                        touch:{
                            touchenabled:"on",
                            swipe_threshold: 75,
                            swipe_min_touches: 1,
                            swipe_direction: "horizontal",
                            drag_block_vertical: false
                        }
                        ,
                        arrows: {
                            style:"uranus",
                            enable:true,
                            hide_onmobile:true,
                            hide_onleave:false,
                            hide_under: 1500,
                            tmp:'',
                            left: {
                                h_align:"left",
                                v_align:"center",
                                h_offset:150,
                                v_offset:10
                            },
                            right: {
                                h_align:"right",
                                v_align:"center",
                                h_offset:150,
                                v_offset:10
                            }
                        }
                        ,
                        tabs: {
                            style:"zeus",
                            enable:true,
                            width:300,
                            height:40,
                            min_width:2000,
                            wrapper_padding:0,
                            wrapper_color:"transparent",
                            wrapper_opacity:"0",
                            tmp:'<div class="tp-tab-title">[{]title[}]</div>',
                            visibleAmount: 3,
                            hide_onmobile: true,
                            hide_under:778,
                            hide_onleave:false,
                            hide_delay:200,
                            direction:"horizontal",
                            span:false,
                            position:"outer-bottom",
                            space:10,
                            h_align:"center",
                            v_align:"top",
                            h_offset:0,
                            v_offset:0,
                        }
                    },
                    viewPort: {
                        enable:true,
                        outof:"pause",
                        visible_area:"80%",
                        presize:false
                    },
                    responsiveLevels:[1240,1024,778,480],
                    visibilityLevels:[1240,1024,778,480],
                    gridwidth:[1240,1024,778,480],
                    gridheight:[700,650,600,550],
                    lazyType:"none",
                    parallax: {
                        type:"scroll",
                        origo:"enterpoint",
                        speed:400,
                        levels:[5,10,15,20,25,30,35,40,45,50,46,47,48,49,50,55],
                    },
                    shadow:0,
                    spinner:"spinner0",
                    // Autoplay on
                    stopLoop:"off",
                    stopAfterLoops:-1,
                    stopAtSlide:-1,
                    // Autoplay off
                    // stopLoop:"on",
                    // stopAfterLoops:0,
                    // stopAtSlide:1,
                    shuffle:"off",
                    autoHeight:"off",
                    hideThumbsOnMobile:"off",
                    hideSliderAtLimit:0,
                    hideCaptionAtLimit:0,
                    hideAllCaptionAtLilmit:0,
                    debugMode:false,
                    fallbacks: {
                        simplifyAll:"off",
                        nextSlideOnWindowFocus:"off",
                        disableFocusListener:false,
                    }
                });
            }

        });
    });
</script>

In der Config unter navigation > tabs siehst du im Feld "tmp" die Platzhalter.

Reicht dir das als Info?