title image


Smiley Picture Scroller -> Popup?
Hey ich hab mir letztens den Picture Scroller von jswelt.de heruntergeladen und ein bissel mit ihm getueftelt. Hab gerade erst mit JavaScript angefangen und die basic Sachen zwar herausgefunden aaaaber:



Ich habe versucht einen PopUp Skript mit einzubinden, dass wenn ich auf Bild1 klicke ein PopUp mit ner vergroesserten Version von Bild1 kommt. Nya, das funktioniert nicht so ganz, ich sehe nur einen sehr duennen blauen Strich am linken Rand des Scrollers und wenn ich direkt aufs Bild klicke funktioniert nix- ausserdem werden aus irgendeinem Grund die Bilder deswegen in der falschen Reihenfolge angezeigt. Auch ganz normale Links kann ich nicht einbinden, maps hab ich auch schon probiert !!

Hilfe waere einfach super!!



Hier ein Beispiel:



Code:











function popup(w,h,site) {

x = screen.availWidth/2-w/2;

y = screen.availHeight/2-h/2;

var popupWindow = window.open(

'','','width='+w+',height='+h+',left='+x+',top='+y+',screenX='+x+',screenY='+y);

popupWindow.document.write(site);

}







www.setCookie.de -->



















.viewer1 {width:351px; height:138px; overflow: hidden;}

.inViewer {position: absolute; left: -117px; top: -0px;}

.bildMitte {filter:Alpha(opacity=100, finishopacity=100, style=3)}

.bildAusen {filter:Alpha(opacity=40, finishopacity=40, style=3)}





var pos = -117; //Sollte das Bild breiter als 200px sein, das muss der Wert hier und in der Klasses .viewer1 angepasst werden

var thisDirection; //z.Z. ist der Wert in der Klasses .viewer1 fuer drei sichtbare Bilder, mit der Breite 200px, eingestellt.

var speed = 15; //Scroll Geschwindigkeit

var opacity1 = 100;

var opacity2 = 40;

var fin1 = 100;

var fin2 = 40;

var texte_start = 0;

bilder = new Array();

bilder[0] = "Bild01";

bilder[1] = "Bild02";

bilder[2] = "Bild03";

bilder[3] = "Bild04";

bilder[4] = "Bild05";

bilder[5] = "Bild06";

bilder[6] = "Bild07";

bilder[7] = "Bild08";

bilder[8] = "Bild09";

bilder[9] = "Bild10";

bilder[10] = "Bild11";

bilder[11] = "Bild12";

bilder[12] = "Bild13";

bilder[13] = "Bild14";

bilder[14] = "Bild15";

bilder[15] = "Bild16";

bilder[16] = "Bild17";

bilder[17] = "Bild18";

bilder[18] = "Bild19";

bilder[19] = "Bild20";

bilder[20] = "Bild21";

bilder[21] = "Bild22";

bilder[22] = "Bild23";

texte = new Array();

texte[0] = "Text1";

texte[1] = "Text2";

texte[2] = "Text3";

texte[3] = "Text4";

texte[4] = "Text5";

texte[5] = "Text6";

texte[6] = "Text7";

texte[7] = "Text8";

texte[8] = "Text9";

texte[9] = "Text10";

texte[10] = "Text11";

texte[11] = "Text12";

texte[12] = "Text13";

texte[13] = "Text14";

texte[14] = "Text15";

texte[15] = "Text16";

texte[16] = "Text17";

texte[17] = "Text18";

texte[18] = "Text19";

texte[19] = "Text20";

texte[20] = "Text21";

texte[21] = "Text22";

texte[22] = "Text23";

source = new Array();

auto = false;



function init(){

document.getElementById("texts").innerHTML = texte[texte_start];

}



function scroll(doDirection){

if (!doDirection) doDirection = thisDirection;

else thisDirection = doDirection;

if (doDirection == "-"){

direction = -10;

opacity1 = opacity1 - 3;

opacity2 = opacity2 + 3;

fin1 = fin1 - 3;

fin2 = fin2 + 3;

document.images[bilder[1]].style.filter = "Alpha(opacity="+opacity1+",finishopacity="+fin1+", style=1)";

document.images[bilder[2]].style.filter = "Alpha(opacity="+opacity2+",finishopacity="+fin2+", style=1)";

}

else{

direction = 10;

opacity1 = opacity1 - 3;

opacity2 = opacity2 + 3;

fin1 = fin1 - 3;

fin2 = fin2 + 3;

document.images[bilder[1]].style.filter = "Alpha(opacity="+opacity1+",finishopacity="+fin1+", style=3)";

document.images[bilder[0]].style.filter = "Alpha(opacity="+opacity2+",finishopacity="+fin2+", style=3)";

}

pos = pos + direction;

inViewer.style.left = pos;

if (pos > -234 && pos < 0) window.setTimeout("scroll()",speed);

else{

if (doDirection == "-"){

document.images[bilder[1]].style.filter = "Alpha(opacity=100,finishopacity=100, style=3)";

document.images[bilder[2]].style.filter = "Alpha(opacity=40,finishopacity=40, style=3)";

i2 = 0;

for(i = bilder.length-1; i2 <= i ; i2++){

x = i2-1;

if (x == -1) x = bilder.length-1;

source[x] = document.images[bilder[i2]].src;

}

i2 = 0;

for(i = source.length-1; i2 <= i; i2++){

document.images[bilder[i2]].src = source[i2];

}

}

else{

document.images[bilder[1]].style.filter = "Alpha(opacity=100,finishopacity=100, style=3)";

document.images[bilder[0]].style.filter = "Alpha(opacity=40,finishopacity=40, style=3)";

i2 = bilder.length-1;

for(i = 0; i2 >= i ; i2--){

x = i2+1;

if (x == bilder.length) x = 0;

source[x] = document.images[bilder[i2]].src;

}

i2 = bilder.length-1;

test = "";

for(i = 0; i2 >= i ; i2--){

document.images[bilder[i2]].src = source[i2];

}

}

opacity1 = 100;

opacity2 = 40;

fin1 = 100;

fin2 = 40;

pos = -117;

inViewer.style.left = -117;

if (auto) window.setTimeout("scroll()",speed);

}

}



function text(dir) {

texte_start+=dir;

if (texte_start<0) texte_start = texte.length-1;

else if (texte_start>=texte.length) texte_start = 0;

document.getElementById("texts").innerHTML = texte[texte_start];

}



























')">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild23">




width="117" height="138" hspace="0" class="bildAusen"

id="Bild01">


width="117" height="138" hspace="0" class="bildMitte"

id="Bild02">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild03">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild04">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild05">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild06">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild07">


id="Bild08">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild09">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild10">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild11">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild12">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild13">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild14">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild15">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild16">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild17">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild18">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild19">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild20">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild21">


width="117" height="138" hspace="0" class="bildAusen"

id="Bild22">















 





>>" onClick="scroll('+');text(1)">















Weiss jemand wie ich das einbinden kann oder kennt vielleicht jemand ne Alternative zu dem PicScroller?

Danke!!

The Mighty Pablo

geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: