Contao-Camp 2024
Ergebnis 1 bis 17 von 17

Thema: Suche Slideshow mit u.a. Ken Burns Effekt, Vor/Zurück Navi und allgemeine Navi [...]

  1. #1
    Contao-Nutzer Avatar von endlezZ
    Registriert seit
    13.08.2010.
    Ort
    Paderborn
    Beiträge
    224

    Frage Suche Slideshow mit u.a. Ken Burns Effekt, Vor/Zurück Navi und allgemeine Navi [...]

    Hallo Community,
    bin gerade dabei das Web zu durchforsten in der Hoffnung, dass ich eine kostenlose Slideshow finde, welche ich dann recht einfach auf meine Bedürfniss abstimmen kann.

    Prinzipiell habe ich gute Erfahrungen mit dem "Nivo Slider" gemacht. Leider bietet diese mit nun nicht mehr den Ken Burns Effekt

    Folgendes benötige ich, da ich selber nicht viel Ahnung von JS,jQuery,AJAX habe:

    1. Slideshow mit KenBurns Effekt (Cool wäre auch wenn man zwischen KenBurns und anderen Effekten wie z.B. FadeInFadeOut etc. wechseln könnte).

    2. Dann brauche ich links und rechtsd neben der Slideshow jeweils einen Pfeil um vor oder zurück navigieren zu können.

    3. Beispielsweise habe ich 10 Bilder in der Slideshow. Benötige unten dann z.B. 10kleine Punkte um z.B. ohne Probleme von Bild 1 auf Bild 7 gehen zu können.

    4. Zu jedem Bild einen kurzen Satz schreiben. Dieser sollte so wie man es von fast jeder Slideshow kennt, unten auf einem kleinen halbtransparenten Layer erscheinen.

    So, das war es dann auch mit meinen Ansprüchen

    Habe mir schon einige angeschaut (glaube wirklich bald jede aus dem WWW), aber vllt. kennt ja jemand von euch eine die meine Bedürfnisse weitestgehend abdeckt.

    Wollte mir dann dafür ein eigenes Modul schreiben. Habe sowas schonmal mit einer anderen Slideshow gemacht, welche mir jetzt aber von den Effekten (kein KenBurnsEffekt etc) nicht mehr zusagt...

    Danke im Voraus an das super Forum hier!
    endlezZ

  2. #2
    Contao-Nutzer Avatar von buchbergertom
    Registriert seit
    21.04.2010.
    Ort
    Tirol
    Beiträge
    134

    Standard

    Slideshow2 Erweiterung für Contao!!! Kann das alles und ist leicht zu handhaben!

  3. #3
    Contao-Fan Avatar von mandrake
    Registriert seit
    19.06.2009.
    Ort
    Düsseldorf
    Beiträge
    461

  4. #4
    Contao-Nutzer Avatar von endlezZ
    Registriert seit
    13.08.2010.
    Ort
    Paderborn
    Beiträge
    224

    Standard

    Hallo buchbergertom und mandrake!!

    Echt jetzt? *lol*

    Probiere ich nachher mal aus, wird mir dann auch das Erstellen des eigenen Modules ersparen.

    Kann man dann also auch mehrere Slideshows erstellen und dann auf die Seiten verteilen?

    Naja wenn ich´s mir angeschaut habe werde ich mich bestimmt nochmal melden...


    Danke und bis später,
    endlezZ

  5. #5
    Contao-Nutzer Avatar von endlezZ
    Registriert seit
    13.08.2010.
    Ort
    Paderborn
    Beiträge
    224

    Standard

    Hi,
    habe die Erweiterung nun drauf und habe auch mal eine Slideshow zu Testzwecken angelegt. Habe vorher eine ContaoNeuinstallation gemacht und auch das StandartTemplate MusicAcademy installiert. Wenn ich die Slideshow nun einbinde, wird rein garnichts angezeigt.

    Woran liegts´s?

    Mootools etc sind doch sicherlich beim music academy Template integriert/aktiviert?

    Gruß,
    endlezZ

  6. #6
    Contao-Nutzer Avatar von endlezZ
    Registriert seit
    13.08.2010.
    Ort
    Paderborn
    Beiträge
    224

    Standard

    Nabend,
    OK. Hab´s jetzt hinbekommen. Hatte mir eine Slideshow erstellt und gleich als Inhaltselement eingebunden. Scheinbar geht das nicht. Habe jetzt vorher ein Modul für meine SlideshowNr1 erstellt und dann als Modul unter den Beitragselementen der Seite eingebunden.

    Sie erfüllt quasi fast meine ganzen Anforderungen, da hattet Ihr schon Recht

    Wer von euch hat richtig Plan von jQuery/JS?

    1. die Navigationspfeilgrafiken müssen IMMER da sein, nicht nur bei Hover und sollen
    links <-- und rechts --> neben der Slindeshow angezeigt werden.

    2. der kleine, halbtransparente Layer soll braun sein, dafür habe ich eine Grafik

    3. größtes Problem ist, dass mir die zusätzlichen Navipunkte nicht angezeigt werden, sodass man praktisch von Bild 2 auf Bild 8 springen kann...

    Ich habe echt keine Ahnung wie ich das realisieren kann, da ich nicht wirklich durch den Code durchsteige

  7. #7
    Contao-Fan Avatar von Schlauchbeutelmaschine
    Registriert seit
    16.06.2009.
    Ort
    Wiesbaden
    Beiträge
    668

    Standard

    Hallo,

    also ich denke das was du machen möchtest ist machbar, allerdings wirst du wohl einiges an Zeit reinstecken müssen da du doch was umbauen musst und zwar auch in der JS Hauptdatei des Skripts und zwar für die Buttons.

    Eventuell würde ich nochmal schauen ob du den Kenburns Effekt nicht in den Nivo Slider integrieren kannst.

  8. #8
    Contao-Nutzer Avatar von endlezZ
    Registriert seit
    13.08.2010.
    Ort
    Paderborn
    Beiträge
    224

    Standard

    Hi!
    Meinst Du nicht, dass länger dauern würde, den Kenn Burns Effekt in den bestehenden NivoSlider einzubauen?

    Also habe die Slideshow (Slideshow2 aus dem Repository) soweit angepasst. Allerdings fehlen noch zwei Sachen:
    • Buttons bzw. Navigation soll immer sichtbar sein (zurzeit nur bei mouseover)

    • Pro Bild brauche ich einen kleinen Link unten (z.B. ne Art RadioButton), also bei 10 Bildern sollen dort 10 Punkte zum zusätzlichen Navigieren sein. Vielleicht ist das irgendwie leichter als gedacht machbar, weil es ja auch die möglichkeit gibt, Thumbnails einzubinden und ich bräcuhte dann statt ein ThumbBild einfach einen kleinen Punkt oder so


    Ich bin mir sicher das mir jemand auf die Sprünge helfen kann, falls jemand selber die slideshow2 nutzt und dort in die JS-Datei reingeschaut hat

    Thx

  9. #9
    Contao-Nutzer Avatar von buchbergertom
    Registriert seit
    21.04.2010.
    Ort
    Tirol
    Beiträge
    134

    Standard

    Sieh dir vielleicht auch noch mal den Nivoslider oder den CoinSlider (Contao Erweiterung) an! Dort werden solche Punkte mit Spritegrafiken dargestellt - denke dass das auch für die Slideshow2 umsetzbar sein sollte. Alles im CSS definiert... Nur so als Denkanstoß...

  10. #10
    Contao-Nutzer Avatar von endlezZ
    Registriert seit
    13.08.2010.
    Ort
    Paderborn
    Beiträge
    224

    Standard

    Ich habe doch kein Plan von JavaScript

    Das steht in der JS vom NivoSlider:

    Code:
    			//Add Control nav
    			if(settings.controlNav){
    				var nivoControl = $('<div class="nivo-controlNav"></div>');
    				slider.append(nivoControl);
    				for(var i = 0; i < kids.length; i++){
    					if(settings.controlNavThumbs){
    						var child = kids.eq(i);
    						if(!child.is('img')){
    							child = child.find('img:first');
    						}
                            if (settings.controlNavThumbsFromRel) {
                                nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');
                            } else {
                                nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) +'" alt="" /></a>');
                            }
    					} else {
    						nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
    					}
    					
    				}
    				//Set initial active link
    				$('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active');
    				
    				$('.nivo-controlNav a', slider).live('click', function(){
    					if(vars.running) return false;
    					if($(this).hasClass('active')) return false;
    					clearInterval(timer);
    					timer = '';
    					slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
    					vars.currentSlide = $(this).attr('rel') - 1;
    					nivoRun(slider, kids, settings, 'control');
    				});
    			}
    Kann ich das nicht irgendwie in die Slideshow2 integrieren?

  11. #11
    Contao-Nutzer Avatar von endlezZ
    Registriert seit
    13.08.2010.
    Ort
    Paderborn
    Beiträge
    224

    Standard

    Huhu,
    mir ist noch was einfacheres eingefallen:

    Wenn ich Thumbnails aktiviere werden diese unterhalb der Slideshow als <li> Liste angezeigt.

    Kann man doch sicherlich so ändern, dass er nicht die ThumbnailBilder nimmt, sondern meine Navigationspunkte...dann wäre das Problem doch eigentlich gelöst, oder?

    Nur ich habe keine Ahnung in welcher Datei ich das machen muss. Die Klassen für meine NaviPunkte habe ich schon erstellt, jetzt muss ich es nur irgendwie zuweisen...

    Nutzt überhaupt jemand von euch die "Slideshow2"?

  12. #12
    Contao-Nutzer Avatar von endlezZ
    Registriert seit
    13.08.2010.
    Ort
    Paderborn
    Beiträge
    224

    Standard

    Wenn mich nicht alles täuscht müsste das die Stelle sein, wo die Thumbnails erstellt bzw. ausgegeben werden, oder?

    Code:
    /**
    Private method: thumbnails
    	Builds the optional thumbnails element, adds interactivity.
    	This method can safely be removed if the thumbnails option is not enabled.
    */
    
    	_thumbnails: function(){
     		if (this.options.thumbnails === true) 
     			this.options.thumbnails = {}; 
    		var el = this.slideshow.getElement(this.classes.get('thumbnails'));
    		var thumbnails = (el) ? el.empty() : new Element('div', {'class': this.classes.get('thumbnails').substr(1)}).inject(this.slideshow);
    		thumbnails.setStyle('overflow', 'hidden');
    		var ul = new Element('ul', {'tween': {'link': 'cancel'}}).inject(thumbnails);
    		this.data.thumbnails.each(function(thumbnail, i){
    			var li = new Element('li').inject(ul);
    			var a = new Element('a', {
    				'events': {
    					'click': function(i){
    						this.go(i); 
    						return false; 
    					}.pass(i, this),
    					'loaded': function(){
    						this.data.thumbnails.pop();
    						if (!this.data.thumbnails.length){
    							var div = thumbnails.getCoordinates();
    							var props = thumbnails.retrieve('props');			
    							var limit = 0, pos = props[1], size = props[2];		
    							thumbnails.getElements('li').each(function(li){			
    								var li = li.getCoordinates();		
    								if (li[pos] > limit) limit = li[pos];
    							}, this);			
    							thumbnails.store('limit', div[size] + div[props[0]] - limit);
    						}
    					}.bind(this)
    				},
    				'href': this.options.hu + this.data.images[i],
    				'morph': $merge(this.options.thumbnails, {'link': 'cancel'})
    			}).inject(li);
    			if (this.data.captions[i] && this.options.titles)
    				a.set('title', this.data.captions[i].replace(/<.+?>/gm, '').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, "'"));
    			var img = new Asset.image(this.options.hu + thumbnail, {
    				'onload': function(){this.fireEvent('loaded');}.bind(a) 
    			}).inject(a);
    Anstatt der komischen <li>´s möchte ich ne div klasse ausgeben, wo ich meine navigationspunkte als background grafik hinterlege. steige da net durch

  13. #13
    Contao-Nutzer Avatar von endlezZ
    Registriert seit
    13.08.2010.
    Ort
    Paderborn
    Beiträge
    224

    Standard

    Keiner Ahnung wie man die praktisch einen Navipunkt pro Bild unter die Slideshow zum navigieren bekommt?

  14. #14
    Contao-Fan Avatar von Schlauchbeutelmaschine
    Registriert seit
    16.06.2009.
    Ort
    Wiesbaden
    Beiträge
    668

    Standard

    Hallo,

    meine Idee wäre das du die li Klassen drin lässt, dafür aber keine Bilder einbindest.
    Dann müsstest du einfach nur die img Tags rausschmeißen, bzw. die Thumbnails.

  15. #15
    Contao-Nutzer Avatar von endlezZ
    Registriert seit
    13.08.2010.
    Ort
    Paderborn
    Beiträge
    224

    Standard

    Wie schmeiß ich die raus? Habe leider keine Ahnung von JS, bin schon froh, dass ich die Stelle gefunden habe, wo diese anscheinend erstellt werden. Sobald ich was ändere funktioniert die Slideshow nicht mehr, wird aber dargestellt...

    Wie meinst Du das genau? Das li Aufzählungszeichen in der CSS ändern und verlinkung drumlegen oder wie

    Gib mir Code

  16. #16
    Contao-Nutzer Avatar von itsBerni
    Registriert seit
    03.11.2010.
    Ort
    Oberfranken
    Beiträge
    103

    Standard

    Hallo,

    habt ihr das Problem lösen können? Ich möchte auch die Thumbs der Slideshow2 als kleine quadratische Boxen(Links) ohne Bild darstellen.
    Über css sprich das template komme ich wohl nicht dran.

    Hat da jemand schon einen Ansatz?

    Danke!

  17. #17
    Contao-Fan Avatar von Schlauchbeutelmaschine
    Registriert seit
    16.06.2009.
    Ort
    Wiesbaden
    Beiträge
    668

    Standard

    Hallo,

    ich hätte eine Lösung für Euch:

    In der PHP Datei müsst Ihr die Verknüpfung mit dem dem Thumbnail (Zeile 215, 296) mit dem Pfad zum Element fest verknüpfen, dann sollte es klappen.

Aktive Benutzer

Aktive Benutzer

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

Ähnliche Themen

  1. main navi und sub navi
    Von zitta im Forum Layout / Templates / Holy Grail
    Antworten: 2
    Letzter Beitrag: 18.02.2011, 10:33
  2. ken burns effekt für header bilder
    Von birksilas im Forum Layout / Templates / Holy Grail
    Antworten: 1
    Letzter Beitrag: 28.01.2011, 15:34
  3. Slideshow2 Ken-Burns-Effekt läuft ins leere
    Von Balduin im Forum slideshow
    Antworten: 3
    Letzter Beitrag: 10.01.2011, 09:43
  4. Slideshow mit wipe- statt push-Effekt
    Von iben im Forum Bilder/Dateien
    Antworten: 3
    Letzter Beitrag: 04.12.2010, 12:07
  5. Navi + CSS
    Von tio im Forum Layout / Templates / Holy Grail
    Antworten: 6
    Letzter Beitrag: 24.10.2010, 16:19

Lesezeichen

Lesezeichen

Berechtigungen

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