Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag15.05.2013 um 08:34 (UTC)    
Titel: [erledigt] Bilder verschwinden aus Fotoshowcode

Hallo,

ich habe ein Problem mit einem Code für eine Fotoshow.
Wenn ich den Code in der Quellcodeansicht des Seiteneditors einfüge ist zunächst alles in Ordnung.
Wenn ich dann aber den Editor schließe oder mich auslogge und später wieder im HPBK in mein Profil einlogge, sind alle Bildadressen aus dem Code weg.
Habe mal im Code rot markiert was dann immer verschwindet.
Weiß jemand eine Lösung für das Problem?

hat es eventuell hiermit zutun?

http://www.homepage-baukasten.de/forum/viewtopic.php?t=141350

danke schonmal

Zitat:

<html>
<head>

<title>1</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background-image:url();
background-color: #767779;
width: 100%;
height: 100%;
left: -15px;
}
#imageFlow {
position: absolute;
width: 100%;
height: 80%;
left: -15px;
top: 27%;
background-image:url();
background-color: #767779;
}
#imageFlow .diapo {
position: absolute;
left: -1000px;
cursor: pointer;
-ms-interpolation-mode: nearest-neighbor;
}
#imageFlow .link {
border: dotted #000000 1px;
margin-left: -1px;
margin-bottom: -1px;
}
#imageFlow .bank {
visibility: hidden;
}
#imageFlow .top {
position: absolute;
width: 100%;
height: 60%;
background-image:url();
background-color: #767779;
top: 25px;
left: -15px;
}
#imageFlow .text {
position: absolute;
left: -20px;
width: 100%;
bottom: 11%;
text-align: center;
color: #000000;
font-family: verdana, arial, Helvetica, sans-serif;
z-index: 1000;
}
#imageFlow .title {
font-size: 0.9em;
font-weight: bold;
}
#imageFlow .legend {
font-size: 0.8em;
}
#imageFlow .scrollbar {
position: absolute;
left:9%;
bottom: 15%;
width: 80%;
height: 16px;
z-index: 1000;
}
#imageFlow .track {
position: absolute;
left: 1%;
width: 98%;
height: 16px;
filter: alpha(opacity=30);
opacity: 0.3;
}
#imageFlow .arrow-left {
position: absolute;
left: 0%;
}
#imageFlow .arrow-right {
position: absolute;
right: 0px;
}
#imageFlow .bar {
position: absolute;
height: 16px;
left: 25px;
}
</style>

<script type="text/javascript">

var imf = function () {
var lf = 0;
var instances = [];
function getElementsByClass (object, tag, className) {
var o = object.getElementsByTagName(tag);
for ( var i = 0, n = o.length, ret = []; i < n; i++)
if (o[i].className == className) ret.push(o[i]);
if (ret.length == 1) ret = ret[0];
return ret;
}
function addEvent (o, e, f) {
if (window.addEventListener) o.addEventListener(e, f, false);
else if (window.attachEvent) r = o.attachEvent('on' + e, f);
}
function createReflexion (cont, img) {
var flx = false;
if (document.createElement("canvas").getContext) {
flx = document.createElement("canvas");
flx.width = img.width;
flx.height = img.height;
var context = flx.getContext("2d");
context.translate(0, img.height);
context.scale(1, -1);
context.drawImage(img, 0, 0, img.width, img.height);
context.globalCompositeOperation = "destination-out";
var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
context.fillStyle = gradient;
context.fillRect(0, 0, img.width, img.height * 2);
} else {
/* ---- DXImageTransform ---- */
flx = document.createElement('img');
flx.src = img.src;
flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
(img.height * .25) + ')';
}
/* ---- insert Reflexion ---- */
flx.style.position = 'absolute';
flx.style.left = '-1000px';
cont.appendChild(flx);
return flx;
}
/* //////////// ==== ImageFlow Constructor ==== //////////// */
function ImageFlow(oCont, size, zoom, border) {
this.diapos = [];
this.scr = false;
this.size = size;
this.zoom = zoom;
this.bdw = border;
this.oCont = oCont;
this.oc = document.getElementById(oCont);
this.scrollbar = getElementsByClass(this.oc, 'div', 'scrollbar');
this.text = getElementsByClass(this.oc, 'div', 'text');
this.title = getElementsByClass(this.text, 'div', 'title');
this.legend = getElementsByClass(this.text, 'div', 'legend');
this.bar = getElementsByClass(this.oc, 'img', 'bar');
this.arL = getElementsByClass(this.oc, 'img', 'arrow-left');
this.arR = getElementsByClass(this.oc, 'img', 'arrow-right');
this.bw = this.bar.width;
this.alw = this.arL.width - 5;
this.arw = this.arR.width - 5;
this.bar.parent = this.oc.parent = this;
this.arL.parent = this.arR.parent = this;
this.view = this.back = -1;
this.resize();
this.oc.onselectstart = function () { return false; }
/* ---- create images ---- */
var img = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
this.NF = img.length;
for (var i = 0, o; o = img[i]; i++) {
this.diapos[i] = new Diapo(this, i,
o.rel,
o.title || '- ' + i + ' -',
o.innerHTML || o.rel,
o.href || '',
o.target || '_self'
);
}
/* ==== add mouse wheel events ==== */
if (window.addEventListener)
this.oc.addEventListener('DOMMouseScroll', function(e) {
this.parent.scroll(-e.detail);
}, false);
else this.oc.onmousewheel = function () {
this.parent.scroll(event.wheelDelta);
}
/* ==== scrollbar drag N drop ==== */
this.bar.onmousedown = function (e) {
if (!e) e = window.event;
var scl = e.screenX - this.offsetLeft;
var self = this.parent;
/* ---- move bar ---- */
this.parent.oc.onmousemove = function (e) {
if (!e) e = window.event;
self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
if (self.view != self.back) self.calc();
return false;
}
/* ---- release scrollbar ---- */
this.parent.oc.onmouseup = function (e) {
self.oc.onmousemove = null;
return false;
}
return false;
}
/* ==== right arrow ==== */
this.arR.onclick = this.arR.ondblclick = function () {
if (this.parent.view < this.parent.NF - 1)
this.parent.calc(1);
}
/* ==== Left arrow ==== */
this.arL.onclick = this.arL.ondblclick = function () {
if (this.parent.view > 0)
this.parent.calc(-1);
}
}
/* //////////// ==== ImageFlow prototype ==== //////////// */
ImageFlow.prototype = {
/* ==== targets ==== */
calc : function (inc) {
if (inc) this.view += inc;
var tw = 0;
var lw = 0;
var o = this.diapos[this.view];
if (o && o.loaded) {
/* ---- reset ---- */
var ob = this.diapos[this.back];
if (ob && ob != o) {
ob.img.className = 'diapo';
ob.z1 = 1;
}
/* ---- update legend ---- */
this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
/* ---- update hyperlink ---- */
if (o.url) {
o.img.className = 'diapo link';
window.status = 'hyperlink: ' + o.url;
} else {
o.img.className = 'diapo';
window.status = '';
}
/* ---- calculate target sizes & positions ---- */
o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;
var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
var x = x0 + o.w1 + this.bdw;
for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
if (o.loaded) {
o.x1 = x;
o.w1 = (this.ht / o.r) * this.size;
x += o.w1 + this.bdw;
tw += o.w1 + this.bdw;
}
}
x = x0 - this.bdw;
for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
if (o.loaded) {
o.w1 = (this.ht / o.r) * this.size;
o.x1 = x - o.w1;
x -= o.w1 + this.bdw;
tw += o.w1 + this.bdw;
lw += o.w1 + this.bdw;
}
}
/* ---- move scrollbar ---- */
if (!this.scr && tw) {
var r = (this.ws - this.alw - this.arw - this.bw) / tw;
this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
}
/* ---- save preview view ---- */
this.back = this.view;
}
},
/* ==== mousewheel scrolling ==== */
scroll : function (sc) {
if (sc < 0) {
if (this.view < this.NF - 1) this.calc(1);
} else {
if (this.view > 0) this.calc(-1);
}
},
/* ==== resize ==== */
resize : function () {
this.wh = this.oc.clientWidth;
this.ht = this.oc.clientHeight;
this.ws = this.scrollbar.offsetWidth;
this.calc();
this.run(true);
},
/* ==== move all images ==== */
run : function (res) {
var i = this.NF;
while (i--) this.diapos[i].move(res);
}
}
/* //////////// ==== Diapo Constructor ==== //////////// */
Diapo = function (parent, N, src, title, text, url, target) {
this.parent = parent;
this.loaded = false;
this.title = title;
this.text = text;
this.url = url;
this.target = target;
this.N = N;
this.img = document.createElement('img');
this.img.src = src;
this.img.parent = this;
this.img.className = 'diapo';
this.x0 = this.parent.oc.clientWidth;
this.x1 = this.x0;
this.w0 = 0;
this.w1 = 0;
this.z1 = 1;
this.img.parent = this;
this.img.onclick = function() { this.parent.click(); }
this.parent.oc.appendChild(this.img);
/* ---- display external link ---- */
if (url) {
this.img.onmouseover = function () { this.className = 'diapo link'; }
this.img.onmouseout = function () { this.className = 'diapo'; }
}
}
/* //////////// ==== Diapo prototype ==== //////////// */
Diapo.prototype = {
/* ==== HTML rendering ==== */
move : function (res) {
if (this.loaded) {
var sx = this.x1 - this.x0;
var sw = this.w1 - this.w0;
if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
/* ---- paint only when moving ---- */
this.x0 += sx * .1;
this.w0 += sw * .1;
if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
/* ---- paint only visible images ---- */
this.visible = true;
var o = this.img.style;
var h = this.w0 * this.r;
/* ---- diapo ---- */
o.left = Math.round(this.x0) + 'px';
o.bottom = Math.floor(this.parent.ht * .25) + 'px';
o.width = Math.round(this.w0) + 'px';
o.height = Math.round(h) + 'px';
/* ---- reflexion ---- */
if (this.flx) {
var o = this.flx.style;
o.left = Math.round(this.x0) + 'px';
o.top = Math.ceil(this.parent.ht * .75 + 1) + 'px';
o.width = Math.round(this.w0) + 'px';
o.height = Math.round(h) + 'px';
}
} else {
/* ---- disable invisible images ---- */
if (this.visible) {
this.visible = false;
this.img.style.width = '0px';
if (this.flx) this.flx.style.width = '0px';
}
}
}
} else {
/* ==== image onload ==== */
if (this.img.complete && this.img.width) {
/* ---- get size image ---- */
this.iw = this.img.width;
this.ih = this.img.height;
this.r = this.ih / this.iw;
this.loaded = true;
/* ---- create reflexion ---- */
this.flx = createReflexion(this.parent.oc, this.img);
if (this.parent.view < 0) this.parent.view = this.N;
this.parent.calc();
}
}
},
/* ==== diapo onclick ==== */
click : function () {
if (this.parent.view == this.N) {
/* ---- click on zoomed diapo ---- */
if (this.url) {
/* ---- open hyperlink ---- */
window.open(this.url, this.target);
} else {
/* ---- zoom in/out ---- */
this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
this.parent.calc();
}
} else {
/* ---- select diapo ---- */
this.parent.view = this.N;
this.parent.calc();
}
return false;
}
}
/* //////////// ==== public methods ==== //////////// */
return {
/* ==== initialize script ==== */
create : function (div, size, zoom, border) {
/* ---- instanciate imageFlow ---- */
var load = function () {
var loaded = false;
var i = instances.length;
while (i--) if (instances[i].oCont == div) loaded = true;
if (!loaded) {
/* ---- push new imageFlow instance ---- */
instances.push(
new ImageFlow(div, size, zoom, border)
);
/* ---- init script (once) ---- */
if (!imf.initialized) {
imf.initialized = true;
/* ---- window resize event ---- */
addEvent(window, 'resize', function () {
var i = instances.length;
while (i--) instances[i].resize();
});
/* ---- stop drag N drop ---- */
addEvent(document.getElementById(div), 'mouseout', function (e) {
if (!e) e = window.event;
var tg = e.relatedTarget || e.toElement;
if (tg && tg.tagName == 'HTML') {
var i = instances.length;
while (i--) instances[i].oc.onmousemove = null;
}
return false;
});
/* ---- set interval loop ---- */
setInterval(function () {
var i = instances.length;
while (i--) instances[i].run();
}, 16);
}
}
}
/* ---- window onload event ---- */
addEvent(window, 'load', function () { load(); });
}
}
}();

/* ==== create imageFlow ==== */
// div ID , size, zoom, border
imf.create("imageFlow", 0.20, 1.0, 10);

</script>
</head>

<body>

<div id="imageFlow">
<div class="top"></div>
<div class="bank">
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/extensionb.jpg
" title="Bild 1"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/linerblumenb.jpg" title="Bild 2"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/scharrib.jpg" title="Bild 3"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/edgesb.jpg
" title="Bild 4"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/bildb.jpg
" title="Bild 5"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/marionb.jpg
" title="Bild 6"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/blumenb.jpg
" title="Bild 7"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/nailartb.jpg
" title="Bild 8"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/yvonneb.jpg" title="Bild 9"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/bild034.jpg" title="Bild 10"> </a>
</div>


<div class="text">
<div class="title">Lade Bilder</div>
<div class="legend">Bitte warten ...</div>

</div>
<div class="scrollbar"><img alt="" src="http://img.webme.com/pic/w/wiese-nagelstuebchen/imageflow-scrollleiste.gif" class="track" />
<img alt="" src="http://img.webme.com/pic/w/wiese-nagelstuebchen/imageflow-arrow-left.gif" class="arrow-left" />
<img alt="" src="http://img.webme.com/pic/w/wiese-nagelstuebchen/imageflow-arrow-right.gif" class="arrow-right" />
<img alt="" src="http://img.webme.com/pic/w/wiese-nagelstuebchen/imageflow-bullet.png" class="bar" /></div>
</div>
</div>
</body>

</html>

</div>

______________
MfG aus Klein Paris-vereinzelte Rechtschreibfehler sind Special Effects meiner Tastatur


Zuletzt bearbeitet von klein-paris am 16.05.2013, 15:58, insgesamt 2-mal bearbeitet
Beitrag15.05.2013 um 15:42 (UTC)    
Titel: Re: Bilder verschwinden aus Fotoshowcode

Hallo!

klein-paris hat Folgendes geschrieben:
Habe mal im Code rot markiert was dann immer verschwindet.
Weiß jemand eine Lösung für das Problem?

Ich habe mal im Code rot markiert, was dort definitiv nicht reingehört.
Eventuell ist damit dein Problem schon gelöst:
klein-paris hat Folgendes geschrieben:
<html>
<head>
<title>1</title>
<meta http-equiv="imagetoolbar" content="no">

<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background-image:url();
background-color: #767779;
width: 100%;
height: 100%;
left: -15px;
}
#imageFlow {
position: absolute;
width: 100%;
height: 80%;
left: -15px;
top: 27%;
background-image:url();
background-color: #767779;
}
#imageFlow .diapo {
position: absolute;
left: -1000px;
cursor: pointer;
-ms-interpolation-mode: nearest-neighbor;
}
#imageFlow .link {
border: dotted #000000 1px;
margin-left: -1px;
margin-bottom: -1px;
}
#imageFlow .bank {
visibility: hidden;
}
#imageFlow .top {
position: absolute;
width: 100%;
height: 60%;
background-image:url();
background-color: #767779;
top: 25px;
left: -15px;
}
#imageFlow .text {
position: absolute;
left: -20px;
width: 100%;
bottom: 11%;
text-align: center;
color: #000000;
font-family: verdana, arial, Helvetica, sans-serif;
z-index: 1000;
}
#imageFlow .title {
font-size: 0.9em;
font-weight: bold;
}
#imageFlow .legend {
font-size: 0.8em;
}
#imageFlow .scrollbar {
position: absolute;
left:9%;
bottom: 15%;
width: 80%;
height: 16px;
z-index: 1000;
}
#imageFlow .track {
position: absolute;
left: 1%;
width: 98%;
height: 16px;
filter: alpha(opacity=30);
opacity: 0.3;
}
#imageFlow .arrow-left {
position: absolute;
left: 0%;
}
#imageFlow .arrow-right {
position: absolute;
right: 0px;
}
#imageFlow .bar {
position: absolute;
height: 16px;
left: 25px;
}
</style>

<script type="text/javascript">

var imf = function () {
var lf = 0;
var instances = [];
function getElementsByClass (object, tag, className) {
var o = object.getElementsByTagName(tag);
for ( var i = 0, n = o.length, ret = []; i < n; i++)
if (o[i].className == className) ret.push(o[i]);
if (ret.length == 1) ret = ret[0];
return ret;
}
function addEvent (o, e, f) {
if (window.addEventListener) o.addEventListener(e, f, false);
else if (window.attachEvent) r = o.attachEvent('on' + e, f);
}
function createReflexion (cont, img) {
var flx = false;
if (document.createElement("canvas").getContext) {
flx = document.createElement("canvas");
flx.width = img.width;
flx.height = img.height;
var context = flx.getContext("2d");
context.translate(0, img.height);
context.scale(1, -1);
context.drawImage(img, 0, 0, img.width, img.height);
context.globalCompositeOperation = "destination-out";
var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
context.fillStyle = gradient;
context.fillRect(0, 0, img.width, img.height * 2);
} else {
/* ---- DXImageTransform ---- */
flx = document.createElement('img');
flx.src = img.src;
flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
(img.height * .25) + ')';
}
/* ---- insert Reflexion ---- */
flx.style.position = 'absolute';
flx.style.left = '-1000px';
cont.appendChild(flx);
return flx;
}
/* //////////// ==== ImageFlow Constructor ==== //////////// */
function ImageFlow(oCont, size, zoom, border) {
this.diapos = [];
this.scr = false;
this.size = size;
this.zoom = zoom;
this.bdw = border;
this.oCont = oCont;
this.oc = document.getElementById(oCont);
this.scrollbar = getElementsByClass(this.oc, 'div', 'scrollbar');
this.text = getElementsByClass(this.oc, 'div', 'text');
this.title = getElementsByClass(this.text, 'div', 'title');
this.legend = getElementsByClass(this.text, 'div', 'legend');
this.bar = getElementsByClass(this.oc, 'img', 'bar');
this.arL = getElementsByClass(this.oc, 'img', 'arrow-left');
this.arR = getElementsByClass(this.oc, 'img', 'arrow-right');
this.bw = this.bar.width;
this.alw = this.arL.width - 5;
this.arw = this.arR.width - 5;
this.bar.parent = this.oc.parent = this;
this.arL.parent = this.arR.parent = this;
this.view = this.back = -1;
this.resize();
this.oc.onselectstart = function () { return false; }
/* ---- create images ---- */
var img = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
this.NF = img.length;
for (var i = 0, o; o = img[i]; i++) {
this.diapos[i] = new Diapo(this, i,
o.rel,
o.title || '- ' + i + ' -',
o.innerHTML || o.rel,
o.href || '',
o.target || '_self'
);
}
/* ==== add mouse wheel events ==== */
if (window.addEventListener)
this.oc.addEventListener('DOMMouseScroll', function(e) {
this.parent.scroll(-e.detail);
}, false);
else this.oc.onmousewheel = function () {
this.parent.scroll(event.wheelDelta);
}
/* ==== scrollbar drag N drop ==== */
this.bar.onmousedown = function (e) {
if (!e) e = window.event;
var scl = e.screenX - this.offsetLeft;
var self = this.parent;
/* ---- move bar ---- */
this.parent.oc.onmousemove = function (e) {
if (!e) e = window.event;
self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
if (self.view != self.back) self.calc();
return false;
}
/* ---- release scrollbar ---- */
this.parent.oc.onmouseup = function (e) {
self.oc.onmousemove = null;
return false;
}
return false;
}
/* ==== right arrow ==== */
this.arR.onclick = this.arR.ondblclick = function () {
if (this.parent.view < this.parent.NF - 1)
this.parent.calc(1);
}
/* ==== Left arrow ==== */
this.arL.onclick = this.arL.ondblclick = function () {
if (this.parent.view > 0)
this.parent.calc(-1);
}
}
/* //////////// ==== ImageFlow prototype ==== //////////// */
ImageFlow.prototype = {
/* ==== targets ==== */
calc : function (inc) {
if (inc) this.view += inc;
var tw = 0;
var lw = 0;
var o = this.diapos[this.view];
if (o && o.loaded) {
/* ---- reset ---- */
var ob = this.diapos[this.back];
if (ob && ob != o) {
ob.img.className = 'diapo';
ob.z1 = 1;
}
/* ---- update legend ---- */
this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
/* ---- update hyperlink ---- */
if (o.url) {
o.img.className = 'diapo link';
window.status = 'hyperlink: ' + o.url;
} else {
o.img.className = 'diapo';
window.status = '';
}
/* ---- calculate target sizes & positions ---- */
o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;
var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
var x = x0 + o.w1 + this.bdw;
for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
if (o.loaded) {
o.x1 = x;
o.w1 = (this.ht / o.r) * this.size;
x += o.w1 + this.bdw;
tw += o.w1 + this.bdw;
}
}
x = x0 - this.bdw;
for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
if (o.loaded) {
o.w1 = (this.ht / o.r) * this.size;
o.x1 = x - o.w1;
x -= o.w1 + this.bdw;
tw += o.w1 + this.bdw;
lw += o.w1 + this.bdw;
}
}
/* ---- move scrollbar ---- */
if (!this.scr && tw) {
var r = (this.ws - this.alw - this.arw - this.bw) / tw;
this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
}
/* ---- save preview view ---- */
this.back = this.view;
}
},
/* ==== mousewheel scrolling ==== */
scroll : function (sc) {
if (sc < 0) {
if (this.view < this.NF - 1) this.calc(1);
} else {
if (this.view > 0) this.calc(-1);
}
},
/* ==== resize ==== */
resize : function () {
this.wh = this.oc.clientWidth;
this.ht = this.oc.clientHeight;
this.ws = this.scrollbar.offsetWidth;
this.calc();
this.run(true);
},
/* ==== move all images ==== */
run : function (res) {
var i = this.NF;
while (i--) this.diapos[i].move(res);
}
}
/* //////////// ==== Diapo Constructor ==== //////////// */
Diapo = function (parent, N, src, title, text, url, target) {
this.parent = parent;
this.loaded = false;
this.title = title;
this.text = text;
this.url = url;
this.target = target;
this.N = N;
this.img = document.createElement('img');
this.img.src = src;
this.img.parent = this;
this.img.className = 'diapo';
this.x0 = this.parent.oc.clientWidth;
this.x1 = this.x0;
this.w0 = 0;
this.w1 = 0;
this.z1 = 1;
this.img.parent = this;
this.img.onclick = function() { this.parent.click(); }
this.parent.oc.appendChild(this.img);
/* ---- display external link ---- */
if (url) {
this.img.onmouseover = function () { this.className = 'diapo link'; }
this.img.onmouseout = function () { this.className = 'diapo'; }
}
}
/* //////////// ==== Diapo prototype ==== //////////// */
Diapo.prototype = {
/* ==== HTML rendering ==== */
move : function (res) {
if (this.loaded) {
var sx = this.x1 - this.x0;
var sw = this.w1 - this.w0;
if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
/* ---- paint only when moving ---- */
this.x0 += sx * .1;
this.w0 += sw * .1;
if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
/* ---- paint only visible images ---- */
this.visible = true;
var o = this.img.style;
var h = this.w0 * this.r;
/* ---- diapo ---- */
o.left = Math.round(this.x0) + 'px';
o.bottom = Math.floor(this.parent.ht * .25) + 'px';
o.width = Math.round(this.w0) + 'px';
o.height = Math.round(h) + 'px';
/* ---- reflexion ---- */
if (this.flx) {
var o = this.flx.style;
o.left = Math.round(this.x0) + 'px';
o.top = Math.ceil(this.parent.ht * .75 + 1) + 'px';
o.width = Math.round(this.w0) + 'px';
o.height = Math.round(h) + 'px';
}
} else {
/* ---- disable invisible images ---- */
if (this.visible) {
this.visible = false;
this.img.style.width = '0px';
if (this.flx) this.flx.style.width = '0px';
}
}
}
} else {
/* ==== image onload ==== */
if (this.img.complete && this.img.width) {
/* ---- get size image ---- */
this.iw = this.img.width;
this.ih = this.img.height;
this.r = this.ih / this.iw;
this.loaded = true;
/* ---- create reflexion ---- */
this.flx = createReflexion(this.parent.oc, this.img);
if (this.parent.view < 0) this.parent.view = this.N;
this.parent.calc();
}
}
},
/* ==== diapo onclick ==== */
click : function () {
if (this.parent.view == this.N) {
/* ---- click on zoomed diapo ---- */
if (this.url) {
/* ---- open hyperlink ---- */
window.open(this.url, this.target);
} else {
/* ---- zoom in/out ---- */
this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
this.parent.calc();
}
} else {
/* ---- select diapo ---- */
this.parent.view = this.N;
this.parent.calc();
}
return false;
}
}
/* //////////// ==== public methods ==== //////////// */
return {
/* ==== initialize script ==== */
create : function (div, size, zoom, border) {
/* ---- instanciate imageFlow ---- */
var load = function () {
var loaded = false;
var i = instances.length;
while (i--) if (instances[i].oCont == div) loaded = true;
if (!loaded) {
/* ---- push new imageFlow instance ---- */
instances.push(
new ImageFlow(div, size, zoom, border)
);
/* ---- init script (once) ---- */
if (!imf.initialized) {
imf.initialized = true;
/* ---- window resize event ---- */
addEvent(window, 'resize', function () {
var i = instances.length;
while (i--) instances[i].resize();
});
/* ---- stop drag N drop ---- */
addEvent(document.getElementById(div), 'mouseout', function (e) {
if (!e) e = window.event;
var tg = e.relatedTarget || e.toElement;
if (tg && tg.tagName == 'HTML') {
var i = instances.length;
while (i--) instances[i].oc.onmousemove = null;
}
return false;
});
/* ---- set interval loop ---- */
setInterval(function () {
var i = instances.length;
while (i--) instances[i].run();
}, 16);
}
}
}
/* ---- window onload event ---- */
addEvent(window, 'load', function () { load(); });
}
}
}();

/* ==== create imageFlow ==== */
// div ID , size, zoom, border
imf.create("imageFlow", 0.20, 1.0, 10);

</script>
</head>

<body>


<div id="imageFlow">
<div class="top"></div>
<div class="bank">
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/extensionb.jpg
" title="Bild 1"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/linerblumenb.jpg" title="Bild 2"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/scharrib.jpg" title="Bild 3"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/edgesb.jpg
" title="Bild 4"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/bildb.jpg
" title="Bild 5"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/marionb.jpg
" title="Bild 6"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/blumenb.jpg
" title="Bild 7"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/nailartb.jpg
" title="Bild 8"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/yvonneb.jpg" title="Bild 9"> </a>
<a rel="http://img.webme.com/pic/w/wiese-nagelstuebchen/bild034.jpg" title="Bild 10"> </a>
</div>

<div class="text">
<div class="title">Lade Bilder</div>
<div class="legend">Bitte warten ...</div>

</div>
<div class="scrollbar"><img alt="" src="http://img.webme.com/pic/w/wiese-nagelstuebchen/imageflow-scrollleiste.gif" class="track" />
<img alt="" src="http://img.webme.com/pic/w/wiese-nagelstuebchen/imageflow-arrow-left.gif" class="arrow-left" />
<img alt="" src="http://img.webme.com/pic/w/wiese-nagelstuebchen/imageflow-arrow-right.gif" class="arrow-right" />
<img alt="" src="http://img.webme.com/pic/w/wiese-nagelstuebchen/imageflow-bullet.png" class="bar" /></div>
</div>
</div>
</body>

</html>


</div>

Wenn der von dir gepostete Code genau so, wie du ihn hier reingestellt hast, ganz oben auf der Seite auftaucht, und du nichts vergessen hast, mit zu kopieren, dann ist das blau markierte auch überflüssig.

Gruß,
TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beitrag15.05.2013 um 18:31 (UTC)    
Titel:

danke vielmals transint - das schien das Problem zusein - jetzt ist alles da
______________
MfG aus Klein Paris-vereinzelte Rechtschreibfehler sind Special Effects meiner Tastatur
Beitrag15.05.2013 um 19:23 (UTC)    
Titel:

klein-paris hat Folgendes geschrieben:
danke vielmals transint - das schien das Problem zusein - jetzt ist alles da

Gerne Smile
Freut mich, wenn es geklappt hat.

Gruß,
TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de