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?
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ß
Geändert von Supermann (20.02.2012 um 13:01 Uhr)
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, '<').replace(/>/g, '>').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...
Geändert von ElMariachi (22.02.2012 um 10:57 Uhr)
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:
Leider hat das nichts gebracht. Die Webseite soll morgen veröffentlicht werden und nun habe ich ein Problem.Code://-- Thumbnails if ($objSettings->thumbnails) { $arrElements[$x]['thumb_src'] = $this->getImage($objElements->src . '/' . $subfile, $arrSlideshow2ThumbSize[0], $arrSlideshow2ThumbSize[1], 'proportional'); $arrElements[$x]['thumb_size'] = $arrSlideshow2ThumbSize; }
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!?
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)