webForumDet fria alternativet

Söker bra popupscript som anpassar sej

JavaScript

15 svar · 985 visningar · startad av Folkbitar

Medlem sedan feb. 2003168 inlägg
Frågan#1

Hej!

Jag letar efter ett bra, som fungerar både i IE och FF, popupscript.
Det ska anpassa sej efter bilden mått per automatik.

Jag har använt mej av Jojoxx's popupscript2 och det funkar nästan bra.
Fönstret blir för litet i Firefox. I IE är det kanon.

Någon som har nått bra tips på script eller vet hur man kan
modifiera befintligt script så att det funkar i FF också?

mvh
Anders

Medlem sedan juni 2003771 inlägg
#2

Här ett där jag länkat bilderna direkt från webben.
Har testat i Ie, Firefox o Netscape

<html> 
<head> 
<style type="text/css">
#showimage{position:absolute;visibility:hidden}
</style>
<script type="text/javascript">
var ie=document.all
var ns6=document.getElementById&&!document.all
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body
}
function enlarge(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
if (position=="center"){
pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)
horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2
vertpos=ns6? pgyoffset+window.innerHeight/2-imgheight/2 : pgyoffset+ietruebody().clientHeight/2-imgheight/2
if (window.opera && window.innerHeight) //compensate for Opera toolbar
vertpos=pgyoffset+window.innerHeight/2-imgheight/2
vertpos=Math.max(pgyoffset, vertpos)
}
else{
var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX
var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY
}
crossobj.style.left=horzpos+"px"
crossobj.style.top=vertpos+"px"
crossobj.innerHTML='<div id="dragbar"><span OnClick=closepreview()></span></div><img src="'+which+'">'
crossobj.style.visibility="visible"
return false
}
else //if NOT IE 4+ or NS 6+, simply display image in full browser window
return true
}
function closepreview(){
crossobj.style.visibility="hidden"
}
function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx+"px"
crossobj.style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
}
return false
}
function initializedrag(e){
if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
} }
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")
</script> 
</head>
<BODY>
<div id="showimage"></div>
<a href onClick="return enlarge('http://www.arcadia-animations.com/anims/oliani.gif',event,'center',500,400)">
<img src="http://www.arcadia-animations.com/anims/oliani.gif" width=25  height=25 border="0"></a>
<br>
<a href onClick="return enlarge('http://www.huntingground.freeserve.co.uk/scripts/pic03.jpg',event,'center',500,400)">
<img src="http://www.huntingground.freeserve.co.uk/scripts/pic03.jpg" width=25  height=25 border="0"></a>
<br>
<a href onClick="return enlarge('http://www2.freefoto.com//images_d/15/19/15_19_1_web.jpg?&k=Tree%2C+Sunrise%',event,'center',500,400)">
<img src="http://www2.freefoto.com//images_d/15/19/15_19_1_web.jpg?&k=Tree%2C+Sunrise%" width=25  height=25 border="0"></a>
<br>
<a href onClick="return enlarge('http://w1.631.telia.com/~u63104551/alla/0-b/bakgr18.jpg',event,'center',500,400)">
<img src="http://w1.631.telia.com/~u63104551/alla/0-b/bakgr18.jpg" width=25  height=25 border="0"></a>
<br>
<a href onClick="return enlarge('http://www.smartson.se/files/gallery/Annonser/Smartson/lamborghini_bottom.jpg',event,'center',500,400)">
<img src="http://www.smartson.se/files/gallery/Annonser/Smartson/lamborghini_bottom.jpg" width=25  height=25 border="0"></a>
<br>
<a href onClick="return enlarge('http://www.beeflowers.com/Metro/-Startfiles-/City5.gif',event,'center',500,400)">
Obs! Jättestor bild <br>
Klicka här </a>
<br><br><br><br><br><br>
<a href onClick="return enlarge('',event,'center',1000,400)">
<INPUT type="button" style="width:100px; height:30px; " value="stäng bild" />
<br>
eller klicka på annan bild
</a>
<br>
</BODY> 
</HTML>
Medlem sedan feb. 2003168 inlägg
#3

Ok, tack.
Men här måste man ange bildens mått?

Jag är på jakt efter ett script som anpassar sej
direkt efter bilden.

/anders

Medlem sedan nov. 20017 144 inlägg
#4

Fattar inte vad du menar.
I mina bläddrare så blir fönstret mindre i IE än i FF.
Men tycker ändå att det ser ganska lika ut.

Medlem sedan feb. 2003168 inlägg
#5

Jesper T skrev:

Fattar inte vad du menar.
I mina bläddrare så blir fönstret mindre i IE än i FF.
Men tycker ändå att det ser ganska lika ut.

När jag använder mej av scriptet (jojoxx's, som jag länkar till i mitt första inlägg) blir popupen mindre i FF än i IE.
Det är inte så bra, i mitt fall, då hela bilden måste komma med, utan att besökaren ska behöva dra i fönstret för att se hela bilden.

/anders

Medlem sedan juni 2003771 inlägg
#6

Folkbitar skrev,
tack. Men här måste man ange bildens mått?

Nej, det anpassar sig efter bilden.
Har du kört scriptet?

Till Jesper T

Hos mig blir det lika stora popuper i Ie, Firefox o Netscape.
Är du verkligen säker?

Medlem sedan feb. 2003168 inlägg
#7

bossse skrev:

...

Nej, det anpassar sig efter bilden.
Har du kört scriptet?

Nej, inte än :r
Ska testa lite senare. Återkommer.

Tack så länge

/anders

Medlem sedan juni 2003771 inlägg
#8

Om man testar i resp webbläsare och högerklickar på popupbilden så ser man ju egenskaperna (bildens bredd o höjd)

Medlem sedan feb. 2003168 inlägg
#9

Kunde inte hålla mej, utan gjorde en test nu.
Det var ju ett tjusigt script.
Det kan jag ha användning för! Tack :-)

Men, det var ett popupscript jag sökte efter.
Det här visar ju bilden snyggt i samma webbläsarfönster.

red./ Kanske var lite otydlig med vad jag menade med popup.
Menar ju att bilden ska öppnas i ett nytt fönster. Sorry...

/anders

Medlem sedan juni 2003771 inlägg
#10

Testa då detta!
Nackdelen med detta är att man inte kan ha hur små bilder som helst!
Tror att gränsen går vid c:a 50x50px, har inte testat ännu.

<html> 
<head> 
<script type="text/javascript"> 
function bild(filename,winTitle) 
{ 
var myImage = new Image(); 
myImage.src=filename; 
properties='height=0,width=0'; 
var imgWindow = window.open('','','egenskaper'); 
html = '<html>';
html += '<head>';
html += '<title>'+winTitle+'</title>'; 
html += '<style type=text/css> body {overflow:hidden;} </style>';
html += '</head>'; 
html += '<body onBlur="window.close()" topmargin="0" leftmargin="0" >'; 
html += '<img src="'+myImage.src+'" onLoad="resizeTo (document.bild.width+10,document.bild.height+35); moveTo(100,50);" name="bild"OnClick="window.close();">'; 
html += '</body>'; 
html += '</html>'; 
imgWindow.document.write(html); 
} 
</script> 
</head> 
<body> 
Klicka var du vill på stora bilden för att stänga den eller klicka på en ny bild.
<p align=right> 
<a href="javascript:bild(' [url]http://www.nordensark.se/bilder/leo.jpg[/url] ')"> 
<img src=" [url]http://www.nordensark.se/bilder/leo.jpg[/url]" height="50" width="50" alt="bilbeskrivning"></a> 
<br>
<a href="javascript:bild(' [url]http://ftp.sunet.se/pub/pictures/animals/birds/duck2.jpg[/url]')"> 
<img src=" [url]http://ftp.sunet.se/pub/pictures/animals/birds/duck2.jpg[/url] " height="50" width="50" alt="bilbeskrivning"></a> 
<br>
<a href="javascript:bild(' [url]http://www.huntingground.freeserve.co.uk/scripts/pic04.jpg[/url] ')"> 
<img src=" [url]http://www.huntingground.freeserve.co.uk/scripts/pic04.jpg[/url]" height="50" width="50" alt="bilbeskrivning"></a> 
<br>
<a href="javascript:bild(' [url]http://www.huntingground.freeserve.co.uk/scripts/pic03.jpg[/url]')"> 
<img src=" [url]http://www.huntingground.freeserve.co.uk/scripts/pic03.jpg[/url] " height="50" width="50" alt="bilbeskrivning"></a> 
</p> 
</body> 
</html>
Medlem sedan feb. 2003168 inlägg
#11

bossse skrev:

Testa då detta!
Nackdelen med detta är att man inte kan ha hur små bilder som helst!
Tror att gränsen går vid c:a 50x50px, har inte testat ännu.

Tack, bossse, för att du tar dej tid.
Men jag får det inte som jag vill.

Provade din kod nu, och det funkar (som jojoxx's) nästan bra.
Lägger upp den här så att du, och andra som känner sej hågade, kan kolla:
http://www.folkbitar.com/temp/test.htm

/anders

Medlem sedan nov. 20017 144 inlägg
#12

Men härregud!
De är ju nästan exakt lika stora, är det millimeterprecision du snackar om eller? ;)
Det ser ju lika bra ut i båda bläddrarna.

bossse: Visst, yttermåttet ja. Men IE (SP2) plockar med den undre navigeringslisten, som gör att innemåttet blir mindre.

Medlem sedan feb. 2003168 inlägg
#13

Jesper T skrev:

Men härregud!
De är ju nästan exakt lika stora, är det millimeterprecision du snackar om eller? ;)
Det ser ju lika bra ut i båda bläddrarna.
....

Hupp, med det här scriptet blev dom lika stora.
Men det blir fel ändå.

Om du tittar noga på den undre tumnageln och sedan jämför med popupen så ser du att ganska mycket av texten i nederkant försvinner.

Anledningen till att jag vill ha ett script med, som du utrycker det, "millimeterprecision", är att det på många av bilderna finns en tryckt text som måste komma med.

Kan man i scriptkoden lägga till att den skriver ut med lite marginal runt bilden? Om det blir lite vitt runt omkring stör mej mindre, än att hela bilden inte kommer med.

/anders

Medlem sedan juni 2003771 inlägg
#14

Visst, ändra till

topmargin="4" leftmargin="4"

Då måste du samtidigt ändra bildens mått till ex. detta

(document.bild.width+20,document.bild.height+45);

Testa dig fram vilka mått som passar dig.

Medlem sedan feb. 2003168 inlägg
#15

Nu så, har jag kommit en bit på väg.
Tack, bossse.

Sätter sista inlägget som slutgiltigt svar,
för det var där jag fick klart för mej var någonstans
i scriptet jag ska ändra.

/anders

Medlem sedan juli 2002405 inlägg
#16

Kan man på nåt sätt bestämma en maxhöjd för hur hög bilden max får vara? Jag har text både under och över bilden och om bilden blir för stor så syns inte hela bilden och texten där nere.

613 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
479 ms — deklarationer (db)
0 ms — hämta statistik (cache)
131 ms — hämta tråd, inlägg och bilagor (db)
123 ms — ändringar (db)