Archivlink: javarea.de Forum > JavaScript > Max. Bildergröße bei der Slimbox
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Max. Bildergröße bei der Slimbox
Pages: [1]
| geschrieben von fischnackdissen am 13.09.2008 - 14:52 |
Hallo, ich brauche da mal Hilfe von JS-Pro`s. ich bin leider nur ein kleines Licht was JS angeht, deswegen die Bitte nach Hilfe.
habe folgenden Script für eine Slimbox. Könnte mir einer Helfen dieses Script so umzuschreiben, dass die Bilder max eine Breite von 650px haben. geht das überhautp. ich kann das wirklich alles überhaupt nciht einschätzen. Danke fpr Hilfe. Fisch
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
| var Lightbox = {
init: function(options){
this.options = $extend({
resizeDuration: 400,
resizeTransition: false, // default transition
initialWidth: 250,
initialHeight: 250,
animateCaption: true,
showCounter: true
}, options || {});
this.anchors = [];
$each(document.links, function(el){
if (el.rel && el.rel.test(/^lightbox/i)){
el.onclick = this.click.pass(el, this);
this.anchors.push(el);
}
}, this);
this.eventKeyDown = this.keyboardListener.bindAsEventListener(this);
this.eventPosition = this.position.bind(this);
this.overlay = new Element('div', {'id': 'lbOverlay'}).injectInside(document.body);
this.center = new Element('div', {'id': 'lbCenter', 'styles': {'width': this.options.initialWidth, 'height': this.options.initialHeight, 'marginLeft': -(this.options.initialWidth/2), 'display': 'none'}}).injectInside(document.body);
this.image = new Element('div', {'id': 'lbImage'}).injectInside(this.center);
this.prevLink = new Element('a', {'id': 'lbPrevLink', 'href': '#', 'styles': {'display': 'none'}}).injectInside(this.image);
this.nextLink = this.prevLink.clone().setProperty('id', 'lbNextLink').injectInside(this.image);
this.prevLink.onclick = this.previous.bind(this);
this.nextLink.onclick = this.next.bind(this);
this.bottomContainer = new Element('div', {'id': 'lbBottomContainer', 'styles': {'display': 'none'}}).injectInside(document.body);
this.bottom = new Element('div', {'id': 'lbBottom'}).injectInside(this.bottomContainer);
new Element('a', {'id': 'lbCloseLink', 'href': '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
this.caption = new Element('div', {'id': 'lbCaption'}).injectInside(this.bottom);
this.number = new Element('div', {'id': 'lbNumber'}).injectInside(this.bottom);
new Element('div', {'styles': {'clear': 'both'}}).injectInside(this.bottom);
var nextEffect = this.nextEffect.bind(this);
this.fx = {
overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
resize: this.center.effects($extend({duration: this.options.resizeDuration, onComplete: nextEffect}, this.options.resizeTransition ? {transition: this.options.resizeTransition} : {})),
image: this.image.effect('opacity', {duration: 500, onComplete: nextEffect}),
bottom: this.bottom.effect('margin-top', {duration: 400, onComplete: nextEffect})
};
this.preloadPrev = new Image();
this.preloadNext = new Image();
},
click: function(link){
if (link.rel.length == 8) return this.show(link.href, link.title);
var j, imageNum, images = [];
this.anchors.each(function(el){
if (el.rel == link.rel){
for (j = 0; j < images.length; j++) if(images[j][0] == el.href) break;
if (j == images.length){
images.push([el.href, el.title]);
if (el.href == link.href) imageNum = j;
}
}
}, this);
return this.open(images, imageNum);
},
show: function(url, title){
return this.open([[url, title]], 0);
},
open: function(images, imageNum){
this.images = images;
this.position();
this.setup(true);
this.top = window.getScrollTop() + (window.getHeight() / 15);
this.center.setStyles({top: this.top, display: ''});
this.fx.overlay.start(0.8);
return this.changeImage(imageNum);
},
position: function(){
this.overlay.setStyles({'top': window.getScrollTop(), 'height': window.getHeight()});
},
setup: function(open){
var elements = $A(document.getElementsByTagName('object'));
elements.extend(document.getElementsByTagName(window.ie ? 'select' : 'embed'));
elements.each(function(el){
if (open) el.lbBackupStyle = el.style.visibility;
el.style.visibility = open ? 'hidden' : el.lbBackupStyle;
});
... Code geth unten weiter, war zu lang  |
|
| geschrieben von fischnackdissen am 13.09.2008 - 14:58 |
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
| var fn = open ? 'addEvent' : 'removeEvent';
window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
document[fn]('keydown', this.eventKeyDown);
this.step = 0;
},
keyboardListener: function(event){
switch (event.keyCode){
case 27: case 88: case 67: this.close(); break;
case 37: case 80: this.previous(); break;
case 39: case 78: this.next();
}
},
previous: function(){
return this.changeImage(this.activeImage-1);
},
next: function(){
return this.changeImage(this.activeImage+1);
},
changeImage: function(imageNum){
if (this.step || (imageNum < 0) || (imageNum >= this.images.length)) return false;
this.step = 1;
this.activeImage = imageNum;
this.bottomContainer.style.display = this.prevLink.style.display = this.nextLink.style.display = 'none';
this.fx.image.hide();
this.center.className = 'lbLoading';
this.preload = new Image();
this.preload.onload = this.nextEffect.bind(this);
this.preload.src = this.images[imageNum][0];
return false;
},
nextEffect: function(){
switch (this.step++){
case 1:
this.center.className = '';
this.image.style.backgroundImage = 'url('+this.images[this.activeImage][0]+')';
this.image.style.width = this.bottom.style.width = this.preload.width+'px';
this.image.style.height = this.prevLink.style.height = this.nextLink.style.height = this.preload.height+'px';
this.caption.setHTML(this.images[this.activeImage][1] || '');
this.number.setHTML((!this.options.showCounter || (this.images.length == 1)) ? '' : 'Bild '+(this.activeImage+1)+' von '+this.images.length);
if (this.activeImage) this.preloadPrev.src = this.images[this.activeImage-1][0];
if (this.activeImage != (this.images.length - 1)) this.preloadNext.src = this.images[this.activeImage+1][0];
if (this.center.clientHeight != this.image.offsetHeight){
this.fx.resize.start({height: this.image.offsetHeight});
break;
}
this.step++;
case 2:
if (this.center.clientWidth != this.image.offsetWidth){
this.fx.resize.start({width: this.image.offsetWidth, marginLeft: -this.image.offsetWidth/2});
break;
}
this.step++;
case 3:
this.bottomContainer.setStyles({top: this.top + this.center.clientHeight, height: 0, marginLeft: this.center.style.marginLeft, display: ''});
this.fx.image.start(1);
break;
case 4:
if (this.options.animateCaption){
this.fx.bottom.set(-this.bottom.offsetHeight);
this.bottomContainer.style.height = '';
this.fx.bottom.start(0);
break;
}
this.bottomContainer.style.height = '';
case 5:
if (this.activeImage) this.prevLink.style.display = '';
if (this.activeImage != (this.images.length - 1)) this.nextLink.style.display = '';
this.step = 0;
}
},
close: function(){
if (this.step < 0) return;
this.step = -1;
if (this.preload){
this.preload.onload = Class.empty;
this.preload = null;
}
for (var f in this.fx) this.fx[f].stop();
this.center.style.display = this.bottomContainer.style.display = 'none';
this.fx.overlay.chain(this.setup.pass(false, this)).start(0);
return false;
}
};
window.addEvent('domready', Lightbox.init.bind(Lightbox)); |
|
| geschrieben von okley am 13.09.2008 - 19:15 |
Ich denke in der Funktion nextEffect kannst du die Grösse deines Bildes definieren.
Z.B. in Zeile 43/44. Du musst dann allerdings ebenfalls die Höhe des Bildes berechnen und setzen, ansonsten
wird dein Bild verzerrt dargestellt. |
| geschrieben von fischnackdissen am 14.09.2008 - 12:27 |
Hallo, Danke erst einmal für dei schnelle Hilfe.
Gehe cih recht in der Annahme, dass du diese Zeile meinst?
this.image.style.width = this.bottom.style.width = this.preload.width+'px';
Wenn ja, wie kann man denn da sagen, dass das Bild immer eine Breite von beispielsweise 700px haben soll.
Ich kenne mich leider nicht gut in JS aus und bin da ein wenig auf eure Hilfe angewiesen.
Wird das Bild dann einfach mit der Breite angezeigt oder muß das noch wild umgerechnet werden, damit das Bild nicht verzerrt wird?
Es wäre super cool, wenn mir einer eventuell die Zeile richtig vorgeben würde oder ist das alles recht unfangreich was ich da vor habe?
Danke für Infos.
Fisch |
| geschrieben von Klaush am 14.09.2008 - 12:33 |
| Kannst du das komplette Script in eine HTML Datei packen und hier anhängen, dann schau ich's mir genauer an. |
| geschrieben von fischnackdissen am 14.09.2008 - 17:19 |
Super nett, Danke vorab und anbei die html mit dem js-code.
bg
Fisch |
| geschrieben von Micha am 14.09.2008 - 18:15 |
Hi,
nicht geprüft aber ersetz mal sen case 1 - Teil:
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
| this.center.className = '';
this.image.style.backgroundImage = 'url('+this.images[this.activeImage][0]+')';
if (this.preload.width > 700) {
this.image.style.width = "700px";
this.image.style.height = this.preload.height*700/this.preload.width;
this.bottom.style.width = this.preload.width+'px';
this.prevLink.style.height = this.nextLink.style.height = this.preload.height+'px';
}
else {
this.image.style.width = this.bottom.style.width = this.preload.width+'px';
this.image.style.height = this.prevLink.style.height = this.nextLink.style.height = this.preload.height+'px';
}
this.caption.setHTML(this.images[this.activeImage][1] || '');
this.number.setHTML((!this.options.showCounter || (this.images.length == 1)) ? '' : 'Bild '+(this.activeImage+1)+' von '+this.images.length);
if (this.activeImage) this.preloadPrev.src = this.images[this.activeImage-1][0];
if (this.activeImage != (this.images.length - 1)) this.preloadNext.src = this.images[this.activeImage+1][0];
if (this.center.clientHeight != this.image.offsetHeight){
this.fx.resize.start({height: this.image.offsetHeight});
break;
}
this.step++; |
Ansonsten auf Klaus warten.
Micha
P.S. kann man keine JS-Dateien hochladen? |
| geschrieben von fischnackdissen am 15.09.2008 - 22:27 |
Hallo.
ne das hat leider nicht funktioniert. Nachdem ich den Case ausgetauscht habe kam komischweiser überhaupt kein Bild mehr. Nur der Footer der slimbox??
Fisch |
| geschrieben von Micha am 16.09.2008 - 19:30 |
Hi,
und eine Fehlermeldung? Kannst Du es mal temp online stellen? Einen kleine Fehler habe ich gefunden:
| HTML-Quelltext | 1:
| this.image.style.height = this.preload.height*700/this.preload.width; |
sollte wohl besser
| HTML-Quelltext | 1:
| this.image.style.height = parseInt(this.preload.height*700/this.preload.width) + "px"; |
heißen
Micha |
| geschrieben von fischnackdissen am 16.09.2008 - 20:40 |
Hallo. Nachdem ich deinen neuen Code eingebaut habe geht die slimbox wieder aber leider nimmt er nciht die Größe an.
Er zeigt die Bilder einfach so groß wie sie sind.
Fehlermeldung gab es nicht mit dem alten Code. Also der ohne deine letzte Zeile.
Die Slimbox besteht ja aus dem Foto und dem Footer wo des Close-Button drin ist und die Description
und dieser Footer der wurde angezeigt aber nciht mehr das Foto..
bg
Fisch |
| geschrieben von Micha am 16.09.2008 - 21:03 |
| Zitat von: Micha am 16.09.2008 - 19:30 | | |
Kannst Du es mal temp online stellen?
|
|
| geschrieben von Micha am 17.09.2008 - 07:54 |
Hi,
ja das hilft, da man im Opera direkt den Quellcode bearbeiten kann und das resultat sieht geile funktion, muß ich sagen... Zum Problem, in Opera ging folgendes:
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
| case 1:
this.center.className = '';
this.image.style.backgroundImage = 'url('+this.images[this.activeImage][0]+')';
var maxImageWidth = 300;
if (this.preload.width > maxImageWidth) {
this.image.style.width = this.bottom.style.width = this.preload.width = maxImageWidth + "px";
this.image.style.height = this.prevLink.style.height = this.nextLink.style.height = this.preload.height = parseInt(this.preload.height*maxImageWidth/this.preload.width) +"px";
}
else {
this.image.style.width = this.bottom.style.width = this.preload.width+'px';
this.image.style.height = this.prevLink.style.height = this.nextLink.style.height = this.preload.height+'px';
}
this.caption.setHTML(this.images[this.activeImage][1] || '');
this.number.setHTML((!this.options.showCounter || (this.images.length == 1)) ? '' : 'Bild '+(this.activeImage+1)+' von '+this.images.length);
if (this.activeImage) this.preloadPrev.src = this.images[this.activeImage-1][0];
if (this.activeImage != (this.images.length - 1)) this.preloadNext.src = this.images[this.activeImage+1][0];
if (this.center.clientHeight != this.image.offsetHeight){
this.fx.resize.start({height: this.image.offsetHeight});
break;
}
this.step++;
case 2: |
In der Variablen maxImageWidth kannst Du die gewünschte Größe eingeben.
Micha |
| geschrieben von fischnackdissen am 17.09.2008 - 11:19 |
Hallo. In der tat, im Opera geht es aber nciht im IE und FF. Außerdem ist mir aifgefallen, dass das Bidl ja beschnitten wird. nur mal generelle Frage, da cih galube , dass das zu viel verlang ist sowas zu bauen Kann man überhaupt das so bauen, dass die Slimbox das Bild automatisch skaliert also so wie ein Thhumbnail-Script und somit das ganze Bild zu sehen ist und nciht ein Ausschnitt?
Fisch |
| geschrieben von Micha am 17.09.2008 - 21:50 |
Hallo,
ich habe das Problem gefunden. Das Bild wird als Hintergrundbild eingebunden: | HTML-Quelltext | 1:
| this.image.style.backgroundImage = 'url('+this.images[this.activeImage][0]+')'; |
Solche Bilder kann man in der Größe nicht ändern. Nutze lieber ein anderes Script für Dein vorhaben...
Gruß Micha |
|