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 :D

Habe mir schon einige angeschaut (glaube wirklich bald jede aus dem WWW):eek:, 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:cool:

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

Hallo endlezZ,

siehe: http://www.contao.org/erweiterungsli...000009.de.html.

MfG
Peter

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

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? :eek:

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

Gruß,
endlezZ

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 :(

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.

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 :)

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ß...

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?

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"?

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 :mad:

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

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.

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 :eek:

Gib mir Code :)

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!

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.