DEPRECATION WARNING
This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.
EXT: Carousel / Karussell Extension¶
Created: | 2010-02-18T17:33:18 |
---|---|
Changed: | 2014-12-26T10:51:23.257426524 |
Classification: | karussell |
Description: | Diese Extension setzt die Extension "t3jquery" voraus und basiert auf dem JavaScript-plugin "jQuery Carousel" von Jan Sorgalla. This extension requires the extension "t3jquery" and is based on the JavaScript plugin "jQuery Carousel" by Jan Sorgalla. |
Keywords: | jQuery, Animation |
Author: | Kurt Gusbeth |
Email: | info@quizpalme.de |
Info 4: | |
Language: | en, de, fr, it, es, ro |
EXT: Carousel / Karussell Extension - karussell
EXT: Carousel / Karussell Extension¶
Extension Key: karussell
Language: en, de, fr, it, es, ro
Keywords: jQuery, Animation
Copyright 2014, Kurt Gusbeth, <info@quizpalme.de>
jCarousel © 2010 Jan Sorgalla, http://sorgalla.com/jcarousel/
This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml
The content of this document is related to TYPO3 - a GNU/GPL CMS/Framework available from www.typo3.org
Table of Contents¶
EXT: Carousel / Karussell Extension 1
`Introduction / Einleitung 3 <#__RefHeading__1120_1804195923>`_
What does it do? / Was macht diese Extension? 3
Some Screenshots / Einige Screenshots 3
Similar extensions / Ähnliche Extensions 4
`Users manual / Anleitung 5 <#__RefHeading__1130_1804195923>`_
`Administration 7 <#__RefHeading__1134_1804195923>`_
Security notice / Sicherheitshinweis 8
`Configuration / Konfiguration 10 <#__RefHeading__1138_1804195923>`_
`Tutorial 16 <#__RefHeading__1144_1804195923>`_
`Known problems / Bekannte Probleme 18 <#__RefHeading__1146_1804195923>`_
`ChangeLog / Änderungen 19 <#__RefHeading__1150_1804195923>`_
Introduction / Einleitung¶
What does it do? / Was macht diese Extension?¶
This extension requires the extension "t3jquery" and is based on the JavaScript plugin "jQuery Carousel v. 0.2.7" by Jan Sorgalla. You can display contents from every database-table and scroll between it. You can use most features of the jCarousel-plugin. Take a look at that plugin if you want to know what you can do with this extension: http://sorgalla.com/jcarousel/
Note 1 : the jCarousel-plugin is loaded by default. You can use other JS-plugins too. Its a very flexible extension! See chapter Tutorial for other supported JS-plusgins. Note 2 : this extensions is not longer my favorite one. I have a new one and recommend you to change to that one. It has a Karussell-import as well. The extension: key: camaliga .
Diese Extension setzt die Extension "t3jquery" voraus und basiert auf dem JavaScript-plugin "jQuery Carousel v. 0.2.7" von Jan Sorgalla. Man kann Inhalte aus jeder beliebigen Datenbanktabelle anzeigen und zwischen den Inhalten hin und her scrollen. Man dürfte (fast) alle Features des jCarousel-Plugins benutzen können. Wer mehr wissen will bzw. wer wissen will, was alles möglich ist, sollte einen Blick auf die Homepage des jCarousel-Plugins werfen: http://sorgalla.com/jcarousel/
Bemerkung 1 : man muss nicht das jCarousel-Plugin benutzen. Man kann auch andere JS-Plugins benutzen. Siehe Kapitel Tutorial. Bemerkung 2 : diese Extension wird nicht mehr weiter entwickelt. Für alle, die Typo3 6 oder 7 benutzen, empfehle ich den Umsteig auf meine neue Extension: camaliga . Sie hat auch ein Import-Tool für Karussell-Elemente.
Contact / Kontakt¶
Similar extensions / Ähnliche Extensions¶
You don´t like this extension? Try one of this:
Dir gefällt diese Extension nicht? Dann probiere eine von diesen hier aus:
http://typo3.org/extensions/repository/view/camaliga
http://typo3.cms-jack.ch/de/erweiterungen/imagecarousel/
http://typo3.cms-jack.ch/de/erweiterungen/imagecycle/
http://typo3.cms-jack.ch/de/erweiterungen/jf-headerslide/
http://www.t3s-ext.de/t3s-extensions/t3s-jslidernews.html
http://www.t3s-ext.de/t3s-extensions/t3s-headerslider.html
http://typo3.org/extensions/repository/view/newsslider
http://typo3.org/extensions/repository/view/jpcarousel/current/
Users manual / Anleitung¶
First, you need to install and configure the extension “t3jquery”. For a basic version you need only the jQuery core. If you want to use easing effects than you need the “Easing” effects in the jQuery Library too. Its not very important which jQuery version you take or if you always integrate jQuery.
Als erstes muss die “t3jquery”-Extension installiert und konfiguriert sein. Für eine einfache Version reicht der jQuery-Kern aus. Wer schöne Übergangseffekte haben will, muss noch die “Easing”-Effekte mit in die jQuery-Lirary laden. Es ist nicht so wichtig, welche jQuery-Version genommen wird oder ob jQuery immer eingebunden wird.
Second, install this extension. If you want to use your own database- tables you don´t need to create the karussell-tables. Configure the extension. Check the list of allowed tables or fill out the other fields!
Danach kann man diese Extension installieren. Wer seinen eigenen Tabellen benutzen möchte, muss die karussell-Tabellen nicht anlegen. Überprüfe in der Konfiguration die Liste der erlaubten Dateien oder fülle die anderen Felder aus.
Third, create a page content and choose this plugin from the plugin- list.
Als drittens kann man schon ein Element anlegen und dieses Plug-in bei der Plug-in-Liste auswählen.
Forth, you can configure the plugin via TypoScript or Flexforms. However, you should include the static default template.
Viertens: man kann diese Extension via TypoScript oder Flexforms konfigurieren. In jedem Fall sollte man aber das statische Template einschließen.
Now you should decide from which database-table you want to take the content elements. Create them if they aren´t created. I recommend to create for a test some karussell-contents. Thats the easiest way to test this extension.In the normal case you can use 4 table-fields which you want to display: title, content-text, a link and an image. Your table must have a field named “uid” too. For the advanced case read the tutorial.
Jetzt sollte man sich überlegen, was für Inhalte man anzeigen möche. Falls diese noch nicht vorhanden sind, sollte man die jetzt anlegen. Fürs einen Test empfehle ich mal, einige Karussell-Elemente anzulegen. Das ist der einfachste Weg diese Extension zu testen.Im Normal-Fall kann man 4 Tabellen-Felder anzeigen: Title, mehr Text, einen Link und ein Bild. Die Tabelle muss auch ein Feld namens “uid” haben. Für den Spezial-Fall (mehr als 4 Felder) im Tutorial weiter lesen.
After you had created some karussell-elements, click at the button “Show web-site”. Now you will see something that looks like the screenshot no. 1.
Nachdem du ein paar Karussell-Elemente angelegt hast, klicke auf die Lupe “Web-Seite anzeigen”. Du solltest nun soetwas sehen, wie es der Screenshot 1 anzeigt!
Note: links can be numeric or a string. A numeric link will be interpreted as a UID.
Bemerkung: Links können numerisch oder ein Text sein. Ein numerischer Link wird als UID interpretiert.
FAQ¶
- Where do I find more information about jQuery and jCarousel?
- Wo finde ich mehr Informationen über jQuery und jCarousel?
http://sorgalla.com/jcarousel/
http://sorgalla.com/projects/jcarousel/
http://www.ajaxdaddy.com/demo-jquery-carousel.html
http://docs.jquery.com/Tutorials
http://jqueryui.com/docs/Effects/Methods
Administration¶
Administrators should create a HTML- and a CSS-Files. You will find many example HTML- and CSS-files in the examples-folder. Please read the documentation of jCarousel first, in order to understand the HTML- and CSS-files.The most HTML-file-examples are circular-carousels. All other types of carousel should work too.You will need to decide first, if you want to display static or dynamic code. The static code will be printed as ul-li-elements. The dynamic code will be displayed as JavaScript code. I recommend to use the static option. The default template is a static layout too. The most non jCarousel examples uses the static layout. If you take the static layout you need at least 2 template-elements: ###TEMPLATE_GLOBAL#### and ###TEMPLATE_ITEM####. Take a look at the example-files for more information.You need ###TEMPLATE_CONTROL### only if you want to show an extra navigation.You can use ###TEMPLATE_ITEM2### if you want to separate images and text-content from each other.Markers to include the sub- templates in the main-template: ###ITEMS###, ###ITEMS2### and ###CONTROL###.In the static layout you can use this markers in the sub-template:###TITLE###, ###IMAGE###, ###IMAGETAG###, ###CONTENT###, ###LINK###, ###TARGET###, ###LINKTAG###, ###NR###, ###UID###, ###CONT_UID###, ###MAX###, ###FIMILA### and ###IS_START###.In the dynamic layout you can use this items:item.title, item.image, item.imageTag, item.link, item.target, item.linkTag, item.content and item.nr.The difference between “ image” and “imageTag” or “link” and “linkTag” is this: “image” delivers only the image-name and “imageTag” delivers the whole image-tag. Same procedure for links. There is one more difference: images.maxW and images.maxH will be ignored for ###IMAGE### and item.image.
Note: images are expected in the uploads folder. You can specify only a folder in that directory.
Furthermore: you can select more than 4 db-fields. See chapter “Tutorial”.
Administratoren sollten zumindest die HTML- und CSS-Datei erstellen. Man findet viele Beispiele im examples-Ordner dieser Extension. Man sollte allerdings zuerst die JS-Plugin-Dokumentation (z.B. von jCarousel) lesen um die HTML- und CSS-Dateien zu verstehen.Viele Beispiele sind circular-Karusselle. Dennoch sollten auch die anderen Karussell-Varianten funktionieren.Als erstes sollte man entscheiden, ob man ein statisches oder ein dynamisches Layout wählt. Die statische Variante gibt ul-li-Elemente aus. Die dynamische Variante gibt JavaScript-Code aus. Ich empfehle die statische Variante. Das Standard-Template benutzt ebenfalls die statische Variante. Wenn man die statische Variante nimmt, braucht man mind. 2 Template-Elemente: ###TEMPLATE_GLOBAL#### und ###TEMPLATE_ITEM####. Die Templates erkläre ich nicht, sie sollten eigentlich zu verstehen sein. Wenn nicht anders angegeben, muss man für nicht jCarousel-Beispiele das statische Layout wählen.###TEMPLATE_CONTROL### braucht man nur wenn man eine Extra-Navigation haben will.Man kann auch ###TEMPLATE_ITEM2### verwenden, wenn man Bilder und Texte voneinander trennen muss.Im Haupt-Template kann man die Sub-Templates mit diesen Markern einbinden: ###ITEMS###, ###ITEMS2### und ###CONTROL###.Bei der statischen Variante stehen folgende Marker im Sub-Template zur Verfügung:###TITLE###, ###IMAGE###, ###IMAGETAG###, ###CONTENT###, ###LINK###, ###TARGET###, ###LINKTAG###, ###NR###, ###UID###, ###CONT_UID###, ###MAX###, ###FIMILA### und ###IS_START###.Bei der dynamischen Variante kann man folgende items benutzen:item.title, item.image, item.imageTag, item.link, item.target, item.linkTag, item.content und item.nr.Der Unterschied zwischen “ image” und “imageTag” oder “link” und “linkTag” ist folgender: “image” liefert nur den Bild-Namen und “imageTag” liefert das ganze Bild-Tag. Das gleiche gilt für Links. Es gibt noch einen Unterschied: images.maxW und images.maxH wird ignoriert bei ###IMAGE### und item.image.
Achtung: Bilder werden im uploads-Ordner erwartet. Man kann nur einen Ordner von dort verwenden!
Weiterhin zu beachten: man kann mehr als 4 DB-Felder selecten. Siehe Kapitel “Tutorial”.
FAQ¶
- Is there a reason to take the dynamic layout in the HTML- template?Taste. The most non jCarousel examples need the static layout (marker instead of JavaScript)!
- Gibt es einen guten Grund dafür, ein dynamisches Template zu nehmen?Geschmackssache, aber die meisten Nicht-jCarousel-Beispiele benutzen das statische Layout (Marker statt JavaScript).
Security notice / Sicherheitshinweis¶
- It is not allowed to use the tables fe_users, be_users ans be_sessions. Insert, update and delete are not allowed too. Furthermore you can avoid illegal selects by using the extension configuration after installing the extension. If you type in your configuration there, the appropriate flexform and typoscript values will be ignored! That means: then is only a global configuration possible. See image below. Normal case: define only the allowed tables. * is a wildcard.
- Es ist nicht erlaubt, die Tabellen fe_users, be_users und be_sessions in den SQL-Statements zu verwenden. Insert, update und delete darf man auch nicht verwenden. Weiterhin kann man illegale Selects verhindern, indem man die Extension nach der Installation global konfiguriert (zumindest die SQL-Selects). Wenn man das ganze Formular ausfüllt (siehe Bild unten), dann werden alle entsprechenden Flexform- und TypoScript-Einstellungen ignoriert! Normaler Modus: definiere nur die erlaubten Tabellen. * meint: auch ähnliche Tabellen.
Abbildung 1: Example configuration / Beispiel- Konfiguration
Configuration / Konfiguration¶
- You can configure this plugin via TypoScript or via Flexforms. Take at look at the following TypoScript-reference if you don´t understand the flexforms.
- Man kann dieses Plug-In via TypoScript oder per Flexforms konfigurieren. Wenn man etwas bei den Flexforms nicht versteht, sollte einen Blick auf die folgende TypoScript-Referenz werfen.
Reference / Referenz¶
- TypoScript reference. Default values can be others if you do not include the static template.
- TypoScript-Referenz. Standard-Werte können abweichen, wenn man nicht das statische Template benutzt.
templateFile¶
Property
templateFile
Data type
string
Description
Path to the template file.
Pfad zur Template-Datei.
Example / Beispiel: fileadmin/template/files/karussell.html
Default
EXT:karussell/examples/template.html
styleFile¶
Property
styleFile
Data type
string
Description
Path to the CSS file.Pfad zur CSS-Datei.
Example / Beispiel: fileadmin/template/styles/karussell.css
Default
EXT:karussell/examples/skin.css
jsFile¶
Property
jsFile
Data type
string
Description
Path to the jCarousel-JavaScript file or other JS-plugin.
Pfad zur jCarousel-Javascript-Datei oder einem anderen JS-plugin.
Example / Beispiel: fileadmin/template/scrips/barousel.js
Default
EXT:karussell/res/jquery.jcarousel.min.js
loadEverytime¶
Property
loadEverytime
Data type
int [0-1]
Description
Only importantant if you use the more than one plugin at a page. 0: load CSS- ans JS-files only once. 1: load the CSS- and JS-file everytime (if you use different files).
Nur dann von Bedeutung, wenn man das plugin mehrmals auf einer Seite verwendet. 0: lade die CSS- und JS-Dateien nur einmal. 1: lade die CSS- und JS-Dateien jedesmal (sinnvoll, wenn die Dateien verschieden sind).
Example / Beispiel: 1
Default
0
table¶
Property
table
Data type
string
Description
Datebase-table from which you want to select elements.Datenbank- Tabelle aus der man Elemente holen will.
Example / Beispiel *: tt_news
Default
tx_karussell_inhalt
searchFieldList¶
Property
searchFieldList
Data type
string
Description
Fields to select. You can select as much fields as you like, but they have to be in this order: title, content, image, link, other fields. UID will be fetched automatically. There must be at least 3 commas.Felder die man holen will. Man kann so viele Felder holen wie man will, aber die Reihenfolge muss eingehalten werden: Titel, Inhalt, Bild, Link, andere Felder. Die UID wird autmatisch mitgeholt. Es müssen mind. 3 Kommas vorkommen.
Examples / Beispiele *:
title,short,image,
header,subheader,image,link
title,bodytext,images,link,short,email
Default
titel,meldung,bild,link
andWhere¶
Property
andWhere
Data type
string
Description
Optional where statement. ###LANG_UID### will be replaced with the current language-uid. ###PARAM_UID### will be replaced with the tx_karussell_pi1[showUid] parameter. ###UID### will be replaced with the current uid and ###PID### with the pid.
Optionales where-Statement. ###LANG_UID### wird dabei durch die aktuelle Sprachen-uid ersetzt. ###PARAM_UID### wird ersetzt durch den Übergabe-Parameter tx_karussell_pi1[showUid]. ###UID### und ###PID### wird mit der aktuellen uid und pid ersetzt.
Examples / Beispiele *:
AND status=1
AND sys_language_uid=###LANG_UID###
AND (pid=###PARAM_UID### OR pid=###PID###)
Default
sort¶
Property
sort
Data type
string
Description
Sort result by “Field:Order” (ASC or DESC) or “rand()”Sortiere das Ergebnis nach “Feld:Sortierung” (ASC oder DESC) oder “rand()” (Zufallssortirung)
Examples / Beispiele *:
datetime:DESC
rand()
Default
tstamp
foreignSelect¶
Property
foreignSelect
Data type
string
Description
Select data from other tables too? ###UID### in the select statement will be replaced with the current uid.Auch Daten aus anderen Tabellen holen? ###UID### in der Select-Klause wird dabei durch die aktuelle UID ersetzt.
Example / Beispiel *:
SELECT title FROM tt_news_cat cat, tt_news_cat_mm mm WHERE cat.uid = mm.uid_foreign AND uid_local=###UID###
Default
parameterUID¶
Property
parameterUID
Data type
string
Description
If you don´t select a link from the database-table then you can specify here, how the link should be build. This is the parameter for the UID, which will be fetched automatically.Wenn man keinen Link aus der Datenbank-Tabelle holen will, kann man hiermit angeben, wie der Link gebildet werden soll. Dies ist der Parameter für die UID, die automatisch mitgeholt wird.
Example / Beispiel:
tx_ttnews[tt_news]
Default
destinationPID¶
Property
destinationPID
Data type
Int
Description
ID of the destination page.ID der Zielseite.
Example / Beispiel:
70
Default
linkText¶
Property
linkText
Data type
string
Description
Text for the link-tag.Text für das a-href-Tag.
Example / Beispiel:
go on...
Default
Mehr ...
crop¶
Property
crop
Data type
int
Description
Crop the content after max. … characters?Inhalt nach max. … Zeichen abschneiden?
Example / Beispiel:
120
Default
fimila¶
Property
fimila
Data type
string
Description
Fimila means: first, middle, last content element. You can define a value for ###FIMILA### for content elements. Separator: |.Fimila bedeutet: erstes, mittleres und letztes Element. Angaben für ###FIMILA###. Getrennt wird per |.
Example / Beispiel:
class=”first”| |class=”last”
Default
jCarousel.wrap¶
Property
jCarousel.wrap
Data type
String
Description
Specifies what to do when the last element is reachedGibt an, was passieren soll, wenn man das letzte Element erreicht hat
Example / Beispiel:
null
Default
'circular'
jCarousel.auto¶
Property
jCarousel.auto
Data type
int
Description
Automatic scroll after ... secondsAutomatisch nach ... Sekunden weiterscrollen
Example / Beispiel:
17
Default
10
jCarousel.animation¶
Property
jCarousel.animation
Data type
String / int
Description
Animaton speed ('slow', 'fast' or a number between 100 and 900 )Animatons-Geschwindigkeit ('slow', 'fast' oder 100 bis 900). Die Anführungszeichen sind übrigens bei 'slow' oder 'fast' zwingend erforderlich.
Example / Beispiel:
750
Default
'fast'
jCarousel.easing¶
Property
jCarousel.easing
Data type
string
Description
Easing effect. See “user manual / FAQ”Übergangseffekt. Siehe unter “Anleitung / FAQ”
Example / Beispiel:
'easeOutBack'
Default
'swing'
jCarousel.start¶
Property
jCarousel.start
Data type
int
Description
Start with element no. ...
Starten mit Element Nummer ...
Example / Beispiel:
3
Default
1
jCarousel.scroll¶
Property
jCarousel.scroll
Data type
int
Description
No. of elements to scrollAnzahl der zu skrollenden Elemente
Example / Beispiel:
3
Default
1
jCarousel.visible¶
Property
jCarousel.visible
Data type
Int / null
Description
No. of visible elements (null or a number). Can be used for the big images and the thumbnails.
Anzahl sichtbarer Elemente (null oder eine Zahl). Kann für die großen Bilder und die Thumbnails benutzt werden.
Example / Beispiel:
3
Default
null
jCarousel.vertical¶
Property
jCarousel.vertical
Data type
boolean
Description
Vertical layout?
Vertikales Layout?
Example / Beispiel:
true
Default
false
jCarousel.dynamic¶
Property
jCarousel.dynamic
Data type
boolean
Description
Dynamic elements? See chapter “Administration”. Always false for control-elements.
Dynamische Elemente? Siehe unter “Administration”. Ist immer false für control-Elemente.
Example / Beispiel:
true
Default
false
jCarousel.rtl¶
Property
jCarousel.rtl
Data type
boolean
Description
Scroll right to left?Von rechts nach links scrollen?
Example / Beispiel:
false
Default
false
jCarousel.visible_wrap_start¶
Property
jCarousel.visible_wrap_start
Data type
string
Description
Start of wrap for every jCarousel.visible elementWrap-Beginn für jede Gruppe von jCarousel.visible Elementen
Example / Beispiel:
<div>
Default
jCarousel.visible_wrap_end¶
Property
jCarousel.visible_wrap_end
Data type
string
Description
End of wrap for every jCarousel.visible elementWrap-Ende für jede Gruppe von jCarousel.visible Elementen
Example / Beispiel:
</div>
Default
images.dirName¶
Property
images.dirName
Data type
string
Description
Directory name in the "uploads" (only the folder) or “fileadmin” (whole path) folder. There is no way to use images which are stored directly in the database!Verzeichnis-Namen in dem Ordner "uploads" (nur der Name) oder “fileadmin” (kompletten Pfad angeben). Es gibt keine Möglichkeit Bilder zu benutzen, die direkt in der Datenbank gespeichert werden!
Example / Beispiel:
pics
fileadmin/redaktion/slider
Default
images.maxW¶
Property
images.maxW
Data type
int
Description
Maximal width of images in the img-src-tag
Maximale Breite von Bildern im img-src-Tag
Example / Beispiel:
200
Default
images.maxH¶
Property
images.maxH
Data type
int
Description
Maximal height of images in the img-src-tag
Maximale Höhe von Bildern im img-src-Tag
Example / Beispiel:
120
Default
images.maxWthumb¶
Property
images.maxWthumb
Data type
int
Description
Maximal width of images in the img-src-tag in the control-template
Maximale Breite von Bildern im img-src-Tag im control-Template
Example / Beispiel:
100
Default
images.maxHthumb¶
Property
images.maxHthumb
Data type
int
Description
Maximal height of images in the img-src-tag in the control-template
Maximale Höhe von Bildern im img-src-Tag im control-Template
Example / Beispiel:
70
Default
images.removeWidthHeight¶
Property
images.removeWidthHeight
Data type
int [0-1]
Description
Remove width and height in the image tag? 0: no; 1: yes.
Entferne width und height im Bild-Tag? 0: nein; 1: ja.
Example / Beispiel:
1
Default
0
images.setTitle¶
Property
images.setTitle
Data type
int [0-1]
Description
Set the selected title as ALT-attribute?
Den geholten Titel als ALT-Attribut verwenden?
Example / Beispiel:
1
Default
0
images.checkDefaultLang¶
Property
images.checkDefaultLang
Data type
int [0-1]
Description
tt_news doesn't copy images when translating a news into another language. If set to 1,the image of the default language (0) will be selected when laguage-uid>0.
tt_news kopiert keine Bilder wenn man eine News in einer andere Sprache übersetzt. Bei 1 wird das Bild der News der Standardsprache (0) stattdessen geholt.
Example / Beispiel:
1
Default
0
images.langField¶
Property
images.langField
Data type
string
Description
DB-field with the UID of the content in the default languageDB-Feld mit der UID des Inhalts der Standardsprache
Example / Beispiel:
l18n_parent
Default
t3_origuid
listView.results_at_a_time¶
Property
listView.results_at_a_time
Data type
int
Description
Elements to be shown at allAnzahl der Elemente, die insgesamt angezeigt werden sollen
Example / Beispiel:
5
Default
100
listView.results_at_a_time2¶
Property
listView.results_at_a_time2
Data type
int
Description
Elements to be shown in ###ITEMS2###Anzahl der Elemente die in ###ITEMS### angezeigt werden sollen
Example / Beispiel:
1
Default
disableControl¶
Property
disableControl
Data type
int [0-1]
Description
Disable rendering of control-elements?
Generierung der Control-Elemente abschalten?
Example / Beispiel:
1
Default
0
debug¶
Property
debug
Data type
int [0-1]
Description
Use devlog for debugging?Devlog zum debuggen benutzen?
Example / Beispiel:
1
Default
0
nl2br¶
Property
nl2br
Data type
int [0-1]
Description
If use_stdWrap ist off, replace n or r with <br />?Wenn use_stdWrap aus ist, ersetze n oder r durch <br />?
Example / Beispiel:
1
Default
1
use_stdWrap¶
Property
use_stdWrap
Data type
Int [0-1] or String
Description
Use the following stdWrap for formatting contents? Use it only if you use a RTE-field. 1 for all fields or the field-name.
Soll das folgende stdWrap beim formatieren von Content benutzt werden? Nur dann sinnvoll, wenn man ein RTE-Feld benutzt. 1 für alle Felder den Feldnamen angeben.
Examples / Beispiele:
1
bodytext
Default
0
general_stdWrap¶
Property
general_stdWrap
Data type
COA
Description
StdWrap for parsing RTE-fields, e.g. bodytext in tt_news. In default mode, paragraphs are removed. Use the following value for normal wrapping.
StdWrap zum parsen von RTE-Felder, z.B. Bodytext bei tt_news. Standardmässig werden Paragraphs gelöscht. Folgenden Code für ein normales wrapping benutzen.
Example / Beispiel:
general_stdWrap >
general_stdWrap.parseFunc < lib.parseFunc_RTE
Default
See setup
baseWrap¶
Property
baseWrap
Data type
COA
Description
BaseWrap for parsing the whole content. By default pi_wrapInBaseClass is used.
BaseWrap zum parsen des gesamten Inhalts. Standardmäßig wird pi_wrapInBaseClass benutzt.
Example to get rid of the div/ Beispiel um das div los zu werden (<div class="tx-karussell-pi1">):
baseWrap.wrap = |
Default
((generated))¶
Examples / Beispiele¶
Here a complete example for tt_news.Hier ein vollständiges Beispiel für tt_news.
plugin.tx_karussell_pi1 {
templateFile = fileadmin/template/karussell/beispiel.html
styleFile = fileadmin/template/karussell/beispiel.css
searchFieldList = title,short,image,
linkText = Weiter ...
table = tt_news
andWhere = AND sys_language_uid=###LANG_UID###
parameterUID = tx_ttnews[tt_news]
destinationPID = 70
sort = datetime:DESC
jCarousel {
wrap = 'circular'
animation = 750
easing = 'easeOutBack'
start = 1
scroll = 3
auto = 17
}
listView {
results_at_a_time = 5
}
images {
dirName = pics
maxW = 195
maxH =
checkDefaultLang = 1
langField = l18n_parent
}
}
Here a complete example for cmw_linklist.Hier ein vollständiges Beispiel für cmw_linklist.
plugin.tx_karussell_pi1 {
linkText = Zur Website
table = tx_cmwlinklist_link
searchFieldList = label,description,1,href
parameterUID =
destinationPID =
andWhere = AND status=1
sort = tstamp:DESC
styleFile = EXT:karussell/examples/style_control.css
templateFile = EXT:karussell/examples/template_control.html
listView {
results_at_a_time = 4
}
jCarousel {
animation = 'fast'
dynamic = false
visible = 1
start = 1
scroll = 1
auto = 15
}
}
Complete example for mv_cooking and foreign select: see template_foreign.htmlVollständiges Beispiel für mv_cooking und foreign select: siehe template_foreign.html
* forbidden values: fe_users, be_users, be_sessions, insert, update, delete(, select). Furthermore only configured tables are allowed!
* Verbotene Werte: fe_users, be_users, be_sessions, select, insert, update, delete(, select). Weiterhin sind nur konfigurierte Tabellen erlaubt!
FAQ¶
Are there some differences between TypoScript- and Flexforms- values?Yes, there are. You can choose the starting point only via flexforms. Not every property can be set via flexforms.
Gibt es auch irgendwelche Unterschiede zwischen den TypoScript und den Flexforms-Werten?Ja, die gibt es. Der Ausgangspunkt kann nur per Flexforms ausgewählt werden. Nicht jedes Property kann per Flexform konfiguriert werden.
My flexform- or typoscript-settings are ignored. Whats wrong?
Have you configured the extension in the extension manager (correct)? See chapter Administration / security notice.
Meine Flexform- oder TypoScript-Einstellungen werden ignoriert. Was ist los?
Wurde die Extension im Extension Manager schon (richtig) konfiguriert? Wenn ja, dann werden hier manche Einstellungen aus Sicherheitsgründen ignoriert. Siehe Kapitel Administration / Sicherheitshinweis.
Debugging¶
- How can I debug the extension?You need a debugger extension like “devlog”. Install it and enable the logging with TypoScript (see reference) or via install-tool or directly in the localconf.php:
- Wie kann ich die Erweiterung debugen?Man braucht nun eine Debugger- Erweiterung dafür. Z.B. “devlog”. Installiere sie und schalte das logging per TypoScript (siehe Referenz) oder via Install-Tool ein oder füge diese Zeile in die localconf.php hinzu:
$TYPO3_CONF_VARS['SYS']['enable_DLOG'] = '1';
Tutorial¶
- After you have decided from where you take the data, you should decide how to display them. Therefore I have several example HTML-templates and CSS-files in the examples-folder. I will describe them here.
- Nachdem man entschieden hat, von wo die Daten geholt werden sollen, muss man sich um das Layout kümmern. Deswegen gibt es zahlreiche Beispiel HTML-Templates und CSS-Dateien im examples-Ordner, die hier beschrieben werden.
Template.html¶
File / Datei
Template.html
Description / Beschreibung
Default template for a static layout.
Standard-Template für ein statisches Layout.
Template2.html¶
File / Datei
Template2.html
Description / Beschreibung
Template for a dynamic layout with random start element.
Template für ein dynamisches Layout mit zufälligem Start-Element.
Template3.html¶
File / Datei
Template3.html
Description / Beschreibung
Template for a dynamic layout.
Template für ein dynamisches Layout.
Template4.html¶
File / Datei
Template4.html
Description / Beschreibung
Static layout with a background-image.
Statisches Layout mit dem Bild im Hintergrund.
Template5.html¶
File / Datei
Template5.html
Description / Beschreibung
Template for a dynamic layout with random order of the elements.
Template für ein dynamisches Layout mit zufällig sortierten Elementen.
template_barousel.html¶
File / Datei
template_barousel.html
Description / Beschreibung
Example for the JS-plugin “jQuery Barousel”.Beispiel für das JS-Plugin “jQuery Barousel”.
template_bootstrap.html¶
File / Datei
template_bootstrap.html
Description / Beschreibung
Example for the JS-plugin “Bootstrap Carousel”.Beispiel für das JS- Plugin “Bootstrap Carousel”.
template_carousel.html¶
File / Datei
template_carousel.html
Description / Beschreibung
Example for the JS-plugin “jQuery Carousel”.Beispiel für das JS-Plugin “jQuery Carousel”.
template_ccc.html¶
File / Datei
template_ccc.html
Description / Beschreibung
This example for tt_news uses the “circular content carousel” plugin.Dieses Beispiel für tt_news benutzt das “circular content carousel”-JS-plugin.
template_ccc_quiz.html¶
File / Datei
template_ccc_quiz.html
Description / Beschreibung
Like template_ccc.html, but for the myquizpoll-extension and a smaller design.Wie template_ccc.html, aber für myquizpoll statt tt_news. Benutzt auch andere Styles.
template_control.html¶
File / Datei
template_control.html
Description / Beschreibung
Static layout with 4 static control elements and a background-image.
Statisches Layout mit 4 statischen Kontroll-Elementen und die Bilder im Hintergrund.
template_control2.html¶
File / Datei
template_control2.html
Description / Beschreibung
Static layout with 4 static control elements and a stop/play link.
Statisches Layout mit 4 statischen Kontroll-Elementen und der Pause- Möglichkeit.
template_control3.html¶
File / Datei
template_control3.html
Description / Beschreibung
Static layout with dynamic control elements (title of tt-news elements).
Statisches Layout mit dynamischen Kontroll-Elementen (Titel von tt- news-Elementen).
template_control4.html¶
File / Datei
template_control4.html
Description / Beschreibung
Similar too template_thumbnails2.html, but without thumbnails.
Ähnlich wie template_thumbnails2.html, aber ohne Thumbnails.
template_elastislide.html¶
File / Datei
template_elastislide.html
Description / Beschreibung
Example that uses the responsive JS-plugin Elastslide.Beispiel, dass das responsive JS-Plugin Elastislide benutzt.
template_flexslider2.html¶
File / Datei
template_flexslider2.html
Description / Beschreibung
Example that uses the responsive JS-plugin WooThemes Flexslider 2.Beispiel, dass das responsive JS-Plugin WooThemes Flexslider 2 benutzt.
template_foreign.html¶
File / Datei
template_foreign.html
Description / Beschreibung
Static layout with select from more than 4 db-fields. Very simple layout.
Statisches Layout mit Selects von mehr als nur 4 DB-Feldern. Ganz einfaches Layout.
template_galleryview.html¶
File / Datei
template_galleryview.html
Description / Beschreibung
Example that uses the JS-plugin GalleryView.Beispiel, dass das JS- Plugin GalleryView benutzt.
template_galleryview2.html¶
File / Datei
template_galleryview2.html
Description / Beschreibung
Example that uses the JS-plugin jQuery GalleryView and jQuery FancyBox.Beispiel, dass das JS-Plugin jQuery GalleryView und FancyBox benutzt.
template_infinite.html¶
File / Datei
template_infinite.html
Description / Beschreibung
Example that uses only pure jQuery for an infinite carousel.Beispiel, dass nur jQuery für ein endloses Karussell benutzt.
template_innerfade.html¶
File / Datei
template_innerfade.html
Description / Beschreibung
A simple fading example that uses only jQuery and innerfade (without jCarousel).
Ein einfaches Beispiel, dass nur jQuery und innerfade benutzt (ohne jCarousel).
tamplate_malihu.html¶
File / Datei
tamplate_malihu.html
Description / Beschreibung
Simple jQuery fullscreen image gallery...Einfaches Vollbild-Bild- Gallerie-Beispiel, welches nicht richtig funktioniert...
template_orbit.html¶
File / Datei
template_orbit.html
Description / Beschreibung
Example for the JS-plugin “Foundation Orbit”.Beispiel für das JS- Plugin “Foundation Orbit”.
template_pure.html¶
File / Datei
template_pure.html
Description / Beschreibung
A simple infinite example that uses only jQuery and infiniteCarousel (without jCarousel).
Ein einfaches Endlos-Beispiel, dass nur jQuery und infiniteCarousel benutzt (ohne jCarousel).
template_responsive.html¶
File / Datei
template_responsive.html
Description / Beschreibung
A nice responsive example that uses only jQuery.
Ein nettes responsives Beispiel, dass nur jQuery benutzt.
template_roundabout.html¶
File / Datei
template_roundabout.html
Description / Beschreibung
Deprecated. Use the following template instead!
Veraltet. Benutze stattdessen das nachfolgende Template!
template_roundabout_ul.html¶
File / Datei
template_roundabout_ul.html
Description / Beschreibung
This example doesn´t work with jCarousel. It works with “Roundabout for jQuery”.
Dies ist kein jCarousel-Beispiel. Hier wird “Roundabout for jQuery” benutzt.
template_simple.html¶
File / Datei
template_simple.html
Description / Beschreibung
A very simple example only with images.
Ein ganz einfaches Beispiel nur mit Bildern.
template_scrollable.html¶
File / Datei
template_scrollable.html
Description / Beschreibung
An exampple that uses jQuery TOOLS Scrollable for a nice image gallery.
Ein Beispiel, dass jQuery TOOLS Scrollable nutzt für eine schöne Bilder-Gallerie.
template_thumbnails.html¶
File / Datei
template_thumbnails.html
Description / Beschreibung
Static layout with thumbnails for each content.
Statisches Layout mit Thumbnail-Bildern von jedem Element.
template_thumbnails2.html¶
File / Datei
template_thumbnails2.html
Description / Beschreibung
Another static layout with thumbnails for each image.
Weiteres statisches Layout mit Thumbnail-Bildern.
You can select more than 4 fields form the database in the static layout. Just write the name of these fields after the first 4 obligatory fields. These values can be accessed in the template like this: ###LOCAL_your-field-name###. You find an example in the template_foreign.html file. You find there an example for a foreign select too. You can use your selected values in the foreign select too. Example of a foreign select: SELECT nom FROM tx_mvcooking_saison WHERE uid=###LOCAL_SAISON###. The foreign values can be accessed in the template like this: ###FOREIGN_your- field-name###.
Man kann in der statischen Version auch mehr als 4 Felder aus der Datenbank holen. Dazu schreibt man die weiteren Felder einfach hinter die ersten 4 obligatorischen Felder. Man kann darauf im Template wie folgt zugreifen: ###LOCAL_dein-Feld-Name###. Man findet ein Beispiel dazu in dem Template template_foreign.html. Man findet dort ebenfalls ein Beispiel für ein Select auf eine zweite Tabelle. Man kann die geholten Werte auch im 2. Select benutzen. Beispiel für so ein 2. Select: SELECT nom FROM tx_mvcooking_saison WHERE uid=###LOCAL_SAISON###. Die Werte aus diesem 2. Select können wie folgt im Template benutzt werden: ###FOREIGN_dein-Feld-Name###.
Who wants to take other JavaScript-plugins should take a look at the “template_roundabout.html”. You will see: this extension is very flexible and can be used with your own JavaScript-plugin.
Wer andere JavaScript-Plugins benutzen will, sollte ein Blick in das “template_roundabout.html” werfen. Wie man sieht, ist diese Extension sehr flexibel und kann auch mit eigenen JavaScript-Plugsins verwendet werden.
Add-Ons¶
You are seeking for an add-on extension? Take a look at:
Du sucht noch eine Erweiterungs-Extension dazu? Wirf einen Blick hier drauf: http://www.quizpalme.de/myquizandpoll/download/myquizpoll- addons.html
Known problems / Bekannte Probleme¶
- If not all elements are completely visible, it can cause ugly upheaval in some browsers.
- Wenn nicht alle Elemente komplett sichtbar sind, kann es bei manchen Browsern zu hässlichen Umbrüchen kommen.
- Recursive field will be ignored? Solution: choose all pages manually under the “Startingpoint”.
- Das Rekursiv-Feld wird ignoriert? Lösung: wähle alle Seiten manuell aus unter “Ausgangspunkt”.
- The control-examples does not work with IE < 7.
- Die control-Beispiele funktionieren nicht mit alten Browsern wie dem IE 6.
- There are some problems if you use the jCarousel version 0.2.8.
- Es ist mit Problemen zu rechnen, wenn man die jCarousel Version 0.2.8 verwendet.
- Circular-carousels are in some cases susceptible. Use the 'both' wrap in case of troubles.
- Circular-Karusselle sind manchmal anfällig. Bei auftretenden Problemen sollte man z.B. 'both' bei wrap wählen.
- The used jCarousel version 0.2.7 works only with jQuery version < 1.9.0.
- Das benutzte jCarousel Version 0.2.7 funktioniert nur mit jQuery Version < 1.9.0.
ChangeLog / Änderungen¶
- Changelog of this extension.
- Änderungsliste dieser Extension.
0.1.7¶
Version
0.1.7
Date
14.07.2010
Changes
jCarousel.wrap and andWhere added. Control-example added. Upload to TER.
jCarousel.wrap und andWhere hinzugefügt. Control-Beispiel hinzugefügt. Upload ins TER.
0.1.8¶
Version
0.1.8
Date
17.07.2010
Changes
###LANG_UID### at andWhere added. Images.checkDefaultLang, use_stdWrap and general_stdWrap added.
###LANG_UID### bei andWhere hinzugefügt. Images.checkDefaultLang, use_stdWrap und general_stdWrap hinzugefügt.
0.1.9¶
Version
0.1.9
Date
03.08.2010
Changes
Control example changed.
Control-Beispiel geändert.
0.2.0¶
Version
0.2.0
Date
01.10.2010
Changes
Jcarousel 0.2.5 added. Version 0.2.3 and 0.2.4 removed. One more example added. Item.nr / ###NR### added. sort-Bug fixed.
Jcarousel 0.2.5 hinzugefügt. Die Versionen 0.2.3 und 0.2.4 entfernt. 1 Beispiel hinzugefügt. Item.nr bzw. ###NR### hinzugefügt. Den Sortier- Bug behoben.
0.2.1¶
Version
0.2.1
Date
14.11.2010
Changes
Jcarousel 0.2.7 in use. TypoScript jsFile added. ###TEMPLATE_CONTROL### is new (in the new example template_control3.html). Changes at use_stdWrap. Bugs fixed: auto=0 was ignored. ###MAX### was not always correct.
Jcarousel 0.2.7 benutzt. TypoScript jsFile ist neu. ###TEMPLATE_CONTROL### ist neu (im neuen template-control3.html Beispiel). Änderungen bei use_stdWrap. Bugs behoben: auto=0 wurde ignoriert. ###MAX### war nicht immer korrekt.
0.3.0¶
Version
0.3.0
Date
14.12.2010
Changes
images.setTitle added.###UID### and ###IS_START### in ###TEMPLATE_ITEM#### added. ###UID### in ###TEMPLATE_GLOBAL#### added.You can now select more than 4 fields from the DB and you can select fields from an second table too.template_foreign.html, template_simple.html and template_roundabout.html added.
images.setTitle ist neu.###UID### und ###IS_START### in ###TEMPLATE_ITEM#### hinzugefügt. ###UID### in ###TEMPLATE_GLOBAL#### hinzugefügt.Man kann nun mehr als 4 Felder aus der DB holen und man kann auch aus einer weiteren Tabellen Daten holen.template_foreign.html, template_simple.html und template_roundabout.html hinzugefügt.
0.4.0¶
Version
0.4.0
Date
06.02.2011
Changes
Images.maxWthumb and images.maxHthumb added. Thumbnails-template added.
Images.maxWthumb und images.maxHthumb hinzugefügt. Thumbnails-Template hinzugefügt.
0.5.0¶
Version
0.5.0
Date
28.07.2011
Changes
Examples template_pure.html and template_innerfade.html added.###UID###, ###PID###, ###PARAM_UID### at andWhere added.TS loadEverytime added.
Beispiele template_pure.html und template_innerfade.html hinzugefügt.###UID###, ###PID###, ###PARAM_UID### bei andWhere hinzugefügt.TS loadEverytime hinzugefügt.
0.5.2¶
Version
0.5.2
Date
07.10.2011
Changes
TS images.langField added. Thumbnails-template 2 added.Bug fixed: JS error with empty easing and non static template.
TS images.langField hinzugefügt. Thumbnails-Template 2 hinzugefügt.Bug gefixt: JS Fehler, wenn easing leer ist und kein statisches Template gewählt wurde.
0.6.0¶
Version
0.6.0
Date
13.12.2011
Changes
###MAX### now available in ###TEMPLATE_ITEM#### and ###TEMPLATE_CONTROL#### too. Control 4 example added.Roundabout- template is now deprecated, use the ul-version of the roundabout- template.Deprecated functions replaced.TS “debug” removed. Using now devLog.TS “disableControl” added to avoid db-selects if you don´t need control-elements.
###MAX### ist nun auch in ###TEMPLATE_ITEM#### und ###TEMPLATE_CONTROL#### verfügbar. Control 4 Beispiel hinzugefügt.Das Roundabout-Template ist veraltert. Benutze stattdessen die UL-Version dieses Templates.Veraltete Funktionen ersetzt.TS “debug” entfernt. Ab jetzt wird devLog benutzt.TS “disableControl” hinzugefügt, damit man unnötige Abfragen ausschalten kann.
0.6.3¶
Version
0.6.3
Date
12.2.2012
Changes
Bug fixed: foreign select didn´t worked in the version 0.6.0.Bug fixed: if there are more than one image, take only the first one.template_ccc.html and template_ccc_quiz.html added.
Bug gefixt: foreign select klappte in der Version 0.6.0 nicht mehr.Bug gefixt: bei mehreren Bildern wird nun nur das erste Bild genommen.template_ccc.html und template_ccc_quiz.html hinzugefügt.
0.7.0¶
Version
0.7.0
Date
7.5.2012
Changes
“rand()” is allowed for sort. Template5.html added.Link generation improved. Target/###TARGET### added.TS/Flexform “crop” added.Deprecated methods replaced.
“rand()” kann bei sort benutzt werden. Template5.html hinzugefügt .Link-Erzeugung verbessert. Target/###TARGET### hinzugefügt.TS/Flexform “crop” hinzugefügt.“Deprecated” Methoden ersetzt.
1.0.0¶
Version
1.0.0
Date
16.10.2012
Changes
TS “fimila”, “nl2br”, “listView.results_at_a_time2”, “baseWrap”, “visible_wrap_start” and “visible_wrap_end” added.Templates template_scrollable.html, template_malihu.html, template_barousel.html and template_carousel.html added.###ITMES2### and ###TEMPLATE_ITEM2### as optional marker added. Important changes : no JS-file will be included if “jsFile” is empty!Default value for “istView.results_at_a_time” changed from 5 to 100!“jCarousel.dynamic” will be always false for the control-elements!
TS “fimila”, “nl2br”, “listView.results_at_a_time2”, “baseWrap”, “visible_wrap_start” und “visible_wrap_end” hinzugefügt.Templates template_scrollable.html, template_malihu.html, template_barousel.html und template_carousel.html hinzugefügt.###ITEMS2### und ###TEMPLATE_ITEM2### als optionale Marker hinzugefügt. Wichtige Änderungen : es wird keine JS-Datei mehr includiert, wenn “jsFile” leer ist.Standard-Wert für “istView.results_at_a_time” von 5 auf 100 gesetzt!“jCarousel.dynamic” wird nun für control-Elemente immer auf “false” gesetzt!
1.1.0¶
Version
1.1.0
Date
31.1.2013
Changes
Template template_galleryview.html, template_bootstrap.html and template_orbit.html added. Security improvements. See chapter Administration / security notice.
Template template_galleryview.html, template_bootstrap.html und template_orbit.html hinzugefügt.Erhöhung der Sicherheit. Siehe Kapitel Administration / Sicherheitshinweis.
1.2.0¶
Version
1.2.0
Date
3.2.2013
Changes
Important security improvements: the extensions must be configured after the installation! Type in the allowed tables or the whole select-statements.
Erhöhung der Sicherheit: die Extension muss nach der Installation konfiguriert werden: entweder erlaubte Tabellen angeben oder die kompletten Selects.
1.3.0¶
Version
1.3.0
Date
6.4.2013
Changes
Some “exclude” in the flexform removed.###CONT_UID### (uid of the content element) added in the list items.HTML-template template_galleryview2.html added.TS images.removeWidthHeight added.Now Typo3 6.0 compatible.
Einige “exclude”-Anweisungen in den Flexforms entfernt.###CONT_UID### (uid vom Content-Element) bei den List-Items hinzugefügt.HTML-Template template_galleryview2.html hinzugefügt.TS images.removeWidthHeight hinzugefügt.Jetzt Typo3 6.0 kompatibel.
1.4.0¶
Version
1.4.0
Date
19.7.2013
Changes
The Typo3 link tag can be used in links now too. And other small bugs fixed.You can now use the fileadmin-folder too.template_responsive.html, template_infinite.html, template_elastislide.html and template_flexslider2.html added.
Ein Typo3 Link Tag kann nun bei Links ebenfalls verwendet werden. Und andere kl. Bug-fixes.Man kann nun auch einen Bilder-Ordner im fileadmin-Verzeichnis wählen.template_responsive.html, template_infinite.html, template_elastislide.html und template_flexslider2.html hinzugefügt.
1.4.2¶
Version
1.4.2
Date
19.12.2013
Changes
Typo3 6.1 BugFix (foreign select). Note to my new extension added.
Typo3 6.1 BugFix (foreign select). Hinweis über meine neue Extension hinzugefügt.
1.4.4¶
Version
1.4.4
Date
10.04.2014
Changes
Typo3 6.2 Bugfix.
1.4.5¶
Version
1.4.5
Date
26.12.2014
Changes
Incompatible Safari-check removed in JavaScript. Manual updated.
Inkompatiblen Safari-Check im JavaScript entfernt. Diese Doku aktualisiert.
21