Das Internet entwickelt sich stetig weiter und so natürlich auch die Ansichten, zu einigen Dingen. War ich früher noch absoluter JavaScript Gegner bin ich nun teilweise ein Fan des ganzen geworden und finde, dass man es als Zusatz zu der sonst statischen Seite gerne anbieten kann.
So möchte ich im Moment für eine meiner Seiten, dass ich einzelne Inhalte verlinke und diese dann in einer kleinen Box direkt aufgehen, wenn man auf den Link klickt. Es geht um kurze Informationen und darum, dass man das mitten im Text lesen kann.
Im Prinzip ist es eine Lightbox, jedoch habe ich diese etwas abgewandelt.
Es gibt einige Lightboxes, welche das ganze schon erfüllen, Just2Be hat eine schöne geschrieben, aber irgendwie hat die nicht das erfüllt, was ich gerne gehabt hätte.
Was meine Lightbox besser kann als die von Just2Be:
Meine Lightbox wird nur von Leuten verwendet, die JavaScript anhaben. Wer kein JavaScript an hat, der wird ganz normal auf die Seite auf der der Inhalt ist weiter geleitet. Dadurch vermeide ich Seiten auf denen nur ein hässlicher Inhalt und keine Navigation und kein Header ist.
Außerdem ist die spätere Bedienung viel einfacher, da man nur noch eine TypoLink Klasse einstellen muss.
Nachdem ich mich in der großen Liste von Lightboxen umgeschaut habe, viel mein Wunsch auf die Floatbox. Der Vorteil ist, dass ich ohne ein Framework arbeite und alles Klassengesteuert ist. Da drüber kann man es wesentlich schneller und einfacher ansprechen.
Was brauchen wir damit das ganze in Typo3 läuft?
- eine Linkklasse floatbox
- Floatbox bei Bildern einstellen
- Eine Seite für einzelne Inhalte erstellen
- Das Einbinden eines Scripts zum Umschreiben einiger Links
- Das Einbinden von FloatBox
Eine Linkklasse Floatbox erstellen
Das geht recht einfach. Ich gestehe auch einfach nur geklaut und kopiert zu haben, aber es läuft. Folgenden Code in die TS Config eurer Wurzelseite packen:
RTE.classesAnchor {
internalLink {
class = floatbox
type = page
titleText = Lightbox Link
}
}
RTE.default {
classesAnchor = internal-link, external-link, floatbox
classesAnchor.default {
page = internal-link
url = external-link
file =
mail =
}
proc {
allowedClasses (
external-link, internal-link, floatbox
)
}
}
( Rechtklick auf die Wurzelseite ( die mit dem Template ), Seiteneigenschaften und dann Optionen )
Floatbox bei Bildern einstellen
Damit Floatbox auch bei Bildern Problem los läuft müssen wir floatbox sagen, dass es sich dabei um ein Bild handelt. Dann wird bei der „OnKlick“-Vergrößerung automatisch die Floatbox verwendet. Dazu müsst ihr in eurem Template ( Setup ) an entsprechender Stelle folgenden TypoScript Code einfügen:
tt_content.image.20.1 {
imageLinkWrap >
imageLinkWrap = 1
imageLinkWrap {
enable.field = image_zoom
enable.ifEmpty.typolink.parameter.field = image_link
enable.ifEmpty.typolink.parameter.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
enable.ifEmpty.typolink.returnLast = url
typolink {
target = {$styles.content.links.target}
extTarget = {$styles.content.links.extTarget}
parameter.cObject = IMG_RESOURCE
parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile
parameter.override.field = image_link
parameter.override.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
parameter.override.if.isTrue.field = image_link
ATagParams = class="floatbox_img" rev="type:img"
}
}
}
Kurze Erklärung warum ich hier die Klasse floatbox_img einführe: Bei meiner Umschreibung mit JavaScript beziehe ich mich auf die Klasse. Wenn ich die Selbe Klasse verwende, wird der Bilderlink umgeschrieben und es wird nicht so klappen, wie ich es gerne hätte. Floatbox_img wird aber später noch umgeschrieben zu floatbox.
Eine Seite für einzelne Inhalte erstellen
Das geht ganz einfach. Erstellt einfach eine neue Seite, macht ein neues Template als Erweiterung ( +ext ), dann gebt ihr im Setup folgendes ein:
temp.record = COA
temp.record {
10 = RECORDS
10 {
tables = tt_content
select.field=*
source.data = GPvar:small
if.isTrue.data = GPvar:small
dontCheckPid = 1
Wrap=|
}
}
config.noPageTitle = 2
config.disableAllHeaderCode = 1
page.10 < temp.record
page.20 >
page.21 >
und merkt euch bitte die SeitenID. Später wird auch erklärt, warum ihr page.20 und page.21 hier überschreibt.
Das Umschreibe-Script
Das ist ein kleines JavaScript, welches man einbinden muss. Die Einbindung mache ich im späteren Teil. Erstellt einfach irgendwo im Fileadmin eine neue Datei mit dem Namen scripts.js und füllt die Datei mit folgendem Inhalt:
var links=document.getElementsByClassName('floatbox');
for(var i=0; i < links.length; i++){
var ids=links[i].href;
var t=ids.replace(/((.*)\.html)#c(\d{2})/, "index.php?id=36&small=$3&no_cache=1" );
links[i].rev="type:ajax width:530 height:350 scrolling:auto href:`"+t+"`";
}
var links1=document.getElementsByClassName("floatbox_img");
for(var i=0; i < links1.length; i++){
links1[i].addClassName("floatbox");
}
Was hier zu beachten ist: die id=36 müsst ihr anpassen zu der Seite, auf welcher ihr die Einzelinhalte anzeigen wollt. Width und Heigh könnt ihr auch anpassen.
Das einbinden der JavaScriptDateien
Ich gehe nun einfach mal davon aus, dass ihr schon Floatbox besitzt und in einem Ordner habt. Die CSS Datei, die bei Floatbox beiliegt würde ich an eurer Stelle in meine eigene CSS Datei mit einbinden ( copy + paste ), dadruch spart ihr euch wieder TS und spätersten Quellcode.
Die JavaScript Dateien müssen nun eingebunden werden. Die Reihenfolge dabei ist wichtig, und es ist wichtig, dass das ganze am Ende der Seite geschieht. Wenn mein letzes Inhaltselement nun page.10 wäre, würde ich die Dateien bei page.20 und page.21 einbinden. Das müsst ihr dann hier und oben beim überschreiben anpassen.
20 = HTML
20.value=<script language="javascript" type="text/javascript" src="fileadmin/templates/shadowrun_v1/scripts.js"></script>
21 = HTML
21.value=<script language="javascript" type="text/javascript" src="fileadmin//templates/shadowrun_v1/floatbox/floatbox.js"></script>
Die Pfade müsst ihr natürlich anpassen.
Nun sollte alles laufen. Ich hoffe, dass ich nichts vergessen habe.
Sollte ich was vergessen haben oder es läuft bei jemandem nicht, so bitte einfach melden, dann helfe ich gerne beim umschreiben.
Gruß
Bastian
Dieser Beitrag ist eigentlich für meinen Blog Horas-Reich.de/feed und wird dort am 13.Juli erscheinen. Er ist nur hier zu finden, damit er nicht in den Weiten des Webs untergeht.