Ergebnis 1 bis 9 von 9

Thema: NoobSlide dynamisch anpassen

  1. #1
    Contao-Nutzer Avatar von HBR
    Registriert seit
    18.09.2010.
    Beiträge
    56

    Standard 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

  2. #2
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das Template was du brauchst ist system/modules/pk_noobSlide/templates/ce_noobslide_end.xhtml

    Dort musst du das Javascript modden. Hier die Änderungen, ich habe eine Zeile über und unter der Veränderung als Anhaltspunkt drin gelassen.
    HTML-Code:
    ...
    
    <script type="text/javascript">
    /** CDATA setzen, sonst nicht valide in XHTML */
    /* <![CDATA[ */
    <?php if($this->Controls): ?>
    
    ...
    
    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({
    
    ...
    
    <?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): ?>
    
    ...
    
    });
    /** CDATA setzen, sonst nicht valide in XHTML */
    /* ]]> */
    </script>
    
    ...
    CDATA hat gefehlt, deshalb gab es bei mir einen Validierungsfehler, hat aber nix mit der Lösung zu tun.

    Zuerst ermittel ich die Breite des entsprechenden Containers. Bei mir #main .inside. Wenn du ein padding hast musst du das noch von dem Wert abziehen. z.B. myWidth = myContainerSize.x - 40;

    Dann müssen noch ein paar inline-Styles, welche die Erweiterung setzt überschrieben werden. Und dann wird der Wert der Breite an noobSlide weitergereicht.

    Musst du noch ausprobieren, wie der Fallback aussieht, wenn JS deaktiviert ist.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  3. #3
    Contao-Nutzer Avatar von HBR
    Registriert seit
    18.09.2010.
    Beiträge
    56

    Standard 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.
    Geändert von HBR (10.04.2012 um 16:41 Uhr)

  4. #4
    Contao-Nutzer
    Registriert seit
    30.01.2010.
    Ort
    Berlin
    Beiträge
    69

    Standard

    Hallo zusammen und danke für diesen hilfreichen Artikel,

    ich möchte die angesprochenen Änderungen ebenfalls nutzen, jedoch in der Form, dass die Breite die Screenbreite ist, und die Höhe des Bildes im Verhältnis gesetzt wird.
    Wie kann ich das machen?

    Frage weiterhin: Was genau passiert, wenn das eigentlich Bild Größer ist, als das Sliderelement? Wird es dann relativ verkleinert?


    Danke vorab,
    Marco
    Geändert von BeamishBln (20.04.2012 um 10:45 Uhr)

  5. #5
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von HBR Beitrag anzeigen
    ––––––
    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.
    Ja, ist klar, kommt halt drauf an, ob dein Projekt als HTML oder XHTML läuft.

    ps Solche Ergänzungen innerhalb des Posts bekommt man leider nicht mitgeteilt, habe ich gerade festgestellt.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  6. #6
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von BeamishBln Beitrag anzeigen
    ...ich möchte die angesprochenen Änderungen ebenfalls nutzen, jedoch in der Form, dass die Breite die Screenbreite ist, und die Höhe des Bildes im Verhältnis gesetzt wird.
    Wie kann ich das machen?

    Frage weiterhin: Was genau passiert, wenn das eigentlich Bild Größer ist, als das Sliderelement? Wird es dann relativ verkleinert?...
    PHP-Code:
    /* Beispiele */
    myContainerSize = $$('#main .inside')[0].getSize();
    myContainerSize window.getSize();
    myContainerSize = $('top').getSize();

    myImageSize = $$('.image_container img')[0].getSize(); 
    Berechnungen kannst du dann nach Belieben in dem Script vornehmen, weiß grad nicht, was du da vorhast.

    Was passiert, wenn das Bild größer ist, kannst du gerne mal ausprobieren. Kannst uns auch einen Link dahin geben, dass wir es uns ansehen können. pk_noobSlide ist ja kein Gallery Slider, sondern ein Content-Slider. Mit overflow:hidden; müsstest du verhindern können, dass übergroße Bilder außerhalb angezeigt werden.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  7. #7
    Contao-Nutzer Avatar von hellwach
    Registriert seit
    24.11.2010.
    Beiträge
    52

    Standard 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

  8. #8
    Contao-Nutzer Avatar von zan
    Registriert seit
    11.05.2010.
    Beiträge
    35

    Frage

    Zitat Zitat von hellwach Beitrag anzeigen
    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?
    Hallo zusammen,

    mir geht's genauso, ich kriege die vorgestellte Anpassung in der ce_noobslide_end.html leider auch nicht zum Laufen...
    Ich habe pk_noobSlide 1.1.5 in einem Contao 3.0.4 im Einsatz, was soweit auch prima funktioniert - wenn sich jetzt noch der Slider anpasst, wäre es perfekt

    Vielen Dank für einen Tipp!

    cheers, zan
    See you UP in the sky!
    papillon.aero

  9. #9
    Contao-Nutzer Avatar von hellwach
    Registriert seit
    24.11.2010.
    Beiträge
    52

    Standard

    Hallo Marc,
    Da ich es leider mit dem Noobslide nicht geschafft habe, bin ich auf den "caroufredsel" Slider umgestiegen.
    Diesen kann ich sehr empfehlen, denn der Silder hat dies in der Grundfunktion. Und noch einige andere nette Sachen (:

    Gruß Markus

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •