NoobSlide dynamisch anpassen
Hallo Zusammen,
ich verzweifle gerade an meinen eigenen Ideen.
Folgendes Problem: Ich möchte gerne den noobslider dynamisch an die Fenster-/ Breite und Höhe des Browser anpassen.
Der momentane Stand der Dinge ist, dass alles angepasst wird und jetzt kommt das aber:
Eines funktioniert nicht. Und zwar der Wert für die Breite, der bei Auslösen des fading-events übergeben wird, kann ich :) nicht ändern.
Es wird immer der im Backend eingetragene Wert genommen. Ich habe die ganzen Scripte im Modulordner durchgeforstet und auch
sonst alle Dateien, aber es scheint, dass meine Kenntnisse nicht ganz ausreichen, dieses letzte Problem zu lösen.
Alles was ich möchte ist, dass der Wert "Breite", der im Backend eingetragen wird durch den ermittelten Wert des Browserfensters ersetzt bzw. übergeben wird.
Bin für jede Hilfe dankbar, auch wenn sie heisst: Nimm eine andere Erweiterung, da funzt das bereits. Allerdings finde ich beim Noobslide super, dass ein Hintergrundbild
für ein Element eingesetzt werden kann und darüber noch einmal eine Text-Bild Kombination stattfinden kann. Das Ergebnis sollte aussehen, wie bei: http://www.lacambusadelbastimento.it/
Bin für jede Hilfe dankbar
ansonsten: Schöne Ostern
Phil
Noobslide dynamisch anpassen
Vielen Dank,
ich komme im Moment leider nicht dazu es zu testen (Osterrreise!),
aber am liebsten würde ich in den Zug sitzen, nach Hause fahren und es testen.
vielen Dank nochmal und schöne Ostern.
––––––
Zurück aus dem Wochenende:
hat prima funktioniert, allerdings in der .html5 und nicht der .xhtml Datei,
das war aber schon alles. Vielen Dank nochmal.
Noobslide dynamisch anpassen HTML5
Hallo,
Danke für die Anleitung. Genau so etwas würde ich auch benötigen. Ich hätte jedoch versucht die Anpassungen in das "ce_noobslide_end.html5" Template zu übernehmen. Doch leider funktioniert der Slider danach nicht mehr. Ich verwende die Versionen Contao 2.11.7 und Noobslide 1.1.3. Was habe ich hier falsch gemacht? Hier mein angepasster Code:
Code:
</div><?php if ($this->closeLink): ?></a><?php else: ?></section><?php endif; ?>
</div></section>
<?php if($this->enableSlider): ?>
<script>
/** CDATA setzen, sonst nicht valide in XHTML */
/* <![CDATA[ */
<?php if($this->Controls): ?>
var controlDiv = new Element('div', {'class':'control_buttons'}).inject(document.getElement('#<?php echo $this->articleId; ?>'));
for (var i = 1; i <= <?php echo $this->countElements;?>; i++){new Element('span', {'class':'ce_noobSlide_button ce_noobSlide_controls', html:i}).inject(document.getElement('#<?php echo $this->articleId; ?> .control_buttons'));}
<?php endif; ?>
<?php if($this->previews): ?>
var previewHandles = $$('#<?php echo $this->articleId; ?> .ce_noobSlide_preview');
<?php endif; ?>
var noobslide<?php echo $this->sliderId; ?>;
window.addEvent('domready', function() {
/** Breite auslesen */
myContainerSize = $$('#main .inside')[0].getSize();
myWidth = myContainerSize.x;
/** inline style der Erweiterung überschreiben */
mySections = $$('.ce_noobSlide_section');
mySections.setStyle('width', myWidth);
$$('.ce_noobSlide').setStyle('width', myWidth);
noobslide<?php echo $this->sliderId; ?> = new noobSlide({
box: document.getElement('#<?php echo $this->articleId; ?> .ce_noobSlide_container'),
items: [<?php echo $this->jsElements; ?>],
<?php echo $this->mode; ?>,
<?php if($this->mode_src == 'fade'): ?>
divElements: document.getElements('#<?php echo $this->articleId; ?> .ce_noobSlide_section'),
<?php endif; ?>
size: <?php if($this->mode_src == 'vertical'): echo $this->height;?><?php else: ?><?php echo $this->width;?>
<?php endif; ?>
/** Breite an NoobSlide weiterreichen */
size: <?php if($this->mode_src == 'vertical'): echo $this->height;?><?php else: ?>myWidth<?php endif;?>,
<?php if($this->ControlButtons OR $this->SideButtons): ?>
<?php if($this->SideButtons): ?>
nextBtn: new Element('a', {'class':'ce_noobSlide_button ce_noobSlide_next', html:'<span><?php echo $this->next; ?></span>'}).inject(document.getElement('#<?php echo $this->articleId; ?> .ce_noobSlide'), 'after'),
prevBtn: new Element('a', {'class':'ce_noobSlide_button ce_noobSlide_previous', html:'<span><?php echo $this->previous; ?></span>'}).inject(document.getElement('#<?php echo $this->articleId; ?> .ce_noobSlide'), 'after'),
<?php endif; ?>
addButtons: {<?php if($this->ControlButtons): ?>play: new Element('a', {'class':'ce_noobSlide_button ce_noobSlide_play', html:'<span>Play</span>'}).inject(document.getElement('#<?php echo $this->articleId; ?> .ce_noobSlide'), 'after'), stop: new Element('a', {'class':'ce_noobSlide_button ce_noobSlide_stop', html:'<span>Stop</span>'}).inject(document.getElement('#<?php echo $this->articleId; ?> .ce_noobSlide'), 'after'), playback: new Element('a', {'class':'ce_noobSlide_button ce_noobSlide_playback', html:'<span><?php echo $this->playbackLabel; ?></span>'}).inject(document.getElement('#<?php echo $this->articleId; ?> .ce_noobSlide'), 'after')<?php endif; ?><?php if($this->ControlButtons && $this->SideButtons): ?>, <?php endif;?><?php if($this->SideButtons): ?>previous: document.getElements('#<?php echo $this->articleId; ?> .ce_noobSlide_previous span'), next: document.getElements('#<?php echo $this->articleId; ?> .ce_noobSlide_next span')<?php endif; ?>},
<?php endif; ?>
interval: <?php echo $this->interval; ?>,
fadeDuration: <?php echo $this->effectDuration; ?>,
autoPlay: <?php echo $this->nSPlayAuto; ?><?php if($this->effectActive): ?>, <?php endif; ?>
<?php if($this->effectActive): ?>
fxOptions: {
duration : <?php echo $this->effectDuration; ?>,
transition: Fx.Transitions.<?php echo $this->effect; ?>,
wait: false
}
<?php endif; ?>
<?php if($this->Controls || $this->previews): ?>
,
onWalk: function(currentItem,currentHandle){
<?php if($this->Controls): ?>
this.handles.removeClass('active');
currentHandle.addClass('active');
<?php endif; ?>
<?php if($this->previews): ?>
previewHandles.removeClass('active');
previewHandles[this.currentIndex].addClass('active');
<?php endif; ?>
}
<?php endif; ?>
<?php if($this->Controls): ?>
,
handles: $$('#<?php echo $this->articleId; ?> .ce_noobSlide_controls')
<?php endif; ?>
<?php if($this->previews): ?>
,
previewItems: $$('#<?php echo $this->articleId; ?> .ce_noobSlide_preview')
<?php endif; ?>
});
<?php if($this->nSMouseOver): ?>
//add mousein/out behaviors for all slides
document.getElement('#<?php echo $this->articleId; ?> .ce_noobSlide_container').addEvents({
'mouseover':function(){
noobslide<?php echo $this->sliderId; ?>.stop();
},
'mouseleave':function(){
noobslide<?php echo $this->sliderId; ?>.play(<?php echo $this->interval; ?>,"next",false);
}
});
<?php endif; ?>
<?php if($this->nSMooSwipe): ?>
new MooSwipe(document.getElement('#<?php echo $this->articleId; ?> .ce_noobSlide_container'), {
onSwipeLeft: function() {
noobslide<?php echo $this->sliderId; ?>.next(this);
},
onSwipeRight: function() {
noobslide<?php echo $this->sliderId; ?>.previous(this);
}
});
<?php endif; ?>
});
/** CDATA setzen, sonst nicht valide in XHTML */
/* ]]> */
</script>
<?php endif; ?>
Wäre um jede Hilfe dankbar.
Gruß Markus
