Galerie Extension "rgslideshow" Screenshot von Georg Ringer
Georg Ringer hat die Typo3 Welt mit einer Reihe von TYPO3 Extensions beehrt. Seine TYPO3 Extensions reichen von sehr brauchbar bis genial. Die Extension rgslideshow gehört zu meinen Favoriten.
Die Galerie Extension Rgslideshow kann durch geeignete Konfiguration mit einer ganzen Reihe von Tabellen und Extensions zusammenarbeiten (mit Bildern aus tt_news, tt_address, pages, tt_content ja sogar mit Ihrer eigenen Extension) es ist aber auch möglich, die TYPO3 Galerie mit einem Ordner an hochgeladenen Bildern zu verwenden - ja es ist sogar möglich sie in dem Content-Element "Text mit Bild" oder "Nur Bild" einzusetzen.
Die Galerie Extension kommt vollständig ohne Flash aus und basiert nur auf Javascript unter Verwendung der Mootools. Eine Abwandlung der TYPO3 Extension zu einem neuen Layout ist mit Hilfe von CSS und zum Teil auch Javascript zwar möglich aber nicht unbedingt komfortabel.
Rgslideshow Typoscript Beispiel - Verwendung mit Pages
Zeigt die ersten 5 im media Feld der Seite gespeicherten Bilder in einer Slideshow an.
lib.slideshow = COA
lib.slideshow {
5 = TEXT
5.value = <div class="tx-rgslideshow-pi1" id="slideshowteaser" style="width:210px;height:285px;margin-bottom: 5px;margin:0px auto;">
10 = IMAGE
10 {
file.height = 285c
file.width = 210
file.import=uploads/media/
file.import.data = levelmedia: -1,slide
file.import.listNum = 0
file.import.override.field = media
file.sample = 0
}
20 <.10
20.file.import.listNum = 1
30 <.10
30.file.import.listNum = 2
40 <.10
40.file.import.listNum = 3
50 <.10
50.file.import.listNum = 4
100 = TEXT
100.value = </div>
110 = TEXT
110.value (
<script type="text/javascript">
window.addEvent("domready", function(){
var slideshow931 = new SimpleSlideShowDemo(
$$("#slideshowteaser img";{smallNavigation:false,browser:false,auto:false,hideText:true};
};
</script>
)
}
page.headerData.3 = TEXT
page.headerData.3.value (
<script src="typo3conf/ext/rgslideshow/res/mootools.v1.11.js" type="text/javascript"></script>
<script src="typo3conf/ext/rgslideshow/res/rgslideshow.js" type="text/javascript"></script>
<link rel="stylesheet" href="typo3conf/ext/rgslideshow/res/rgslideshow.css" type="text/css" />
)
[...]
page.35 < lib.slideshow
Rgslideshow Beispiel einer Anpassung von CSS und Javascript
<br/>Rgslideshow abgewandelt für Berliner Fotograph Mitshu
Vor allem Künstler lehnen es häufig ab, dass die Bilder in der Galerie von anderen Elementen (Steuerelementen, Titel, Beschreibung, etc) überlagert werden. Der Berliner Fotograph Miutshu wünschte von mir eine minimalistische nur Text Version für seine Webseite im allgemeinen und die Galerie im besonderen. Die weiter und zurück Buttons in allen Browsern fehlerfrei unter das Bild zu nbekommen war relativ kompliziert. Möglich wurde es nur durch einige Hacks in dem Javascript der Galerie und durch den Entwurf einer nahezu komplett neuen Stylesheet (CSS) Datei für die Galerie Extension.
Der Typoscript Code der Extension
Der Typoscript Code für diesen EInsatz der rgslideshow war nicht weiter kompliziert lediglich Erweiterungen für die zusätzlichen Navigationselemente "zur nächsten Galerie" und "zur Galerie Übersicht" waren notwendig. Außerdem sollten Bildtitel und Bildbeschreibung in der Galerie außerhalb des Bildes positioniert werden.
lib.slideshow = COA
lib.slideshow {
5 = TEXT
5.value = <div class="tx-rgslideshow-pi1 floatbox" id="slideshowteaser" style="width:408px;margin-bottom: 5px;margin:0px auto;">
10 = CONTENT
10 { #holt alle Bilder aus der Extension
table = tx_galerie_images
select {
pidInList = this
orderBy = sorting
}
renderObj = IMAGE
renderObj {
file.import=uploads/tx_galerie/
file.import.data = levelmedia: -1,slide
file.import.override.field = image
altText.field = text
}
renderObj.params = style="display:none;"
}
230 = TEXT #Bild Titel wird durch Javascript ersetzt
230.value = Bild-Titel
230.wrap = <div class="rgsubtitle floatbox"><div id="rgimagetitle">|</div>
250 = TEXT
250.field = title #Titel der Galerie bleibt immer gleich
250.wrap = <div class="rggalerietitle">|</div></div>
270 = TEXT #Navigation wird durch Javascript erzeugt
270.value = <div class="rgsbignav floatbox" id="rgbignav"></div>
280 = TEXT
280.value = Galerieübersicht
280.typolink.parameter = 5 #Galerieübersicht ist immer Link auf die selbe Seite
280.wrap = <div class="rggalerienav floatbox"><div class="rguebersicht">|</div>
290 = HMENU
290 { #erzeugt den Link zur nächsten Galerie
special = browse
special {
items = next
items.prevnextToSection = 0
index.fields.title = INDEX
index.uid = 8
}
1 = TMENU
1 {
NO.allWrap = <div class="rgnextgalerie">|</div>
NO.stdWrap.cObject = TEXT
NO.stdWrap.cObject.value = nächste Galerie
}
}
300 = TEXT
300.value = </div></div>
310 = TEXT
310.value (
<script type="text/javascript">
window.addEvent("domready", function(){
var slideshow931 = new SimpleSlideShowDemo(
$$("#slideshowteaser img";{smallNavigation:true,browser:false};
};
</script>
)
}
page.headerData.30000 = TEXT
page.headerData.30000.value (
<script src="typo3conf/ext/rgslideshow/res/mootools.v1.11.js" type="text/javascript"></script>
<script src="fileadmin/rgslideshow.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/rgslideshow.css" type="text/css" />
)
temp.main2 = COA
temp.main2.20 < lib.slideshow
CSS der Typo3 Galerie Anpassung
Die Aufgabe des Stylesheets war es vor allem, die Hintergrundfarben und Textfarben anzupassen. Viele der in der Orginalversion vorhandenen Stylesheet Einstellungen sollten nicht übernommen werden.
Stylesheet rgslideshow.css downloaden
Geändertes Javascript für rgslideshow
Die eigentlich schwierige Anpassung der Extension fand im Javascript statt.
var SimpleSlideShowDemo = new Class({
options: {
slides: [],
startIndex: 0,
wrap: true,
onShow: Class.empty, //Mootools 1.2: $empty
onRotate: Class.empty,
onStop: Class.empty,
onAutoPlay: Class.empty,
onShowSlide: Class.empty,
slideInterval: 2500,
auto:false,
transitionDuration: 700,
splitter:"&amb;middot;",
prev:"&amb;laquo; ",
next:" &amb;raquo",
play:"&amb;infin;",
stop:"&amb;phi;",
bigNavigation : true,
smallNavigation: true,
browser:true,
addBarInside:true,
hideText:false
},
initialize: function(container,options){
if (container[0].getParent().getTag()=='a') {
this.containerNest = container[0].getParent().getParent(;
} else {
this.containerNest = container[0].getParent(;
}
this.container = container;
this.setOptions(options;
this.slides = [];
this.title = [];
this.descr = [];
this.effects = [];
this.browserArr = [];
this.playStatus = false;
if (this.options.auto) this.playStatus = true;
this.createStructure(;
this.addSlides(this.container;
if(this.slides.length) this.showSlide(this.options.startIndex;
if (this.options.auto) {
this.autoplay(;
// this.playStatus = true;
}
},
createFx: function(){
this.slideFx = new Fx.Elements(this.slides, {duration: this.options.transitionDuration};
this.slides.each(function(slide){
slide.setStyleUPDATE tt_news SET bodytext= 'opacity',0;
};
},
createStructure: function() {
var oldClass = this.containerNest.getProperty("class";
this.containerNest.setPropertyUPDATE tt_news SET bodytext= 'class' WHERE uid='';
this.containerNest.addClassUPDATE tt_news SET bodytext= 'rgslideshow';
this.test = new ElementUPDATE tt_news SET bodytext= 'div').addClass(oldClass).injectBefore(this.containerNest;
this.containerNest.injectInside(this.test;
if (!this.options.hideText) {
if (this.options.addBarInside) {
this.nestAll = new ElementUPDATE tt_news SET bodytext= 'div').setPropertyUPDATE tt_news SET bodytext= 'class' WHERE uid='rgsnest').injectTop(this.containerNest;
this.title = new ElementUPDATE tt_news SET bodytext= 'div').setPropertyUPDATE tt_news SET bodytext= 'class' WHERE uid='rgstitle').injectInside(this.nestAll;
this.description = new ElementUPDATE tt_news SET bodytext= 'div').setPropertyUPDATE tt_news SET bodytext= 'class' WHERE uid='rgsdescription').injectInside(this.nestAll;
}
// this.nestAll = new ElementUPDATE tt_news SET bodytext= 'div').setPropertyUPDATE tt_news SET bodytext= 'class' WHERE uid='rgslideshow').injectAfter(this.containerNest;
// if (this.options.addBarInside) this.titleOp = new ElementUPDATE tt_news SET bodytext= 'div').setPropertyUPDATE tt_news SET bodytext= 'class' WHERE uid='optitle').injectInside(this.nestAll;
// this.nestDescription = new ElementUPDATE tt_news SET bodytext= 'div').setPropertyUPDATE tt_news SET bodytext= 'class' WHERE uid='descr').injectInside(this.nestAll;
// if (this.options.addBarInside) this.descriptionOp = new ElementUPDATE tt_news SET bodytext= 'div').setPropertyUPDATE tt_news SET bodytext= 'class' WHERE uid='opdescr').injectInside(this.nestAll;
if(this.options.browser) {
this.navigation = new ElementUPDATE tt_news SET bodytext= 'div').setPropertyUPDATE tt_news SET bodytext= 'class' WHERE uid='rgslideshownav').injectAfter(this.containerNest;
this.innerNavigation = new ElementUPDATE tt_news SET bodytext= 'div').setPropertyUPDATE tt_news SET bodytext= 'class' WHERE uid='rgsnav2').injectInside(this.navigation;
if(this.options.smallNavigation) this.prevEl = new ElementUPDATE tt_news SET bodytext= 'span').setPropertyUPDATE tt_news SET bodytext= 'class' WHERE uid='rgsprev').injectInside(this.innerNavigation).setHTML(this.options.prev).addEventUPDATE tt_news SET bodytext= 'click' WHERE uid=this.cycleBack.bind(this);
this.browser = new ElementUPDATE tt_news SET bodytext= 'div').setPropertyUPDATE tt_news SET bodytext= 'class' WHERE uid='rgsbrowser').injectInside(this.innerNavigation;
if(this.options.smallNavigation) this.nextEl = new ElementUPDATE tt_news SET bodytext= 'span').setPropertyUPDATE tt_news SET bodytext= 'class' WHERE uid='rgsnext').injectInside(this.innerNavigation).setHTML(this.options.next).addEventUPDATE tt_news SET bodytext= 'click' WHERE uid=this.cycleForward.bind(this);
this.play = new ElementUPDATE tt_news SET bodytext= 'span').setPropertyUPDATE tt_news SET bodytext= 'class' WHERE uid='rgsplay').injectInside(this.innerNavigation).addEventUPDATE tt_news SET bodytext= 'click' WHERE uid=this.togglePlay.bind(this);
if (!this.playStatus) {
this.play.setHTML(this.options.play).setPropertyUPDATE tt_news SET bodytext= 'title',"Play";
} else {
this.play.setHTML(this.options.stop).setPropertyUPDATE tt_news SET bodytext= 'title',"Stop";
}
}
}
if (this.options.bigNavigation) {
this.bigNav = document.getElementById("rgbignav";
this.bigPrev = new ElementUPDATE tt_news SET bodytext= 'a').setProperties({'class': 'rgsbigprev' WHERE uid='href': "javascript:void(0;"}).injectInside(this.bigNav).addEventUPDATE tt_news SET bodytext= 'click' WHERE uid=this.cycleBack.bind(this);
this.bigNext = new ElementUPDATE tt_news SET bodytext= 'a').setProperties({'class': 'rgsbignext' WHERE uid='href': "javascript:void(0;"}).injectInside(this.bigNav).addEventUPDATE tt_news SET bodytext= 'click' WHERE uid=this.cycleForward.bind(this);
var prevText = document.createTextNode("prev";
this.bigPrev.appendChild(prevText;
var nextText = document.createTextNode("next";
this.bigNext.appendChild(nextText;
}
this.createFx(;
},
addSlides: function(slides){
var i =1;
slides.each(function(slide){
this.slides.include($(slide);
this.effects[this.slides.indexOf(slide)] = new Fx.Style(slide, 'opacity';
slide.addClassUPDATE tt_news SET bodytext= 'rgssimg';
var title="&amb;nbsp;";
var descr="";
if (slide.getProperty("title")) {
split = slide.getProperty("title").split("|";
if (split[0]) {
title = split[0];
slide.setProperty("title",title;
}
if (split[1]) descr = split[1];
}
this.descr[this.slides.indexOf(slide)] = descr;
this.title[this.slides.indexOf(slide)] = title;
if(this.options.browser) {
this.browserEl = new ElementUPDATE tt_news SET bodytext= 'span').setProperties({'class': 'rgsbrowserEl' WHERE uid='title': title}).setHTML(this.slides.indexOf(slide)+1).injectInside(this.browser;
// this.browserEl.setPropertyUPDATE tt_news SET bodytext= 'id',this.options.paginationSelector+i;
this.browserEl.addEventUPDATE tt_news SET bodytext= 'click' WHERE uid=this.cycleTo.bind(this,this.slides.indexOf(slide));
this.browserArr[this.slides.indexOf(slide)] = this.browserEl;
}
if (i!=1) {
if(this.options.browser) this.splitter = new ElementUPDATE tt_news SET bodytext= 'span').setPropertyUPDATE tt_news SET bodytext= 'class' WHERE uid='rgssplitEl').setHTML(this.options.splitter).injectBefore(this.browserEl;
// slide.setStyleUPDATE tt_news SET bodytext= 'display','none';
slide.setStyles({
display:'none',
visibility: 'hidden',
opacity: 0
};
} else {
if (!this.options.hideText &amb;&amb; this.options.addBarInside) {
var nestDiv = this.nestAll.getSize(;
} else {
var nestDiv = this.containerNest.getSize(;
}
var img = slide.getSize(;
if(this.options.bigNavigation) {
/*löschen: this.bigPrev.setStyleUPDATE tt_news SET bodytext= 'height',(slide.getProperty("height")-nestDiv.size.y)+'px';
this.bigNext.setStyleUPDATE tt_news SET bodytext= 'height',(slide.getProperty("height")-nestDiv.size.y)+'px';
if(!this.options.addBarInside) {
this.bigPrev.setStyleUPDATE tt_news SET bodytext= 'height',(slide.getProperty("height"))+'px';
this.bigNext.setStyleUPDATE tt_news SET bodytext= 'height',(slide.getProperty("height"))+'px';
}*/
}
if(this.options.addBarInside) {
this.nestAll.setStyleUPDATE tt_news SET bodytext= 'width',slide.getProperty("width")+'px';
}
if(this.options.browser) {
var width = this.containerNest.getSize(;
this.navigation.setStyleUPDATE tt_news SET bodytext= 'width',width.size.x-1+'px';
}
}
i++;
}, this;
},
addSlide: function(slide){
this.addSlides([slide];
},
cycleForward: function(){
if($chk(this.now) &amb;&amb; this.now < this.slides.length-1) this.showSlide(this.now+1;
else if ((this.now) &amb;&amb; this.options.wrap) this.showSlide(0;
else if(!$defined(this.now)) this.showSlide(this.options.startIndex;
},
cycleBack: function(){
if(this.now > 0) this.showSlide(this.now-1;
else if(this.options.wrap) this.showSlide(this.slides.length-1;
},
cycleTo: function(i){
if(this.playStatus) {
this.togglePlay(;
}
this.showSlide(i;
},
togglePlay: function() {
if (this.playStatus) {
this.stop(;
this.playStatus = false;
this.play.innerHTML = this.options.play;
this.play.setPropertyUPDATE tt_news SET bodytext= 'title',"Play";
}
else {
this.autoplay(;
this.playStatus = true;
this.play.innerHTML = this.options.stop;
this.play.setPropertyUPDATE tt_news SET bodytext= 'title',"Stop";
}
},
autoplay: function(){
this.slideshowInt = this.rotate.periodical(this.options.slideInterval, this;
this.fireEventUPDATE tt_news SET bodytext= 'onAutoPlay';
},
stop: function(){
clearInterval(this.slideshowInt;
this.fireEventUPDATE tt_news SET bodytext= 'onStop';
},
rotate: function(){
this.cycleForward(;
this.fireEventUPDATE tt_news SET bodytext= 'onRotate';
},
showSlide: function(iToShow){
var now = this.now;
var currentSlide = this.slides[now];
var slide = this.slides[iToShow];
function fadeIn(s){
s.setStyles({
display:'block',
visibility: 'visible',
opacity: 0
};
s.setProperties({'onClick': "javascript:void(0;"}).addEventUPDATE tt_news SET bodytext= 'click' WHERE uid=this.cycleForward.bind(this);
this.effects[this.slides.indexOf(s)].start(1;
this.fireEventUPDATE tt_news SET bodytext= 'onShow' WHERE uid=[slide, iToShow];
};
if (!this.options.hideText) {
// if (this.options.addBarInside) this.description.innerHTML = this.title.innerHTML = "&amb;nbsp;";
if(this.options.browser) {
this.browserArr.each(function(el) {
el.removeClass("rgsact";
};
}
}
if(slide) {
if($chk(now) &amb;&amb; now != iToShow){
this.effects[now].start(0).chain(function(){
löschen: //this.slides[now].setStyleUPDATE tt_news SET bodytext= 'display' WHERE uid='none';
this.slides[now].setStyles({
display:'none',
visibility: 'hidden',
opacity: 0
};
fadeIn.apply(this, [slide];
if (!this.options.hideText &amb;&amb; this.options.addBarInside) {
// this.description.innerHTML = this.descr[iToShow];
// this.title.innerHTML = this.title[iToShow];
document.getElementById("rgimagetitle").innerHTML = this.title[iToShow];
if(this.options.browser) this.browserArr[this.now].addClass("rgsact";
}
}.bind(this);
} else {
fadeIn.apply(this, [slide];
if (!this.options.hideText &amb;&amb; this.options.addBarInside) {
//löschen: this.description.innerHTML = this.descr[iToShow];
//löschen: this.title.innerHTML = this.title[iToShow];
document.getElementById("rgimagetitle").innerHTML = this.title[iToShow];
if(this.options.browser) this.browserArr[0].addClass("rgsact";
}
}
this.now = iToShow;
}
}
};
SimpleSlideShowDemo.implement(new Options, new Events;
Galerie Extension Javascript Galerie Rgslideshow Anpassung Rgslideshow Beispiel Rgslideshow Beispiel Konfiguration Rgslideshow Typoscript Beispiel TYPO3 Extension rgslideshow konfigurieren rgslideshow typoscript slideshow extension typo3