Zum Inhalt springen

Typo3 6.2 Bootstrap 3.3.5 Flexslider mit Jquery einbinden

Erstellt am 13. Oktober 2015 · Noch keine Antworten

Tags: Bilder, Bootstrap, TYPO3 6.x, Tipp

hendrik2000 ·

Nachdem ich länger eine Lösung gesucht habe, wollte ich das Ergebnis mal mitteilen:

Basis: Typo3 6.2 und Bootstrap 3.3.5

Problem: Slider wird nicht dargestellt. JQuery ist mehrfach vorhanden.

Mein Lösungsvorschlag:
- Nach der Recherche im Internet stand fest, es ist ein Problem des Einbindung von JQuery man sollte möglichst nur einer Version einbinden, da sie sonst kollidieren.

LÖSUNG:
1. Setup.txt: JQuery in Bootstrap so eingebunden:

includeJS.jquery = https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

2. Extension Flexslider, die Ext. versucht seine eigene JQuery zu laden, deshalb habe ich folgendes in der Constanten Datei festgelegt:

plugin.tx_flexslider {
    view {
        # Necessary options, if you plan to manipulate the templates
        templateRootPath = EXT:flexslider/Resources/Private/Templates/
        partialRootPath = EXT:flexslider/Resources/Private/Partials/
        layoutRootPath = EXT:flexslider/Resources/Private/Layouts/
    }
    persistence {
        # Here you can set up the Record Storage Page globally
        storagePid = 7
    }
    settings {
        # String: File reference to the FlexSlider's Css file - empty this value if you want to include this at your own
        css = EXT:flexslider/Resources/Public/Css/flexslider.css
        lib {
            # String: File reference to alternative jQuery library if EXT t3jquery is not in use
            jQuery = https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
            # String: File reference to flexslider library
            flexslider = EXT:flexslider/Resources/Public/Js/jquery.flexslider-min.js
            # Bool: Flag to define whether the script shoul be moved to the footer or not
            moveToFooter = 0
        }
    }
}

Wesentlich dabei:

jQuery = https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

Danach lief es zumindest bei mir.

HILFE: Bei der Analyse des Problems hat es geholfen den HTML Quellcode anzusehen und zu schauen, wo JQuery eingebunden ist.

Wünsche allezeit gutes gelingen.