Update auf 2.11.0 -> Thumbnails überlagern sich

Hallo,

seit dem Update auf 2.11.0 habe ich bei der Slideshow 2 das Problem, dass sich die Thumbnails überlagern. Bei der hälfte eines Thumbs beginnt schon das nächste...
Hat das Problem noch wer?

Was hat denn die Analyse der (vom Browser angewandten) CSS-Regeln ergeben?

Hallo,

also bei mir läuft die Erweiterung zwar nach dem Update noch einigermaßen, es ist aber immer in der rechten oberen Ecke der Loader sichtbar. Dieser sollte ja nur beim laden angezeigt werden und dann wieder verschwinden, das passiert aber nicht. Vor dem Update auf 2.11 lief das alles richtig, deshalb denke ich das bei der Erweiterung etwas nachgebessert werden müsste.

PS. Ich habe dieses auf mehreren Betriebssystemen und Browsern getestet und überall das gleiche.

Gruß

@ElMariachi
Kann ich bei meiner Testinstallation nicht bestätigen.
Ein Link wäre hilfreich.

@Supermann
Hast du die Erweiterung Theme+ installiert?

Hallo,

nein diese habe ich nicht installiert. Wie schon gesagt vor dem Update war alles OK.

Link kann ich Dir per PN senden...

PS. Ist gesendet...

Gruß

Hallo,

also ich habe jetzt alles getestet und an meinen Erweiterungen kann es nicht liegen... denn alle anderen Überblendungen funktionieren. Nur die Alpha Überblendung zeigt bei Deiner Erweiterung keine Funktion.

Deshalb gehe ich einmal davon aus das Mootools funktioniert, es gehen ja auch alle anderen Erweiterungen die Mootools nutzen.

Kann es vielleicht nicht doch sein das Du deine Erweiterung anpassen musst?

Gruß

Also die Überlagerung der Thumbnails liegt daran, dass es auch Bilder im Hochformat bei mir gibt. Die hochformatigen Thumbs wurden vor dem Update auf 2.11 auch im Querformat angezeigt.
Jetzt nicht mehr -> Sie werden im Hochformat angezeigt, was eigentlich spitze ist, aber sobald ein hochformatiges Thumb auftaucht überlagern sich die Thumbs ganz wild.

Auch die Überblendung von Bild zu Bild ist nicht mehr wirklich schön anzusehen. Klickt man ein Bild weiter, so wird das aktuelle sofort ausgeblendet (ohne fade) und das neue Bild wird geladen.

Meine slideshow.js:

Code:

---

/**
Script: Slideshow.js
        Slideshow - A javascript class for Mootools to stream and animate the presentation of images on your website.

License:
        MIT-style license.

Copyright:
        Copyright (c) 2011 [Aeron Glemann](http://www.electricprism.com/aeron/).

Dependencies:
        Mootools 1.3.1 Core: Fx.Morph, Fx.Tween, Selectors, Element.Dimensions.
        Mootools 1.3.1.1 More: Assets.
*/
(function(){
        WhenPaused = 1 << 0;
        WhenPlaying = 1 << 1;
        OnStart = 1 << 2;
       
        Slideshow = new Class({
                Implements: [Chain, Events, Options],

                options: {/*
                        onComplete: $empty,
                        onEnd: $empty,
                        onStart: $empty,*/
                    accesskeys: {'first': {'key': 'shift left', 'label': 'Shift + Leftwards Arrow'}, 'prev': {'key': 'left', 'label': 'Leftwards Arrow'}, 'pause': {'key': 'p', 'label': 'P'}, 'next': {'key': 'right', 'label': 'Rightwards Arrow'}, 'last': {'key': 'shift right', 'label': 'Shift + Rightwards Arrow'}},
                        captions: true,
                        center: true,
                        classes: [/*'slideshow', 'first', 'prev', 'play', 'pause', 'next', 'last', 'images', 'captions', 'controller', 'thumbnails', 'hidden', 'visible', 'inactive', 'active', 'loader'*/],
                        controller: true,
                        data: null,
                        delay: 2000,
                        duration: 1000,
                        fast: false,
                        height: false,
                        href: '',
                        hu: '',
                        linked: false,
                        loader: true,
                        loop: true,
                        match: /\?slide=(\d+)$/,
                        overlap: true,
                        paused: false,
                        random: false,
                        replace: [/(\.[^\.]+)$/, 't$1'],
                        resize: 'fill',
                        slide: 0,
                        thumbnails: true,
                        titles: false,
                        transition: 'sine:in:out',
                        width: false
                },

        /**
        Constructor: initialize
                Creates an instance of the Slideshow class.

        Arguments:
                element - (element) The wrapper element.
                data - (array or object) The images and optional thumbnails, captions and links for the show.
                options - (object) The options below.

        Syntax:
                var myShow = new Slideshow(element, data, options);
        */

                initialize: function(el, data, options){
                        this.setOptions(options);
                        this.el = document.id(el);
                        if (!this.el)
                                return;
                        var match = window.location.href.match(this.options.match);
                        this.slide = this._slide = this.options.match && match ? match[1].toInt()
                                : this.options.slide;
                        this.counter = this.timeToNextTransition = this.timeToTransitionComplete = 0;
                        this.direction = 'left';
                        this.cache = {};
                        this.paused = false;
                        if (!this.options.overlap)
                                this.options.duration *= 2;
                        var anchor = this.el.getElement('a') || new Element('a');
                        if (!this.options.href)
                                this.options.href = anchor.get('href') || '';
                        if (this.options.hu.length && !this.options.hu.test(/\/$/))
                                this.options.hu += '/';
                        if (this.options.fast === true)
                                this.options.fast = WhenPaused | WhenPlaying;

                        // styles

                        var keys = 'slideshow first prev play pause next last images captions controller thumbnails hidden visible inactive active loader'.split(' '),
                                values = keys.map(function(key, i){
                                        return this.options.classes[i] || key;
                                }, this);
                        this.classes = values.associate(keys);
                        this.classes.get = function(){
                                var str = '.' + this.slideshow;
                                for (var i = 0, l = arguments.length; i < l; i++)
                                        str += '-' + this[arguments[i]];
                                return str;
                        }.bind(this.classes);

                        // data       
                       
                        if (!data){
                                this.options.hu = '';
                                data = {};
                                var thumbnails = this.el.getElements(this.classes.get('thumbnails') + ' img');
                                this.el.getElements(this.classes.get('images') + ' img').each(function(img, i){
                                        var src = img.src,
                                                caption = img.alt || img.title,
                                                href = img.getParent().href,
                                                thumbnail = thumbnails[i] ? thumbnails[i].src
                                                        : '';
                                        data[src] = {'caption': caption, 'href': href, 'thumbnail': thumbnail};
                                });
                        }
                        var loaded = this.load(data);
                        if (!loaded)
                                return;

                        // events

                        this.events = {};
                        this.events.push = function(type, fn){
                                if (!this[type])
                                        this[type] = [];
                                this[type].push(fn);
                                document.addEvent(type, fn);
                                return this;
                        }.bind(this.events);

                        this.accesskeys = {};
                        for (action in this.options.accesskeys){
                                var obj = this.options.accesskeys[action];
                                this.accesskeys[action] = accesskey = {'label': obj.label};
                                ['shift', 'control', 'alt'].each(function(modifier){
                                        var re = new RegExp(modifier, 'i');
                                        accesskey[modifier] = obj.key.test(re);
                                        obj.key = obj.key.replace(re, '');
                                });
                                accesskey.key = obj.key.trim();
                        }

                        this.events.push('keyup', function(e){
                                Object.each(this.accesskeys, function(accesskey, action){
                                        if (e.key == accesskey.key && e.shift == accesskey.shift && e.control == accesskey.control && e.alt == accesskey.alt)
                                                this[action]();
                                }, this);                       
                        }.bind(this));       

                        // required elements

                        var el = this.el.getElement(this.classes.get('images')),
                                img = this.el.getElement('img') || new Element('img'),
                                images = el ? el.empty()
                                        : new Element('div', {'class': this.classes.get('images').substr(1)}).inject(this.el),
                                div = images.getSize();
                        this.height = this.options.height || div.y;               
                        this.width = this.options.width || div.x;
                        images.set({'styles': {'height': this.height, 'width': this.width}});
                        this.el.store('images', images);
                        this.a = this.image = img;
                        if (Browser.ie && Browser.version >= 7)
                                this.a.style.msInterpolationMode = 'bicubic';
                        this.a.set('styles', {'display': 'none'});
                        this.b = this.a.clone();
                        [this.a, this.b].each(function(img){
                                anchor.clone().cloneEvents(anchor).grab(img).inject(images);
                        });

                        // optional elements

                        this.options.captions && new Caption(this);
                        this.options.controller && new Controller(this);
                        this.options.loader && new Loader(this);
                        this.options.thumbnails && new Thumbnails(this);

                        // begin show

                        this._preload(this.options.fast & OnStart);
                },

        /**
        Public method: go
                Jump directly to a slide in the show.

        Arguments:
                n - (integer) The index number of the image to jump to, 0 being the first image in the show.

        Syntax:
                myShow.go(n);       
        */

                go: function(n, direction){
                        var nextSlide = (this.slide + this.data.images.length) % this.data.images.length;
                        if (n == nextSlide || Date.now() < this.timeToTransitionComplete)
                                return;               
                        clearTimeout(this.timer);
                        this.timeToNextTransition = 0;               
                        this.direction = direction ? direction
                                : n < this._slide ? 'right'
                                : 'left';
                        this.slide = this._slide = n;
                        if (this.preloader)
                                this.preloader = this.preloader.destroy();
                        this._preload((this.options.fast & WhenPlaying) || (this.paused && this.options.fast & WhenPaused));
                },

        /**
        Public method: first
                Goes to the first image in the show.

        Syntax:
                myShow.first();       
        */

                first: function(){
                        this.prev(true);
                },

        /**
        Public method: prev
                Goes to the previous image in the show.

        Syntax:
                myShow.prev();       
        */

                prev: function(first){
                        var n = 0;
                        if (!first){
                                if (this.options.random){
                                        if (this.showed.i < 2)
                                                return;
                                        this.showed.i -= 2;
                                        n = this.showed.array[this.showed.i];
                                }
                                else
                                        n = (this.slide - 1 + this.data.images.length) % this.data.images.length;                                                                       
                        }
                        this.go(n, 'right');
                },

        /**
        Public method: pause
                Toggles play / pause state of the show.

        Arguments:
                p - (undefined, 1 or 0) Call pause with no arguments to toggle the pause state. Call pause(1) to force pause, or pause(0) to force play.

        Syntax:
                myShow.pause(p);       
        */

                pause: function(p){
                        if (p != undefined)
                                this.paused = p ? false
                                        : true;
                        if (this.paused){ // play
                                this.paused = false;
                                this.timeToTransitionComplete = Date.now() + this.timeToTransitionComplete;               
                                this.timer = this._preload.delay(50, this);
                                [this.a, this.b].each(function(img){
                                        ['morph', 'tween'].each(function(p){
                                                if (this.retrieve(p)) this.get(p).resume();
                                        }, img);
                                });
                                this.controller && this.el.retrieve('pause').getParent().removeClass(this.classes.play);
                        }
                        else { // pause
                                this.paused = true;
                                this.timeToTransitionComplete = this.timeToTransitionComplete - Date.now();
                                clearTimeout(this.timer);
                                [this.a, this.b].each(function(img){
                                        ['morph', 'tween'].each(function(p){
                                                if (this.retrieve(p)) this.get(p).pause();
                                        }, img);
                                });
                                this.controller && this.el.retrieve('pause').getParent().addClass(this.classes.play);
                        }
                },

        /**
        Public method: next
                Goes to the next image in the show.

        Syntax:
                myShow.next();       
        */

                next: function(last){
                        var n = last ? this.data.images.length - 1
                                : this._slide;
                        this.go(n, 'left');
                },

        /**
        Public method: last
                Goes to the last image in the show.

        Syntax:
                myShow.last();       
        */

                last: function(){
                        this.next(true);
                },

        /**
        Public method: load
                Loads a new data set into the show: will stop the current show, rewind and rebuild thumbnails if applicable.

        Arguments:
                data - (array or object) The images and optional thumbnails, captions and links for the show.

        Syntax:
                myShow.load(data);
        */

                load: function(data){
                        this.firstrun = true;
                        this.showed = {'array': [], 'i': 0};
                        if (typeOf(data) == 'array'){
                                this.options.captions = false;                       
                                data = new Array(data.length).associate(data.map(function(image, i){ return image + '?' + i }));
                        }
                        this.data = {'images': [], 'captions': [], 'hrefs': [], 'thumbnails': [], 'targets': [], 'titles': []};
                        for (var image in data){
                                var obj = data[image] || {},
                                        image = this.options.hu + image,
                                        caption = obj.caption ? obj.caption.trim()
                                                : '',
                                        href = obj.href ? obj.href.trim()
                                                : this.options.linked ? image
                                                : this.options.href,
                                        target = obj.target ? obj.target.trim()
                                                : '_self',
                                        thumbnail = obj.thumbnail ? this.options.hu + obj.thumbnail.trim()
                                                : image.replace(this.options.replace[0], this.options.replace[1]),
                                        title = caption.replace(/<.+?>/gm, '').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, "'");
                                this.data.images.push(image);
                                this.data.captions.push(caption);
                                this.data.hrefs.push(href);
                                this.data.targets.push(target);
                                this.data.thumbnails.push(thumbnail);
                                this.data.titles.push(title);
                        }
                        if (this.options.random)
                                this.slide = this._slide = Number.random(0, this.data.images.length - 1);

                        // only run when data is loaded dynamically into an existing slideshow instance

                        if (this.options.thumbnails && this.el.retrieve('thumbnails'))
                                this._thumbnails();
                        if (this.el.retrieve('images')){
                                [this.a, this.b].each(function(img){
                                        ['morph', 'tween'].each(function(p){
                                                if (this.retrieve(p)) this.get(p).cancel();
                                        }, img);
                                });
                                this.slide = this._slide = this.timeToTransitionComplete = 0;
                                this.go(0);               
                        }
                        return this.data.images.length;
                },

        /**
        Public method: destroy
                Destroys a Slideshow instance.

        Arguments:
                p - (string) The images and optional thumbnails, captions and links for the show.

        Syntax:
                myShow.destroy(p);
        */

                destroy: function(p){
                        Object.each(this.events, function(array, e){
                                if ('each' in array)
                                        array.each(function(fn){ document.removeEvent(e, fn); });
                        });
                        this.pause(1);
                        'caption loader thumbnails'.split(' ').each(function(i, timer){
                                this.options[i] && (timer = this[i].retrieve('timer')) && clearTimeout(timer);
                        }, this);
                        typeOf(this.el[p]) == 'function' && this.el[p]();
                        delete this.el.uid;
                },

        /**
        Private method: preload
                Preloads the next slide in the show, once loaded triggers the show, updates captions, thumbnails, etc.
        */

                _preload: function(fast){
                        var src = this.data.images[this._slide].replace(/([^?]+).*/, '$1'),
                                cached = loaded = !!this.cache[src];
                        if (!cached){
                                if (!this.preloader)
                                        this.preloader = new Asset.image(src, {
                                                'onerror': function(){
                                                        // do something
                                                },
                                                'onload': function(){
                                                        this.store('loaded', true);
                                                }
                                        });
                                loaded = this.preloader.retrieve('loaded') && this.preloader.get('width');
                        }
                        if (loaded && Date.now() > this.timeToNextTransition && Date.now() > this.timeToTransitionComplete){
                                var src = this.data.images[this._slide].replace(/([^?]+).*/, '$1');
                                if (this.preloader){
                                        this.cache[src] = {
                                                'height': this.preloader.get('height'),
                                                'src': src,
                                                'width': this.preloader.get('width')
                                        }
                                }
                                if (this.stopped){
                                        if (this.options.captions)
                                                this.caption.get('morph').cancel().start(this.classes.get('captions', 'hidden'));
                                        this.pause(1);
                                        if (this.end)
                                                this.fireEvent('end');
                                        this.stopped = this.end = false;
                                        return;                               
                                }
                                this.image = this.counter % 2 ? this.b
                                        : this.a;
                                this.image.set('styles', {'display': 'block', 'height': null, 'visibility': 'hidden', 'width': null, 'zIndex': this.counter});
                                this.image.set(this.cache[src]);
                                this.image.width = this.cache[src].width;
                                this.image.height = this.cache[src].height;
                                this.options.resize && this._resize(this.image);
                                this.options.center && this._center(this.image);
                                var anchor = this.image.getParent();
                                if (this.data.hrefs[this._slide]){
                                        anchor.set('href', this.data.hrefs[this._slide]);
                                        anchor.set('target', this.data.targets[this._slide]);                       
                                }
                                else {
                                        anchor.erase('href');
                                        anchor.erase('target');
                                }
                                var title = this.data.titles[this._slide];
                                this.image.set('alt', title);               
                                this.options.titles && anchor.set('title', title);
                                this.options.loader && this.loader.fireEvent('hide');
                                this.options.captions && this.caption.fireEvent('update', fast);                               
                                this.options.thumbnails && this.thumbnails.fireEvent('update', fast);                       
                                this._show(fast);
                                this._loaded(fast);
                        }
                        else {
                                if (Date.now() > this.timeToNextTransition && this.options.loader)
                                        this.loader.fireEvent('show');
                                this.timer = this._preload.delay(50, this, fast);
                        }
                },

        /**
        Private method: show
                Does the slideshow effect.
        */

                _show: function(fast){
                        if (!this.image.retrieve('morph')){
                                var options =  this.options.overlap ? {'link': 'cancel'} : {'link': 'chain'};
                                $$(this.a, this.b).set('morph', Object.merge(options, {'duration': this.options.duration, 'onStart': this._start.bind(this), 'onComplete': this._complete.bind(this), 'transition': this.options.transition}));
                        }
                        var hidden = this.classes.get('images', (this.direction == 'left' ? 'next'
                                : 'prev')),
                                visible = this.classes.get('images', 'visible'),
                                img = this.counter % 2 ? this.a
                                        : this.b;
                        if (fast){                       
                                img.get('morph').cancel().set(hidden);
                                this.image.get('morph').cancel().set(visible);                       
                        }
                        else {
                                if (this.options.overlap){
                                        img.get('morph').set(visible);
                                        this.image.get('morph').set(hidden).start(visible);
                                }
                                else {
                                        var fn = function(visible){
                                                this.image.get('morph').start(visible);
                                        }.pass(visible, this);
                                        if (this.firstrun)
                                                return fn();
                                        hidden = this.classes.get('images', (this.direction == 'left' ? 'prev'
                                                : 'next'));
                                        this.image.get('morph').set(hidden);                               
                                        img.get('morph').set(visible).start(hidden).chain(fn);
                                }
                        }
                },

        /**
        Private method: loaded
                Run after the current image has been loaded, sets up the next image to be shown.
        */

                _loaded: function(fast){
                        this.counter++;
                        this.timeToNextTransition = Date.now() + this.options.duration + this.options.delay;
                        this.direction = 'left';                       
                        this.timeToTransitionComplete = fast ? 0
                                : Date.now() + this.options.duration;
                        if (this._slide == (this.data.images.length - 1) && !this.options.loop && !this.options.random)
                                this.stopped = this.end = true;
                        if (this.options.random){
                                this.showed.i++;
                                if (this.showed.i >= this.showed.array.length){
                                        var n = this._slide;
                                        if (this.showed.array.getLast() != n) this.showed.array.push(n);
                                        while (this._slide == n)
                                                this.slide = this._slide = Number.random(0, this.data.images.length - 1);                               
                                }
                                else
                                        this.slide = this._slide = this.showed.array[this.showed.i];
                        }
                        else {
                                this.slide = this._slide;
                                this._slide = (this.slide + 1) % this.data.images.length;
                        }
                        if (this.image.getStyle('visibility') != 'visible')
                                (function(){ this.image.setStyle('visibility', 'visible'); }).delay(1, this);                       
                        if (this.preloader)
                                this.preloader = this.preloader.destroy();
                        this.paused || this._preload();
                },

        /**
        Private method: center
                Center an image.
        */

                _center: function(img){
                        var size = img.getSize(),
                                h = size.y, w = size.x;
                        img.set('styles', {'left': (w - this.width) / -2, 'top': (h - this.height) / -2});
                },

        /**
        Private method: resize
                Resizes an image.
        */

                _resize: function(img){
                        var h = img.get('height').toFloat(), w = img.get('width').toFloat(),
                                dh = this.height / h, dw = this.width / w;
                        if (this.options.resize == 'fit')
                                dh = dw = dh > dw ? dw
                                        : dh;
                        if (this.options.resize == 'fill')
                                dh = dw = dh > dw ? dh
                                        : dw;
                        img.set('styles', {'height': Math.ceil(h * dh), 'width': Math.ceil(w * dw)});
                },

        /**
        Private method: start
                Callback on start of slide change.
        */

                _start: function(){               
                        this.fireEvent('start');
                },

        /**
        Private method: complete
                Callback on start of slide change.
        */

                _complete: function(){
                        if (this.firstrun && this.options.paused)
                                this.pause(1);
                        this.firstrun = false;
                        this.fireEvent('complete');
                }       
        });

        /**
        Private method: captions
                Builds the optional caption element, adds interactivity.
                This method can safely be removed if the captions option is not enabled.
        */

        var Caption = new Class({
                Implements: [Chain, Events, Options],

                options: {/*
                        duration: 500,
                        fps: 50,
                        transition: 'sine:in:out',
                        unit: false, */
                        delay: 0,
                        link: 'cancel'                       
                },

                initialize: function(slideshow){
                        if (!slideshow)
                                return;
                        var options = slideshow.options.captions;
                        if (options === true)
                                options = {};
                        this.setOptions(options);
                        var el = slideshow.el.getElement(slideshow.classes.get('captions')),
                                caption = el ? el.dispose().empty()
                                        : new Element('div', {'class': slideshow.classes.get('captions').substr(1)});
                        slideshow.caption = caption;
                        caption.set({
                            'aria-busy': false,
                            'aria-hidden': false,
                                'events': { 'update': this.update.bind(slideshow) },
                                'morph': this.options,
                                'role': 'description'
                        }).store('delay', this.options.delay);
                    if (!caption.get('id'))
                            caption.set('id', 'Slideshow-' + Date.now());
                    slideshow.el.retrieve('images').set('aria-labelledby', caption.get('id'));
                        caption.inject(slideshow.el);
                },

                update: function(fast){
                    var empty = !this.data.captions[this._slide].length, timer;
                        if (timer = this.caption.retrieve('timer'))
                                clearTimeout(timer);
                    if (fast){
                      var p = empty ? 'hidden'
                                : 'visible';
                      this.caption.set({'aria-hidden': empty, 'html': this.data.captions[this._slide]}).get('morph').cancel().set(this.classes.get('captions', p));
                    }
                    else {
                      var fn1 = empty ? function(){}
                                : function(caption){
                                this.caption.store('timer', setTimeout(function(caption){
                                this.caption.set('html', caption).morph(this.classes.get('captions', 'visible'));
                                }.pass(caption, this), this.caption.retrieve('delay')));
                      }.pass(this.data.captions[this._slide], this);   
                      var fn2 = function(){
                        this.caption.set('aria-busy', false);
                      }.bind(this);
                      this.caption.set('aria-busy', true).get('morph').cancel().start(this.classes.get('captions', 'hidden')).chain(fn1, fn2);
                    }
                }
        });

        /**
        Private method: controller
          Builds the optional controller element, adds interactivity.
          This method can safely be removed if the controller option is not enabled.
        */

        var Controller = new Class({
                Implements: [Chain, Events, Options],

                options: {/*
                        duration: 500,
                        fps: 50,
                        transition: 'sine:in:out',
                        unit: false, */
                        link: 'cancel'                       
                },

                initialize: function(slideshow){
                        if (!slideshow)
                                return;
                        var options = slideshow.options.captions;
                        if (options === true)
                                options = {};
                        this.setOptions(options);
                        var el = slideshow.el.getElement(slideshow.classes.get('controller')),
                                controller = el ? el.dispose().empty()
                                        : new Element('div', {'class': slideshow.classes.get('controller').substr(1)});
                        slideshow.controller = controller;
                        controller.set({
                                'aria-hidden': false,
                                'role': 'menubar'
                        });
                        var ul = new Element('ul', {'role': 'menu'}).inject(controller),
                                i = 0;
                        Object.each(slideshow.accesskeys, function(accesskey, action){
                                var li = new Element('li', {
                                        'class': (action == 'pause' && this.options.paused) ? this.classes.play + ' ' + this.classes[action]
                                                : this.classes[action]
                                }).inject(ul);
                                var a = this.el.retrieve(action, new Element('a', {
                                        'role': 'menuitem', 'tabindex': i++, 'title': accesskey.label
                                }).inject(li));
                                a.set('events', {
                                        'click': function(action){
                                                this[action]()
                                        }.pass(action, this),
                                        'mouseenter': function(active){
                                                this.addClass(active)
                                        }.pass(this.classes.active, a),
                                        'mouseleave': function(active){
                                                this.removeClass(active)
                                        }.pass(this.classes.active, a)
                                });               
                        }, slideshow);
                        controller.set({
                                'events': {
                                        'hide': this.hide.pass(slideshow.classes.get('controller', 'hidden'), controller),
                                        'show': this.show.pass(slideshow.classes.get('controller', 'visible'), controller)
                                },
                                'morph': this.options
                        }).store('hidden', false);
                        slideshow.events
                                .push('keydown', this.keydown.bind(slideshow))
                                .push('keyup',        this.keyup.bind(slideshow))
                                .push('mousemove',        this.mousemove.bind(slideshow));
                        controller.inject(slideshow.el).fireEvent('hide');
                },

                hide: function(hidden){
                        if (this.get('aria-hidden') == 'false')
                                this.set('aria-hidden', true).morph(hidden);
                },

                keydown: function(e){
                        Object.each(this.accesskeys, function(accesskey, action){
                                if (e.key == accesskey.key && e.shift == accesskey.shift && e.control == accesskey.control && e.alt == accesskey.alt){
                                        if (this.controller.get('aria-hidden') == 'true')
                                                this.controller.get('morph').set(this.classes.get('controller', 'visible'));
                                        this.el.retrieve(action).fireEvent('mouseenter');
                                }                                       
                        }, this);               
                },

                keyup: function(e){
                        Object.each(this.accesskeys, function(accesskey, action){
                                if (e.key == accesskey.key && e.shift == accesskey.shift && e.control == accesskey.control && e.alt == accesskey.alt){
                                        if (this.controller.get('aria-hidden') == 'true')
                                                this.controller.set('aria-hidden', false).fireEvent('hide');
                                        this.el.retrieve(action).fireEvent('mouseleave');
                                }                                       
                        }, this);                       
                },

                mousemove: function(e){
                        var images = this.el.retrieve('images').getCoordinates(),
                                action = (e.page.x > images.left && e.page.x < images.right && e.page.y > images.top && e.page.y < images.bottom) ? 'show'
                                        : 'hide';
                        this.controller.fireEvent(action);
                },

                show: function(visible){
                        if (this.get('aria-hidden') == 'true')
                                this.set('aria-hidden', false).morph(visible);
                }
        });

        /**
        Private method: loader
                Builds the optional loader element, adds interactivity.
                This method can safely be removed if the loader option is not enabled.
        */

        var Loader = new Class({
                Implements: [Chain, Events, Options],

                options: {/*
                        duration: 500,
                        transition: 'sine:in:out',
                        unit: false, */
                        fps: 20,
                        link: 'cancel'                       
                },

                initialize: function(slideshow){
                        if (!slideshow)
                                return;
                        var options = slideshow.options.loader;
                        if (options === true)
                                options = {};
                        this.setOptions(options);
                        var loader = new Element('div', {
                                'aria-hidden': false,
                                'class': slideshow.classes.get('loader').substr(1),                               
                                'morph': this.options,
                                'role': 'progressbar'
                        }).store('animate', false).store('i', 0).store('delay', 1000 / this.options.fps).inject(slideshow.el);
                        slideshow.loader = loader;
                        var url = loader.getStyle('backgroundImage').replace(/url\(['"]?(.*?)['"]?\)/, '$1').trim();
                        if (url){
                                if (url.test(/\.png$/) && Browser.ie && Browser.version < 7)
                                        loader.setStyles({'backgroundImage': 'none', 'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + url + '", sizingMethod="crop")'});                                       
                                new Asset.image(url, {'onload': function(){
                                        var size = loader.getSize(),
                                                width = this.get('width'),
                                                height = this.get('height');
                                        if (width > size.x)
                                                loader.store('x', size.x).store('animate', 'x').store('frames', (width / size.x).toInt());
                                        if (height > size.y)
                                                loader.store('y', size.y).store('animate', 'y').store('frames', (height / size.y).toInt());
                                }});
                        }
                        loader.set('events', {
                                'animate': this.animate.bind(loader),
                                'hide': this.hide.pass(slideshow.classes.get('loader', 'hidden'), loader),
                                'show': this.show.pass(slideshow.classes.get('loader', 'visible'), loader)
                        });
                        loader.fireEvent('hide');
                },

                animate: function(){
                        var animate = this.retrieve('animate');
                        if (!animate)
                                return;
                        var i = (this.retrieve('i').toInt() + 1) % this.retrieve('frames');
                        this.store('i', i);
                        var n = (i * this.retrieve(animate)) + 'px';
                        if (animate == 'x')
                                this.setStyle('backgroundPosition', n + ' 0px');                       
                        if (animate == 'y')
                                this.setStyle('backgroundPosition', '0px ' + n);                       
                },

                hide: function(hidden){
                        if (this.get('aria-hidden') == 'false'){
                                this.set('aria-hidden', true).morph(hidden);
                                if (this.retrieve('animate'))
                                        clearTimeout(this.retrieve('timer'));
                        }
                },

                show: function(visible){
                        if (this.get('aria-hidden') == 'true'){
                                this.set('aria-hidden', false).morph(visible);
                                if (this.retrieve('animate')){
                                        this.store('timer', function(){
                                                this.fireEvent('animate')
                                        }.periodical(this.retrieve('delay'), this));                       
                                }
                        }
                }
        });

        /**
        Private method: thumbnails
                Builds the optional thumbnails element, adds interactivity.
                This method can safely be removed if the thumbnails option is not enabled.
        */

        var Thumbnails = new Class({
                Implements: [Chain, Events, Options],

                options: {/*
                        duration: 500,
                        transition: 'sine:in:out',
                        unit: false, */
                        columns: null,
                        fps: 50,
                        link: 'cancel',
                        position: null,
                        rows: null,
                        scroll: null
                },

                initialize: function(slideshow){
                        var options = (slideshow.options.thumbnails === true) ? {}
                                : slideshow.options.thumbnails;
                        this.setOptions(options);
                        var el = slideshow.el.getElement(slideshow.classes.get('thumbnails')),
                                thumbnails = el ? el.empty()
                                        : new Element('div', {'class': slideshow.classes.get('thumbnails').substr(1)});
                        slideshow.thumbnails = thumbnails;
                        thumbnails.set({'role': 'menubar', 'styles': {'overflow': 'hidden'}});
                        var uid = thumbnails.retrieve('uid', 'Slideshow-' + Date.now()),
                                ul = new Element('ul', {'role': 'menu', 'styles': {'left': 0, 'position': 'absolute', 'top': 0}, 'tween': {'link': 'cancel'}}).inject(thumbnails);
                        slideshow.data.thumbnails.each(function(thumbnail, i){
                                var li = new Element('li', {'id': uid + i}).inject(ul),
                                        a = new Element('a', {
                                                'class': slideshow.classes.get('thumbnails', 'hidden').substr(1),
                                                'events': {
                                                        'click': this.click.pass(i, slideshow)
                                                },
                                                'href': slideshow.data.images[i],
                                                'morph': this.options,
                                                'role': 'menuitem',
                                                'tabindex': i
                                        }).store('uid', i).inject(li);
                                if (slideshow.options.titles)
                                        a.set('title', slideshow.data.titles[i]);
                                new Asset.image(thumbnail, {
                                        'onload': this.onload.pass(i, slideshow)
                                }).inject(a);
                        }, this);
                        thumbnails.set('events', {
                                'scroll': this.scroll.bind(thumbnails),
                                'update': this.update.bind(slideshow)
                        });
                        var coords = thumbnails.getCoordinates();
                        if (!options.scroll)
                                options.scroll = (coords.height > coords.width) ? 'y'
                                        : 'x';
                        var props = (options.scroll == 'y') ? 'top bottom height y width'.split(' ')
                                : 'left right width x height'.split(' ');
                        thumbnails.store('props', props).store('delay', 1000 / this.options.fps);
                        slideshow.events.push('mousemove', this.mousemove.bind(thumbnails));
                        thumbnails.inject(slideshow.el);
                },

                click: function(i){
                        this.go(i);
                        return false;
                },

                mousemove: function(e){
                        var coords = this.getCoordinates();
                        if (e.page.x > coords.left && e.page.x < coords.right && e.page.y > coords.top && e.page.y < coords.bottom){
                                this.store('page', e.page);                       
                                if (!this.retrieve('mouseover')){
                                        this.store('mouseover', true);
                                        this.store('timer', function(){this.fireEvent('scroll');}.periodical(this.retrieve('delay'), this));
                                }
                        }
                        else {
                                if (this.retrieve('mouseover')){
                                        this.store('mouseover', false);                               
                                        clearTimeout(this.retrieve('timer'));
                                }
                        }                       
                },

                onload: function(i){
                        var thumbnails = this.thumbnails,
                                a = thumbnails.getElements('a')[i];
                        if (a){
                                (function(a){
                                        var visible = i == this.slide ? 'active'
                                                : 'inactive';                                       
                                        a.store('loaded', true).get('morph').set(this.classes.get('thumbnails', 'hidden')).start(this.classes.get('thumbnails', visible));       
                                }).delay(Math.max(1000 / this.data.thumbnails.length, 100), this, a);
                        }                                       
                        if (thumbnails.retrieve('limit'))
                                return;
                        var props = thumbnails.retrieve('props'),
                                options = this.options.thumbnails,
                                pos = props[1],
                                length = props[2],
                                width = props[4],
                                li = thumbnails.getElement('li:nth-child(' + (i + 1) + ')').getCoordinates();
                        if (options.columns || options.rows){
                                thumbnails.setStyles({'height': this.height, 'width': this.width});
                                if (options.columns.toInt())
                                        thumbnails.setStyle('width', li.width * options.columns.toInt());
                                if (options.rows.toInt())
                                        thumbnails.setStyle('height', li.height * options.rows.toInt());
                        }
                        var div = thumbnails.getCoordinates();
                        if (options.position){
                                if (options.position.test(/bottom|top/))
                                        thumbnails.setStyles({'bottom': 'auto', 'top': 'auto'}).setStyle(options.position, -div.height);
                                if (options.position.test(/left|right/))
                                        thumbnails.setStyles({'left': 'auto', 'right': 'auto'}).setStyle(options.position, -div.width);
                        }
                        var units = Math.floor(div[width] / li[width]),
                                x = Math.ceil(this.data.images.length / units),
                                r = this.data.images.length % units,
                                len = x * li[length],
                                ul = thumbnails.getElement('ul').setStyle(length, len);
                        ul.getElements('li').setStyles({'height': li.height, 'width': li.width});
                        thumbnails.store('limit', div[length] - len);
                },

                scroll: function(n, fast){
                        var div = this.getCoordinates(),
                                ul = this.getElement('ul').getPosition(),
                                props = this.retrieve('props'),
                                axis = props[3], delta, pos = props[0], size = props[2], value,                       
                                tween = this.getElement('ul').set('tween', {'property': pos}).get('tween');       
                        if (n != undefined){
                                var uid = this.retrieve('uid'),
                                        li = document.id(uid + n).getCoordinates();
                                delta = div[pos] + (div[size] / 2) - (li[size] / 2) - li[pos];
                                value = (ul[axis] - div[pos] + delta).limit(this.retrieve('limit'), 0);
                                tween[fast ? 'set' : 'start'](value);
                        }
                        else{
                                var area = div[props[2]] / 3,
                                        page = this.retrieve('page'),
                                        velocity = -(this.retrieve('delay') * 0.001);                       
                                if (page[axis] < (div[pos] + area))
                                        delta = (page[axis] - div[pos] - area) * velocity;
                                else if (page[axis] > (div[pos] + div[size] - area))
                                        delta = (page[axis] - div[pos] - div[size] + area) * velocity;                       
                                if (delta){                       
                                        value = (ul[axis] - div[pos] + delta).limit(this.retrieve('limit'), 0);
                                        tween.set(value);
                                }
                        }                               
                },

                update: function(fast){
                        var thumbnails = this.thumbnails,
                                uid = thumbnails.retrieve('uid');
                        thumbnails.getElements('a').each(function(a, i){
                                if (a.retrieve('loaded')){
                                        if (a.retrieve('uid') == this._slide){
                                                if (!a.retrieve('active', false)){
                                                        a.store('active', true);
                                                        var active = this.classes.get('thumbnails', 'active');                                                       
                                                        if (fast) a.get('morph').set(active);
                                                        else a.morph(active);
                                                }
                                        }
                                        else {
                                                if (a.retrieve('active', true)){
                                                        a.store('active', false);
                                                        var inactive = this.classes.get('thumbnails', 'inactive');                                               
                                                        if (fast) a.get('morph').set(inactive);
                                                        else a.morph(inactive);
                                                }
                                        }
                                }
                        }, this);
                        if (!thumbnails.retrieve('mouseover'))
                                thumbnails.fireEvent('scroll', [this._slide, fast]);
                }
        });
})();

---

Anbei zwei Beispiele, wie es bei mir aussieht. Entweder die Thumbs überlagern sich, oder der Abstand nach einen hochformatigen Thumb stimmt nicht. Der Abstand würde stimmen, wenn es als Querformat angezeigt würde...

Ich denke das Problem liegt an den neuen Optionen die das Bild Modul bietet.
Wahrscheinlich muss das angepasst werden.

Ich versuche das die Tage zu checken.

Schlauchbeutelmaschine hat mir geraten die ContentSlideshow2.php mit diesem Code abzuändern, um das Problem bis zur überarbeiteten Version zu beheben:

Code:

---

//-- Thumbnails
if ($objSettings->thumbnails)
{
$arrElements[$x]['thumb_src'] = $this->getImage($objElements->src . '/' . $subfile, $arrSlideshow2ThumbSize[0], $arrSlideshow2ThumbSize[1], 'proportional');
$arrElements[$x]['thumb_size'] = $arrSlideshow2ThumbSize;
}

---

Leider hat das nichts gebracht. Die Webseite soll morgen veröffentlicht werden und nun habe ich ein Problem.

Bei Contao 2.10.4 hat es noch einwandfrei funktioniert. Kann ich die Version 2.11.0 auf die 2.10.4 downgraden? Ist das möglich? Oder gibt es noch eine andere Lösung das Problem mit den Thumbnails der Slideshow 2 in der Contao Version 2.11.0 zu beheben? Das Problem habe ich nur, weil ich hoch- und querformatige Bilder verwende....

LG, El

Gibt es jemanden, der auch die Slideshow2 mit vertikalen und horizontalen Bildern in der 2.11er Version verwendet? Vielleicht stimmt auch etwas mit meiner Slideshow.js nicht!?