|
|
 | Åbne billed i nyt vindue.
Fra :  Dinah | Vist : 544 gange
220 point
Dato : 27-10-04 08:52 |
|
Jeg er ved at lave en fotoside, og vil gerne bruge thumbnails, og så når man klikke på dem, skal billedet åbne i nyt vindue i rigtig størrelse.
Hvordan gør jeg nemmest det?
Intil videre ser min kode sådan ud
<a href="#" onClick="window.open('Amorphis/vega04/20-197.jpg', 'window_name', 'toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0,width=270, height=380, left=0, top=0'); return false"><IMG height=150 alt="" src="Amorphis/vega04/t20-197.jpg" width=106 border=0>
Synes ikke billedet placerer sig helt rigtigt (Der kommer hvide kanter i top og til venstre, og så mangler der lidt af billedet til højre og i bunden), og derfor vil jeg gerne høre om der er en nemmere måde. Kan man evt. lave baggrunden i det nye vindue en anden farve end hvis, og i så fald - Hvordan?
| |
|
Denne her kode kan løse problemet:
<a href="#" onClick="window.open('Amorphis/vega04/20-197.jpg', 'Billede Stor', 'height=270,width=380,top=150,left=100,screenY=150,screenX=100,location=yes,status=yes');"><IMG height=150 alt="" src="Amorphis/vega04/t20-197.jpg" width=106 border=0></a>
| |
| Kommentar
Fra : Dinah |
Dato : 27-10-04 09:16 |
|
Hmm... Det laver bøvl her hos mig.
Hva er det der er forkert i min kode?
| |
|
Har du testet min kode?
Men har jeg testet og den virker på min server.
| |
 | Kommentar
Fra : molokyle  |
Dato : 27-10-04 09:55 |
|
Prøv at kikke på 'Mine billeder' på denne side : http://www.birgitteschultz.frac.dk
Koden er som følger :
Kode
<!--
function image_open(pic,text)
{
var txt=text;
var x_pic = new Image();
x_pic.src=pic;
var leftpos=(screen.width-x_pic.width)/2;
var toppos=(screen.height-x_pic.height)/2;
var HTML = "<html><head></script><style>body{margin:0px 0px 0px 0px;background-color:black}img{border-style:none;}</style></head><body onblur='top.close()' onclick='top.close()'><img src='"+pic+"' alt='"+txt+"' name='load_image' onLoad='window.resizeTo(document.load_image.width+10,document.load_image.height+30)'></body></html>";
popupImage=window.open("","_blank","left="+leftpos+",top="+toppos+",toolbar=no,scrollbars=no");
popupImage.document.open();
popupImage.document.write(HTML);
popupImage.document.close();
}
//--> |
Gem ovenstående som pop.js.
Nu insætter du scriptet i pop.js i dit html dokument :
Kode
<html>
<head>
<title>Pop-up image script</title>
<script type="text/javascript" src="pop.js"></script>
</head>
<body>
<span onclick="image_open('MIT_BILLEDE.GIF','Dette er billedets mouseover tekst. Denne kan udelades.')">Pop up</span>
</body>
</html> |
Med dette script behøver du ikke angive billedets dimensioner i kaldet til popup rutinen. Jeg har her brugt eventen onclick="..." i et <span> element. image_open(...) kan selvfølgelig kaldes fra alle andre typer HTML elementer og events.
F.eks. :
<img ="ET_THUMBNAIL_BILLEDE.GIF" onclick="image_open('MIT_BILLEDE.GIF','Dette er billedets mouseover tekst. Denne kan udelades.')" alt="Klik på billedet for at se et andet pop-up billede" style="border:none;">
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 27-10-04 10:00 |
|
[hør] Kandu.dk har lavet lidt kluddermor i *.js koden og indsat nogele forstyrrende mellemrum 
Ret document.load_image.h eight+30 til document.load_image.height+30
samt : toolba r=no til toolbar=no
 </MOLOKYLE>
| |
 | Kommentar
Fra : bentjuul  |
Dato : 27-10-04 11:31 |
|
Prøv at kigge på dette links http://tobias.capricornus.dk hvis du vælger et af menupunkter så kan du se hvordan jeg har sat mine Thumbnails op i en tabel, så er det rimeligt let at styre i en pæn orden.
Klik på et af billederne og du kan se at de popper op i et nyt vindue med baggrundsfarve og det hele, men det kræver at hvert billede er sat op på en html side - rutinen med popupvinduet er en Molokyle har opfundet.
//bentjuul
| |
| Kommentar
Fra : molokyle |
Dato : 27-10-04 13:06 |
| | |
 | Kommentar
Fra : severino |
Dato : 27-10-04 18:35 |
|
Prøv at se denne side, og evt. downloade dette lille program, som laver det meste af arbejdet for dig: http://www.ornj.net/software/webalbum/
Programmet tilpasser selv dine billeder til en størrelse som vises med stort og i små tumbernails.
Det generere så index sider og sider for visning af store billeder.
| |
| Kommentar
Fra : molokyle |
Dato : 28-10-04 09:12 |
| | |
| Kommentar
Fra : molokyle |
Dato : 28-10-04 09:17 |
| | |
| Kommentar
Fra : Dinah |
Dato : 04-11-04 19:31 |
|
Molekyle...
Jeg har lidt problemer med koden du viste i dit første indlæg. Den vil godt åbne billedet, men det bliver i et stort vindue, og så bliver pladsen vor billedet ikke ligger, sort.... Hvordan løser jeg dette?
| |
| Kommentar
Fra : bentjuul |
Dato : 04-11-04 21:14 |
|
Dinah hvis du har prøvet det links jeg lagde, så kan du både se koden hvor thumnails ligger og i popuppen ved vis kilde.
//bentjuul
| |
| Kommentar
Fra : Dinah |
Dato : 04-11-04 22:01 |
|
Bentjuul.
Men jeg ville jo netop gerne være fri for at skulle lave HTML pages til alle mine billeder - For det er mange billeder...
Jeg kan jo godt bare ligge det op som HTML pages og så tipasse størrelsen som jeg vil, men så skal jeg jo gøre det på alle billederne.
Jeg kan stadig ikke forstå hvorfor vinduet ligger en slags ramme (hvide kanter) i venstre og top, hvis jeg bare laver en pop up med billedet i.
Øv, det er mere besværligt end jeg troede det her...
| |
| Kommentar
Fra : bentjuul |
Dato : 04-11-04 22:18 |
|
Dinah - du behøver ikke at lave html-sider til dine vinduer, men så vil du ikke kunne få den baggrund som du ønsker jævnf. dit spørgsmål øverst. Iøvrigt er det ikke så slemt at lave html siderne, idet de jo bare kopieres og billednavnet rettes.
Men ok, så kan jeg nok ikke hjælpe dig. Men fat mod, måske en anden har en ide.
//bentjuul 
| |
| Kommentar
Fra : severino |
Dato : 04-11-04 22:21 |
|
Ja Dinah
Alt er nemt når man kan det!
Indtil da kan det være skide besværligt!
| |
| Accepteret svar
Fra : molokyle | 
Modtaget 220 point
Dato : 05-11-04 08:29 |
|
Dinah -> Du får det sorte vindue fordi billedet ikke ligger, hvor du angiver det eller du har stavet billedets navn forkert.
Har du dine billeder liggende i et underbibliotek til hvor din HTML kode ligger, f.eks. i mappen images, skal du angive dette i kaldet til image_open(...)
Kode
<img src="./images/MIN_THUMBNAIL.jpg" onclick="image_open('./images/MIT_STORE_BILLEDE.jpg','Stort billede');" alt="Lille billede" style="border:none;cursor:Pointer"> |
Husk også der skal bruges enkelte anførselstegn inden for de dobbelte i onclick="..." event handleren.
</MOLOKYLE>
| |
| Godkendelse af svar
Fra : Dinah |
Dato : 11-02-06 07:38 |
| | |
 | Du har følgende muligheder | |
|
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.
Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
| |
|
|