15 svar · 985 visningar · startad av Folkbitar
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
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>
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
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.
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
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?
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
Om man testar i resp webbläsare och högerklickar på popupbilden så ser man ju egenskaperna (bildens bredd o höjd)
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
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>
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
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.
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
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.
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
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.