Ladezeit Internet Explorer 8

gaby · Post by **gaby** » Mon 15. Aug 2011, 11:16

Hi morgen,
sorry, daß es einen Moment mit meiner Antwort gedauert hat, bleibe jetzt mal angemeldet.
Der Header, der die Slideshow beinhaltet, ist ausgeblendet - trotzdem wird er angezeigt. Jetzt versteh' ich grad nix mehr.Kann das an dieser Weiterleitung liegen? Screenshots anbei.

nameless1 · Post by **nameless1** » Mon 15. Aug 2011, 11:27

hallo gaby,

ja korrekt, das ist eine art verlinkung zu dem slideshow contentpart. blende den mal aus und schau was passiert.

gruß

nml1

gaby · Post by **gaby** » Mon 15. Aug 2011, 12:24

Der Contentpart Header ist auf allen Seiten ausgeblendet, die auch die untere Slideshow enthalten.
Trotzdem gleicher Fehler... (im IE8)

nameless1 · Post by **nameless1** » Mon 15. Aug 2011, 12:52

? das derzeitige problem ist doch das die slideshow im header nicht in allen browsern gleichgut funktioniert. korrekt?

gaby · Post by **gaby** » Mon 15. Aug 2011, 13:08

nameless1 · Post by **nameless1** » Mon 15. Aug 2011, 13:09

dann lass uns doch bitte darauf fokussieren.

das heißt aktivier den header-contentpart wieder und deaktivier mal testweise die slideshow im content-bereich.

gaby · Post by **gaby** » Mon 15. Aug 2011, 13:19

Habe ich gemacht, im IE8 laden die Seiten schnell inkl. Header

nameless1 · Post by **nameless1** » Mon 15. Aug 2011, 13:23

problem folglich eingegrenzt.

nutzt du für beide slideshows verschiedene funktionen?

gaby · Post by **gaby** » Mon 15. Aug 2011, 13:25

Funktionen?

nameless1 · Post by **nameless1** » Mon 15. Aug 2011, 13:34

nutzt du für beide slideshows die gleichen contentparts und templates?

gaby · Post by **gaby** » Mon 15. Aug 2011, 13:59

Nein.
_________________________________________________________________
Für den Header verwende ich xfade_randomStart.tmpl
Contentpart: Bilder <div>


[TITLE]<h1>{TITLE}</h1>[/TITLE]
[SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]

<div id="wechsel" class="xfade" style="width:{THUMB_WIDTH_MAX}px; height:{THUMB_HEIGHT_MAX}px; overflow:hidden;">




{IMAGE}
[CAPTION]<p>{CAPTION}</p>[/CAPTION][CAPTION_ELSE]<p>{IMGNAME}</p>[/CAPTION_ELSE]








</div>

[PHP]
$GLOBALS['block']['css']['xfade'] = 'specific/xfade.css';

$GLOBALS['block']['custom_htmlhead']['xfade'] = ' <script type="text/javascript">

</script>';

[/PHP]


__________________________________________________________________
Für beide Slideshows die Aeron slideshow (slideshow_simple_default.tmp)
Contentpart: Bilder <div>


[TITLE]<h1>{TITLE}</h1>[/TITLE]
[SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE]

<div class="images" id="images{ID}">

<div id="show" class="slideshow">

[CP_TRIG_WRAP_CONTENT]




[CP_TRIG_WRAP]

[CP_TRIG_IMG]{IMAGE}[/CP_TRIG_IMG]
[CP_TRIG_STR] <a {CP_TRIG_REL_LIGHBOX} href="{IMAGE_REL}"><img id="slide-{CP_TRIG_CLASS_ID}" src="{IMAGE_REL}" width="{IMAGE_WIDTH}" height="{IMAGE_HEIGHT}" alt="[CAPTION]{CAPTION}[/CAPTION][CAPTION_ELSE]{IMGNAME}[/CAPTION_ELSE]" style="{CP_TRIG_WIDTH_HEIGHT} {CP_TRIG_LEFT_TOP}" /></a>[/CP_TRIG_STR]

[CP_TRIG_THUMB] <li><a href="#slide-{CP_TRIG_CLASS_ID}"><img src="{THUMB_REL}" width="{THUMB_WIDTH}" height="{THUMB_HEIGHT}" alt="[CAPTION]{CAPTION}[/CAPTION][CAPTION_ELSE]{IMGNAME}[/CAPTION_ELSE]" /></a></li>[/CP_TRIG_THUMB]
[/CP_TRIG_WRAP]
















[/CP_TRIG_WRAP_CONTENT]
</div>

<div style="margin-top:100px;">
[TEXT]{TEXT}[/TEXT]
</div>

[CP_TRIG_WRAP_FOOTER]
[PHP]

// Load MooTools Lib
//initMootools();
initJSLib();

// Load MORE components
$mootools_more = array( 'Utilities/Assets','Fx/Fx.Elements' );
initJSPlugin($mootools_more, true);

// Load default and my css
$GLOBALS['block']['custom_htmlhead']['slideshow2.css'] = ' <link href="'.TEMPLATE_PATH.'lib/aeron_slideshow2/slideshow.css" rel="stylesheet" type="text/css" media="screen" />';

// -[CP_TRIG_WRAP_CSS_WIPING]

$GLOBALS['block']['custom_htmlhead']['slideshow2_resize'] = ' <style type="text/css">
/* Overriding the default Slideshow styles in order to achieve a custom effect */

.slideshow-images-visible {margin-left: 0;}
.slideshow-images-prev { margin-left: {CP_TRIG_WIDTH}px;}
.slideshow-images-next { margin-left: -{CP_TRIG_WIDTH}px;}
</style>';

// -[/CP_TRIG_WRAP_CSS_WIPING]

// -[CP_TRIG_WRAP_CSS_THUMBVERTICAL]

$GLOBALS['block']['custom_htmlhead']['slideshow2_thumb_vertical'] = ' <style type="text/css">
/* Overriding the default Slideshow thumbnails for the vertical presentation */

.slideshow-thumbnails {
height: {CP_TRIG_HEIGHT}px;
left: auto;
right: -80px;
top: 0;
width: 70px;
}
.slideshow-thumbnails ul {
height: {CP_TRIG_HEIGHT}px;
width: 70px;
}
.slideshow {height: {CP_TRIG_HEIGHT}px;}
.slideshow-captions {bottom: 0px;}

</style>';

// -[/CP_TRIG_WRAP_CSS_THUMBVERTICAL]

// -[CP_TRIG_WRAP_CSS_THUMBNOSLIDE]
// No slide for thumbnails

$GLOBALS['block']['custom_htmlhead']['slideshow2_thumb_noslide'] = ' <style type="text/css">
/* Overriding the default Slideshow thumbnails for the no slide presentation */

.slideshow {height: 370px; }
.slideshow-captions {bottom: 99px;}

.slideshow-thumbnails {height: 65px; }
.slideshow-thumbnails ul {width: 500px;}

</style>';

// -[/CP_TRIG_WRAP_CSS_THUMBNOSLIDE]

// -[CP_TRIG_WRAP_FOOTER_JS]

// -[CP_TRIG_CUSTOM_VAR]
// CUSTOM var =====================
// [%WIDTH:500%][%HEIGHT:370%]
// [%PREVNEXT:0%]
// [%THUMBNAIL:1%]
// [%THUMBVERTICAL:0%]
// [%THUMBNOSLIDE:1%]
// [%WIPING:0%]
// ================================
// -[/CP_TRIG_CUSTOM_VAR]

$GLOBALS['block']['custom_htmlhead']['slideshow2.js'] = ' <script src="'.TEMPLATE_PATH.'lib/aeron_slideshow2/slideshow.js" type="text/javascript"></script>';

// $GLOBALS['block']['custom_htmlhead']['slideshow.kenburns.js'] = ' <script src="'.TEMPLATE_PATH.'lib/aeron_slideshow2/slideshow.kenburns.js" type="text/javascript"></script>';

// $GLOBALS['block']['custom_htmlhead']['slideshow.push.js'] = ' <script src="'.TEMPLATE_PATH.'lib/aeron_slideshow2/slideshow.push.js" type="text/javascript"></script>';

// $GLOBALS['block']['custom_htmlhead']['slideshow.flash.js'] = ' <script src="'.TEMPLATE_PATH.'lib/aeron_slideshow2/slideshow.flash.js" type="text/javascript"></script>';

// $GLOBALS['block']['custom_htmlhead']['slideshow.fold.js'] = ' <script src="'.TEMPLATE_PATH.'lib/aeron_slideshow2/slideshow.fold.js" type="text/javascript"></script>';

$GLOBALS['block']['custom_htmlhead']['slideshow2'] = ' <script type="text/javascript">
//<![CDATA[

window.addEvent(\'domready\', function(){
var data = {};
var myShow = new Slideshow(\'show\', null, {
// var myShow = new Slideshow.KenBurns(\'show\', null, {
// var myShow = new Slideshow.Push(\'show\', null, {
// var myShow = new Slideshow.Flash(\'show\', null, {
// var myShow = new Slideshow.Fold(\'show\', null, {
captions: false,
center: true,
controller: true,
delay: 5000,
duration: 3000,
linked: false,
paused: false,
height: {CP_TRIG_HEIGHT},
width: {CP_TRIG_WIDTH},
slide: 0,
thumbnails: {CP_TRIG_THUMBNAIL},
overlap: true,
loop: true,
random: false,
resize: true,
titles: false,

// transition: \'elastic:out\', // push
// transition: \'bounce:out\', // fold

// color: [\'#EC2415\', \'#7EBBFF\'],

fast: false
});

});
//]]>
</script>';

// -[/CP_TRIG_WRAP_FOOTER_JS]
// zoom: 25,
// transition: \'back:in:out\',
// push: transition: \'elastic:out\',
// fold: transition: \'bounce:out\',

Unset ($GLOBALS['block']['custom_htmlhead']['lightbox.css']);
Unset ($GLOBALS['block']['custom_htmlhead']['slimbox.js']);
// initializeLightbox();
$GLOBALS['block']['custom_htmlhead']['lightbox.css'] = ' <link href="'.TEMPLATE_PATH.'lib/slimbox/slimbox.css" rel="stylesheet" type="text/css" media="screen" />';
$GLOBALS['block']['custom_htmlhead']['slimbox.js'] = ' <script type="text/javascript" src="template/lib/slimbox/slimbox.mootools-1.2.js" ></script>';

[/PHP]
[/CP_TRIG_WRAP_FOOTER]
</div>


In diesem Template habe ich Änderungen vorgenommen, weil die Slideshow sonst nicht so laufen würde. Die Abmessungen der Bilder habe ich verändert und

paused: false, steht default auf true
loop: true, steht default auf false
___________________________________________________________________
Dann gibt es noch eine Javascript-Datei:
/**
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) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).

Dependencies:
Mootools 1.2 Core: Fx.Morph, Fx.Tween, Selectors, Element.Dimensions.
Mootools 1.2 More: Assets.
*/

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

options: {/*
onComplete: $empty,
onEnd: $empty,
onStart: $empty,*/
captions: false,
center: true,
classes: [],
controller: true,
delay: 2000,
duration: 750,
fast: false,
height: false,
href: '',
hu: '',
linked: false,
loader: {'animate': ['css/loader-#.png', 12]},
loop: true,
match: /\?slide=(\d+)$/,
overlap: true,
paused: true,
properties: ['href', 'rel', 'rev', 'title'],
random: false,
replace: [/(\.[^\.]+)$/, 't$1'],
resize: 'width',
slide: 0,
thumbnails: false,
titles: true,
transition: function(p){return -(Math.cos(Math.PI * p) - 1) / 2;},
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.slideshow = $(el);
if (!this.slideshow)
return;
this.slideshow.set('styles', {'display': 'block', 'position': 'relative', 'z-index': 0});
var match = window.location.href.match(this.options.match);
this.slide = (this.options.match && match) ? match[1].toInt() : this.options.slide;
this.counter = this.delay = this.transition = 0;
this.direction = 'left';
this.paused = false;
if (!this.options.overlap)
this.options.duration *= 2;
var anchor = this.slideshow.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 = 2;

// styles

var keys = ['slideshow', 'first', 'prev', 'play', 'pause', 'next', 'last', 'images', 'captions', 'controller', 'thumbnails', 'hidden', 'visible', 'inactive', 'active', 'loader'];
var values = keys.map(function(key, i){
return this.options.classes || 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]);
return str;
}.bind(this.classes);

// data

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

// events

this.events = $H({'keydown': [], 'keyup': [], 'mousemove': []});
var keyup = function(e){
switch(e.key){
case 'left':
this.prev(e.shift); break;
case 'right':
this.next(e.shift); break;
case 'p':
this.pause(); break;
}
}.bind(this);
this.events.keyup.push(keyup);
document.addEvent('keyup', keyup);

// required elements

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

// optional elements

if (this.options.captions)
this._captions();
if (this.options.controller)
this._controller();
if (this.options.loader)
this._loader();
if (this.options.thumbnails)
this._thumbnails();

// begin show

this._preload();
},

/**
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){
if ((this.slide - 1 + this.data.images.length) % this.data.images.length == n || $time() < this.transition)
return;
$clear(this.timer);
this.delay = 0;
this.direction = (direction) ? direction : ((n < this.slide) ? 'right' : 'left');
this.slide = n;
if (this.preloader)
this.preloader = this.preloader.destroy();
this._preload(this.options.fast == 2 || (this.options.fast == 1 && this.paused));
},

/**
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 it's a random show get the previous slide from the showed array

if (this.showed.i < 2)
return;
this.showed.i -= 2;
n = this.showed.array[this.showed.i];
}
else
n = (this.slide - 2 + 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 ($chk(p))
this.paused = (p) ? false : true;
if (this.paused){
this.paused = false;
this.delay = this.transition = 0;
this.timer = this._preload.delay(100, this);
[this.a, this.b].each(function(img){
['morph', 'tween'].each(function(p){
if (this.retrieve(p)) this.get(p).resume();
}, img);
});
if (this.options.controller)
this.slideshow.getElement('.' + this.classes.pause).removeClass(this.classes.play);
}
else {
this.paused = true;
this.delay = Number.MAX_VALUE;
this.transition = 0;
$clear(this.timer);
[this.a, this.b].each(function(img){
['morph', 'tween'].each(function(p){
if (this.retrieve(p)) this.get(p).pause();
}, img);
});
if (this.options.controller)
this.slideshow.getElement('.' + this.classes.pause).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 ($type(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': []};
for (var image in data){
var obj = data[image] || {};
var caption = (obj.caption) ? obj.caption.trim() : '';
var href = (obj.href) ? obj.href.trim() : ((this.options.linked) ? this.options.hu + image : this.options.href);
var thumbnail = (obj.thumbnail) ? obj.thumbnail.trim() : image.replace(this.options.replace[0], this.options.replace[1]);
this.data.images.push(image);
this.data.captions.push(caption);
this.data.hrefs.push(href);
this.data.thumbnails.push(thumbnail);
}
if (this.options.random)
this.slide = $random(0, this.data.images.length - 1);

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

if (this.options.thumbnails && this.slideshow.retrieve('thumbnails'))
this._thumbnails();
if (this.slideshow.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.transition = 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){
this.events.each(function(array, e){
array.each(function(fn){ document.removeEvent(e, fn); });
});
this.pause(1);
if (this.options.loader)
$clear(this.slideshow.retrieve('loader').retrieve('timer'));
if (this.options.thumbnails)
$clear(this.slideshow.retrieve('thumbnails').retrieve('timer'));
this.slideshow.uid = Native.UID++;
if (p)
this.slideshow[p]();
},

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

_preload: function(fast){
if (!this.preloader)
this.preloader = new Asset.image(this.options.hu + this.data.images[this.slide], {'onload': function(){
this.store('loaded', true);
}});
if (this.preloader.retrieve('loaded') && $time() > this.delay && $time() > this.transition){
if (this.stopped){
if (this.options.captions)
this.slideshow.retrieve('captions').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': 'auto', 'visibility': 'hidden', 'width': 'auto', 'zIndex': this.counter});
['src', 'height', 'width'].each(function(prop){
this.image.set(prop, this.preloader.get(prop));
}, this);
this._resize(this.image);
this._center(this.image);
var anchor = this.image.getParent();
if (this.data.hrefs[this.slide])
anchor.set('href', this.data.hrefs[this.slide]);
else
anchor.erase('href');
var text = (this.data.captions[this.slide])
? this.data.captions[this.slide].replace(/<.+?>/gm, '').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, "'")
: '';
this.image.set('alt', text);
if (this.options.titles)
anchor.set('title', text);
if (this.options.loader)
this.slideshow.retrieve('loader').fireEvent('hide');
if (this.options.captions)
this.slideshow.retrieve('captions').fireEvent('update', fast);
if (this.options.thumbnails)
this.slideshow.retrieve('thumbnails').fireEvent('update', fast);
this._show(fast);
this._loaded();
}
else {
if ($time() > this.delay && this.options.loader)
this.slideshow.retrieve('loader').fireEvent('show');
this.timer = (this.paused && this.preloader.retrieve('loaded')) ? null : this._preload.delay(100, this, fast);
}
},

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

_show: function(fast){
if (!this.image.retrieve('morph')){
var options = (this.options.overlap) ? {'duration': this.options.duration, 'link': 'cancel'} : {'duration': this.options.duration / 2, 'link': 'chain'};
$$(this.a, this.b).set('morph', $merge(options, {'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'));
var visible = this.classes.get('images', 'visible');
var 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(hidden, visible){
this.image.get('morph').set(hidden).start(visible);
}.pass([hidden, visible], this);
hidden = this.classes.get('images', ((this.direction == 'left') ? 'prev' : 'next'));
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(){
this.counter++;
this.delay = (this.paused) ? Number.MAX_VALUE : $time() + this.options.duration + this.options.delay;
this.direction = 'left';
this.transition = (this.options.fast == 2 || (this.options.fast == 1 && this.paused)) ? 0 : $time() + this.options.duration;
if (this.slide + 1 == this.data.images.length && !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 = $random(0, this.data.images.length - 1);
}
else
this.slide = this.showed.array[this.showed.i];
}
else
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._preload();
},

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

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

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

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

/**
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.firstrun = false;
this.pause(1);
}
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.
*/

_captions: function(){
if (this.options.captions === true)
this.options.captions = {};
var el = this.slideshow.getElement(this.classes.get('captions'));
var captions = (el) ? el.empty() : new Element('div', {'class': this.classes.get('captions').substr(1)}).inject(this.slideshow);
captions.set({
'events': {
'update': function(fast){
var captions = this.slideshow.retrieve('captions');
var empty = (this.data.captions[this.slide] === '');
if (fast){
var p = (empty) ? 'hidden' : 'visible';
captions.set('html', this.data.captions[this.slide]).get('morph').cancel().set(this.classes.get('captions', p));
}
else {
var fn = (empty) ? $empty : function(n){
this.slideshow.retrieve('captions').set('html', this.data.captions[n]).morph(this.classes.get('captions', 'visible'))
}.pass(this.slide, this);
captions.get('morph').cancel().start(this.classes.get('captions', 'hidden')).chain(fn);
}
}.bind(this)
},
'morph': $merge(this.options.captions, {'link': 'chain'})
});
this.slideshow.store('captions', captions);
},

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

_controller: function(){
if (this.options.controller === true)
this.options.controller = {};
var el = this.slideshow.getElement(this.classes.get('controller'));
var controller = (el) ? el.empty() : new Element('div', {'class': this.classes.get('controller').substr(1)}).inject(this.slideshow);
var ul = new Element('ul').inject(controller);
$H({'first': 'Shift + Leftwards Arrow', 'prev': 'Leftwards Arrow', 'pause': 'P', 'next': 'Rightwards Arrow', 'last': 'Shift + Rightwards Arrow'}).each(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.slideshow.retrieve(action, new Element('a', {
'title': ((action == 'pause') ? this.classes.play.capitalize() + ' / ' : '') + this.classes[action].capitalize() + ' [' + accesskey + ']'
}).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)
});
}, this);
controller.set({
'events': {
'hide': function(hidden){
if (!this.retrieve('hidden'))
this.store('hidden', true).morph(hidden);
}.pass(this.classes.get('controller', 'hidden'), controller),
'show': function(visible){
if (this.retrieve('hidden'))
this.store('hidden', false).morph(visible);
}.pass(this.classes.get('controller', 'visible'), controller)
},
'morph': $merge(this.options.controller, {'link': 'cancel'})
}).store('hidden', false);
var keydown = function(e){
if (['left', 'right', 'p'].contains(e.key)){
var controller = this.slideshow.retrieve('controller');
if (controller.retrieve('hidden'))
controller.get('morph').set(this.classes.get('controller', 'visible'));
switch(e.key){
case 'left':
this.slideshow.retrieve((e.shift) ? 'first' : 'prev').fireEvent('mouseenter'); break;
case 'right':
this.slideshow.retrieve((e.shift) ? 'last' : 'next').fireEvent('mouseenter'); break;
default:
this.slideshow.retrieve('pause').fireEvent('mouseenter'); break;
}
}
}.bind(this);
this.events.keydown.push(keydown);
var keyup = function(e){
if (['left', 'right', 'p'].contains(e.key)){
var controller = this.slideshow.retrieve('controller');
if (controller.retrieve('hidden'))
controller.store('hidden', false).fireEvent('hide');
switch(e.key){
case 'left':
this.slideshow.retrieve((e.shift) ? 'first' : 'prev').fireEvent('mouseleave'); break;
case 'right':
this.slideshow.retrieve((e.shift) ? 'last' : 'next').fireEvent('mouseleave'); break;
default:
this.slideshow.retrieve('pause').fireEvent('mouseleave'); break;
}
}
}.bind(this);
this.events.keyup.push(keyup);
var mousemove = function(e){
var images = this.slideshow.retrieve('images').getCoordinates();
if (e.page.x > images.left && e.page.x < images.right && e.page.y > images.top && e.page.y < images.bottom)
this.slideshow.retrieve('controller').fireEvent('show');
else
this.slideshow.retrieve('controller').fireEvent('hide');
}.bind(this);
this.events.mousemove.push(mousemove);
document.addEvents({'keydown': keydown, 'keyup': keyup, 'mousemove': mousemove});
this.slideshow.retrieve('controller', controller).fireEvent('hide');
},

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

_loader: function(){
if (this.options.loader === true)
this.options.loader = {};
var loader = new Element('div', {
'class': this.classes.get('loader').substr(1),
'morph': $merge(this.options.loader, {'link': 'cancel'})
}).store('hidden', false).store('i', 1).inject(this.slideshow.retrieve('images'));
if (this.options.loader.animate){
for (var i = 0; i < this.options.loader.animate[1]; i++)
img = new Asset.image(this.options.loader.animate[0].replace(/#/, i));
if (Browser.Engine.trident4 && this.options.loader.animate[0].contains('png'))
loader.setStyle('backgroundImage', 'none');
}
loader.set('events', {
'animate': function(){
var loader = this.slideshow.retrieve('loader');
var i = (loader.retrieve('i').toInt() + 1) % this.options.loader.animate[1];
loader.store('i', i);
var img = this.options.loader.animate[0].replace(/#/, i);
if (Browser.Engine.trident4 && this.options.loader.animate[0].contains('png'))
loader.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + img + '", sizingMethod="scale")';
else
loader.setStyle('backgroundImage', 'url(' + img + ')');
}.bind(this),
'hide': function(){
var loader = this.slideshow.retrieve('loader');
if (!loader.retrieve('hidden')){
loader.store('hidden', true).morph(this.classes.get('loader', 'hidden'));
if (this.options.loader.animate)
$clear(loader.retrieve('timer'));
}
}.bind(this),
'show': function(){
var loader = this.slideshow.retrieve('loader');
if (loader.retrieve('hidden')){
loader.store('hidden', false).morph(this.classes.get('loader', 'visible'));
if (this.options.loader.animate)
loader.store('timer', function(){this.fireEvent('animate');}.periodical(50, loader));
}
}.bind(this)
});
this.slideshow.retrieve('loader', loader).fireEvent('hide');
},

/**
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,
'morph': $merge(this.options.thumbnails, {'link': 'cancel'})
}).inject(li);
if (this.data.captions && this.options.titles)
a.set('title', this.data.captions.replace(/<.+?>/gm, '').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, "'"));
var img = new Asset.image(this.options.hu + thumbnail, {
'onload': function(){this.fireEvent('loaded');}.bind(a)
}).inject(a);
}, this);
thumbnails.set('events', {
'scroll': function(n, fast){
var div = this.getCoordinates();
var ul = this.getElement('ul').getPosition();
var props = this.retrieve('props');
var axis = props[3], delta, pos = props[0], size = props[2], value;
var tween = this.getElement('ul').get('tween', {'property': pos});
if ($chk(n)){
var li = this.getElements('li')[n].getCoordinates();
delta = div[pos] + (div[size] / 2) - (li[size] / 2) - li[pos]
value = (ul[axis] - div[pos] + delta).limit(this.retrieve('limit'), 0);
if (fast)
tween.set(value);
else
tween.start(value);
}
else{
var area = div[props[2]] / 3, page = this.retrieve('page'), velocity = -0.2;
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);
}
}
}.bind(thumbnails),
'update': function(fast){
var thumbnails = this.slideshow.retrieve('thumbnails');
thumbnails.getElements('a').each(function(a, i){
if (i == 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]);
}.bind(this)
})
var div = thumbnails.getCoordinates();
thumbnails.store('props', (div.height > div.width) ? ['top', 'bottom', 'height', 'y'] : ['left', 'right', 'width', 'x']);
var mousemove = function(e){
var div = this.getCoordinates();
if (e.page.x > div.left && e.page.x < div.right && e.page.y > div.top && e.page.y < div.bottom){
this.store('page', e.page);
if (!this.retrieve('mouseover')){
this.store('mouseover', true);
this.store('timer', function(){this.fireEvent('scroll');}.periodical(50, this));
}
}
else {
if (this.retrieve('mouseover')){
this.store('mouseover', false);
$clear(this.retrieve[/color]('timer'));
}
}
}.bind(thumbnails);
this.events.mousemove.push(mousemove);
document.addEvent('mousemove', mousemove);
this.slideshow.store('thumbnails', thumbnails);
}
});
_______________________________________________________________________________
Auch in dieser Datei habe ich Änderungen durchgeführt:
controller: true,
paused: true,

Das ist ne Menge Script - hoffe, es ist einigermaßen übersichtlich, danke!

nameless1 · Post by **nameless1** » Mon 15. Aug 2011, 16:29

hossa, ich werde mich da jetzt nicht durch den code wühlen können. sicher ist jedoch das beide miteinander nicht können (oder wollen).

was spricht dagegen nur noch eine slideshow zu nehmen? für die im header mußt du dann halt die navigation ausblenden. das ist sicherlich einfacher als alles andere (auch für pros).

Post by **flip-flop** » Mon 15. Aug 2011, 17:11

Hi,

solche Scriptauszüge sollten grundsätzlich in [code_].....[/code_] dargestellt werden (Ohne Unterstrich).

Außerdem verstehe ich nicht, weshalb du dich immer noch mit diesem uralten Script im Header rumärgerst (Das CopyRight fehlt ebenfalls noch).
Hier hatte ich den Ansatz für die doppelte Verwendung der Aeron Slideshow auf einer Seite gezeigt.

Im JS brauchst du nichts verändern, das kann alles im Template eingestellt werden (auch in der einfachen Version).
Auch irgendwelche Dateien müssen nicht neu installiert werden.

Die SlideShow im Kopfbereich wird über SHOWCONTENT eingebunden, der passende CP "Bilder <div>" liegt in einem versteckten Bereich der Seite. Dieser CP wird von einem eigenen Template mit den oben gezeigten Änderungen bedient. (Natürlich müssen noch die Bildgröße und die gewünschten Funktionen ein/ausgeschaltet werden).
Ist jedoch alles im Template möglich.

Knut

Ladezeit Internet Explorer 8

Re: Ladezeit Internet Explorer 8

Re: Ladezeit Internet Explorer 8

Re: Ladezeit Internet Explorer 8

Re: Ladezeit Internet Explorer 8

Re: Ladezeit Internet Explorer 8

Re: Ladezeit Internet Explorer 8

Re: Ladezeit Internet Explorer 8

Re: Ladezeit Internet Explorer 8

Re: Ladezeit Internet Explorer 8

Re: Ladezeit Internet Explorer 8

Re: Ladezeit Internet Explorer 8

Re: Ladezeit Internet Explorer 8

Re: Ladezeit Internet Explorer 8