Bildpopup, need some help.

2 svar · 307 visningar · startad av Stardock 11 juli 2004

StardockMedlem sedan juli 20043 inlägg

Trådstart11 juli 2004 04:10#1

Jag har ett litet störande problem ang. en bildpopup jag hittat.
Den är en såkallad autoresize, helt perfekt tyckte jag.
Men sidan jag håller på med har rätt så förbannat stora upplösningar på sina bilder på galleriet så fönstret blir utanför upplösningen och oskrollbar.
Detta är vad jag har nu:

PositionX = 100;
PositionY = 100;

defaultWidth = 1024;
defaultHeight = 768;

var AutoClose = false;

if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=yes,resizeable=yes,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=yes,resizeable=yes,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="yes" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=000000 scroll="yes" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
close();
}}

</script>

Detta är vad jag vill ha:

Om jag öppnar en större bild än upplösningen på skärmen så ska scriptet detecta det och sätta så rutan med bilden krymper ihop till 90% av upplösningen och köra fram scrollbars.

Samt fortfarande ha så att rutan autoresizar sig ifall den är mindre än upplösningen.

Detta har jag för att öppna fönstren:
<a href="javascript:popImage('art/scenery/sunrise.jpg','Image Preview')">

Det skulle vara grymt skönt ifall nån av er orkar hjälpa mig med detta problem eftersom jag har suttit och sökt lösningar, (jag är en designer, ingen kodare, men jag har iaf försökt innan jag kommer hit och whinar).

Tack för mig, Stardock - Eyesharp-Design

bossseMedlem sedan juni 2003771 inlägg

13 juli 2004 19:48#2

Eftersom du inte fått något svar hittills så
kan detta va nåt kanske, vem vet?

<html>
<head>
<title>Bildgalleri</title>
<style type="text/css">
html, body 
{background-color:lightblue; }
table  
{background-color:blue width:80%; height:100%;border:2px solid black;
font-family:arial, verdana; font-size:14pt;}
td
{position:absolute; left:0%; top:0%; background-color:blue;
border:2px solid black; color:yellow;}
div 
{width:11%;height:95%;position:absolute;left:87%;top:1%;overflow:auto;direction:rtl;
scrollbar-base-color: darkblue;scrollbar-track-color:white;scrollbar-arrow-color:blue;}
<!-- 
Vill man ha plats med många småbilder i diven här ovan 
så är det bara att öka procenttalet för height 
-->

#bild1 {display:none;}
#bild2 {display:none;}
#bild3 {display:none;}
#bild4 {display:none;}
#bild5 {display:none;}
#bild6 {display:none;}
#bild7 {display:none;}
#bild8 {display:none;}
#bild9 {display:none;}
#bild10{display:none;}
#bild11{display:none;}
#bild12{display:none;}
</style>

<script type="text/javascript" language=javascript>
<!--
function bild(currPic){thisText=document.getElementById(currPic).style
if (thisText.display == "block"){thisText.display="none"}
else { thisText.display = "block" } }
-->
</script>
</head>
<body>
<table>
<td>
Jag gjorde för något år sedan detta lilla exempel på ett bildgalleri.
<BR><BR>
Scriptet känner av bildens storlek.
<BR>
För bilder som är för stora anges en maxstorlek, här angivna till 580 x 430.
<BR>
Jag har i detta exempel angivit detta för bilderna 1-4.
<BR><BR>
För bilder som är 580 x 430 eller mindre behövs ingen storleksangivelse.
<BR>
De visas automatiskt i sin rätta storlek. 
<BR>
Detta gäller vid skärmupplösning 800 x 600.
<BR><BR>
<font color=red> OBS! </font> Om man anger annan bildstorlek än ursprungsbilden
<BR>
så måste det anges proportionellt, annars förvrängs ju bilden.
<BR><BR>
Bara att välja om man vill ha OnClick eller OnMouseOver på bilderna
<BR>
För bild 1 t.o.m 6 gäller: Klicka för att visa bilderna, klicka åter för att dölja bilden.
<BR>
För bild 7 t.o.m 12 gäller: OnMouseOver på bilderna.
<BR>
Smidagast enl. mig är att använda Onmouseover!
<BR><BR>
Detta går att bygga ut och anpassa nästan som man vill.
<BR>
I koden heter bilderna 001.jpg t.om. 012.jpg
<BR>
Byt bara dessa bildnamn mot dinbild1.jpg dinbild2.jpg o.s.v.
<BR><BR>
Att denna tabell blir högre än sidan beror på denna informationstext.
<BR>
Den anpassas åter till 100% om du tar bort min textbeskrivning.
<BR> 
d.v.s allt som ligger mellan < td > och < / td > direkt efter < TABLE >
<BR>
För att endast få scrollning på småbilderna och ej på hela sidan
<BR>
så får man också lägga in scroll=no i body-taggen 
</td>
<!-- Nedan anger du maxstorleken, obs! Om bilden beskärs så måste det göras proportionellt, annars förvrängs bilden --> 
<td id="bild1"><IMG SRC=001.jpg width=580 height=430></td>
<td  id="bild2"><IMG SRC=002.jpg width=580 height=430></td>
<td  id="bild3"><IMG SRC=003.jpg width=580 height=430></td>
<td  id="bild4"><IMG SRC=004.jpg width=580 height=430></td>
<td  id="bild5"><IMG SRC=005.jpg></td>
<td  id="bild6"><IMG SRC=006.jpg></td>
<td  id="bild7"><IMG SRC=007.jpg></td>
<td  id="bild8"><IMG SRC=008.jpg></td>
<td  id="bild9"><IMG SRC=009.jpg></td>
<td  id="bild10"><IMG SRC=010.jpg></td>
<td  id="bild11"><IMG SRC=011.jpg></td>
<td  id="bild12"><IMG SRC=012.jpg></td>
</table>
<div>
<A HREF OnClick="bild('bild1');" OnClick="bild('bild1');"><img src=001.jpg width=60 height=55 title="din bildbeskrivning"></A>
<A HREF OnClick="bild('bild2');" OnClick="bild('bild2');"><img src=002.jpg width=60 height=55 title="din bildbeskrivning"></A>
<A HREF OnClick="bild('bild3');" OnClick="bild('bild3');"><img src=003.jpg width=60 height=55  title="din bildbeskrivning"></A> 
<A HREF OnClick="bild('bild4');" OnClick="bild('bild4');"><img src=004.jpg width=60 height=55  title="din bildbeskrivning"></A>
<A HREF OnClick="bild('bild5');" OnClick="bild('bild5');"><img src=005.jpg width=60 height=55 title="din bildbeskrivning"></A>
<A HREF OnClick="bild('bild6');" OnClick="bild('bild6');"><img src=006.jpg width=60 height=55  title="din bildbeskrivning"></A>
<A HREF OnMouseOver="bild('bild7');" OnMouseOut="bild('bild7');"><img src=007.jpg width=60 height=55 title="din bildbeskrivning"></A>
<A HREF OnMouseOver="bild('bild8');" OnMouseOut="bild('bild8');"><img src=008.jpg width=60 height=55 title="din bildbeskrivning"></A>
<A HREF OnMouseOver="bild('bild9');" OnMouseOut="bild('bild9');"><img src=009.jpg width=60 height=55  title="din bildbeskrivning"></A> 
<A HREF OnMouseOver="bild('bild10');" OnMouseOut="bild('bild10');"><img src=010.jpg width=60 height=55  title="din bildbeskrivning"></A>
<A HREF OnMouseOver="bild('bild11');" OnMouseOut="bild('bild11');"><img src=011.jpg width=60 height=55 title="din bildbeskrivning"></A>
<A HREF OnMouseOver="bild('bild12');" OnMouseOut="bild('bild12');"><img src=012.jpg width=60 height=55  title="din bildbeskrivning"></A>
<BR>
<A HREF=bildsida2.htm>Se flera bilder </A>
<!-- 
Om man ej vill ha alla småbilderna på en sida länkar man bara till en sida med exakt samma kod som denna,
som då kan heta bildsida2.htm. Man måste förstås ändra bildnamnen till bild13, bild14 o.s.v.
-->
</div>
</body>
</html>

StardockMedlem sedan juli 20043 inlägg

14 juli 2004 01:17#3

Nja. Blir lite väl jobbigt då det är över 60 bilder i vissa kategorier som dessutom växer varje vecka. :/ Men det där går väl att trycka in i mitt script på något sätt?