Liten bild till en större bild vid klickning?

WickeD · Inlägg av **WickeD** » 2005-10-20 20:47

Hur skriver jag en kod så att när jag klickar på en liten bild så ska en större bild öppnas i ett eget fönster? Och fönstret ska jag kunna bestämma storleken på.

Det ska vara i en sida som är skriven i HTML.

Någon ska vet hur man skriver dom raderna?

1DeadlySAMURAI · Inlägg av **1DeadlySAMURAI** » 2005-10-21 01:37

<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

</SCRIPT>
<A HREF="javascript:newWindow1()"><IMG SRC="thumbnail bild" BORDER="0"></A>

newWindow1() måste ändra nummer för varje bild

Inlägg av **PazZze** » 2005-10-21 11:31

har ett vettigare script hemma som du bara behöver en bild för...
lägger upp det när jag kommer hem

Inlägg av **Holger** » 2005-10-21 11:51

Du hittar en massa sådana skripter här:
http://www.hotscripts.com
http://javascript.internet.com

WickeD · Inlägg av **WickeD** » 2005-10-21 12:10

Tackar för alla förslag, jag ska prova några i helgen.
Jag ska använda det till min webshop då jag ska lägga in lite större bilder som är i skala 1.1

Man kan aldrig få nog många förslag på scripter/koder om detta, det är bra för då har man lite att välja på.

Det låter intressant PazZze!

Tack grabbar!

Inlägg av **PazZze** » 2005-10-21 19:23

det är en hel vetenskap den där koden...

jag har inte gjort den, håller på med en egen, men har gjort några ändringar i denna (lagt till ast storlek)

Kod: Markera allt

<html>
<head>

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--This is one of many scripts which are available at:     *---
//--http://www.JavaScript.nu/javascript                     *---
//--This script is FREE, but you MUST let these lines       *---
//--remain if you use this script.                          *---

//***---Detta visas då musen dras över bilden
PreviewText="Tryck för förstoring";
//***---Visas då musen förs över den förstorade bilden i det nya fönstret
ClickToCloseText="Tryck för att stänga fönstret";

//Om du vill använda en fast storlek för alla bilder ta bort kommentarena nedanför
//width=""; //bredd på popup
//width=""; //höjd på popup
//function visaBild(imageURL, showThisSize, text)

//samt kommentera denna rad för fast bredd...
function visaBild(imageURL, showThisSize, width, height, text)
{
newHeight=Math.round(height*showThisSize/width);
document.write("<A HREF=\"javascript:showRealSize('"+imageURL+"', "+width+", "+height+");\"><IMG SRC='"+imageURL+"' WIDTH='"+showThisSize+"' HEIGHT='"+newHeight+"' BORDER='0' ALT='"+PreviewText+"'>"+text+"</A>")
}


function showRealSize(imageURL, width, height, text)
{
NewImageWindow=window.open("", Math.round(Math.random()*10000000000), "width="+width+",height="+height);
NewImageWindow.document.open();
NewImageWindow.document.write('<html><head>');
NewImageWindow.document.write('<title>'+text+'</title>');
NewImageWindow.document.write('<style type="text/css"><!--body {  overflow: hidden;}--></style>');
NewImageWindow.document.write('</head>');
NewImageWindow.document.write('<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">');
NewImageWindow.document.write("<A HREF='javascript:top.close();'><IMG SRC='"+imageURL+"' WIDTH='"+width+"' HEIGHT='"+height+"' ALT='"+ClickToCloseText+"' BORDER='0'>");
NewImageWindow.document.write("</body></html>");
}
//-->
</SCRIPT>

</head>
<body>

<table border="0" cellpadding="3" cellspacing="3">
 <tr>
  <td align="center">
   <script language="javascript" type="text/javascript">
    <!--
//För variabel bildbredd
     visaBild("bild", 128, 500, 332, "texttest");
    //-->
   </script>
  </td>
 </tr>
 <tr>
  <td>
   <script language="javascript" type="text/javascript">
    <!--
//För fast bildbredd
     visaBild("bild", 128, "text");
    //--> 
   </script>
  </td>
 </tr>
</table>

</body>
</html>

WickeD · Inlägg av **WickeD** » 2005-10-21 19:35

Ska prova den i helgen! Tack!

WickeD · Inlägg av **WickeD** » 2005-10-21 19:51

Vart skriver jag in bildens URL?

Kanske en dum fråga men jag hittar inte det.

Inlägg av **PazZze** » 2005-10-21 20:22

hm, skrev inte så pedagogiskt:
visaBild("bildURL", 128, 500, 332, "texttest");
visaBild("bildURL", 128, "texttest");

WickeD · Inlägg av **WickeD** » 2005-10-21 20:24

Så jag ska byta ut detta mot bildens URL då? bildURL

Vad är detta? texttest

WickeD · Inlägg av **WickeD** » 2005-10-21 20:26

Vad är det för skillnad på:
//För fast bildbredd
Och
//För variabel bildbredd

Jag provade att skriva så här och det fungerar inte för mig då:

Kod: Markera allt

//För fast bildbredd 
     visaBild("Marke.jpg", 128, "text");

Och jag har denna html file i samma mapp som bilden.

((Vist ska jag bara klistra in hela koden i en tom html file och spara ned det?))

Inlägg av **PazZze** » 2005-10-21 21:26

usch..

där blev det inte många rätt för mig...
kolla på http://javascript.nu/javascript/javabifo.shtml så försöker jag fixa de ändringar jag gjort då jg ärlite piggare och vet vad jag gör

WickeD · Inlägg av **WickeD** » 2005-10-22 15:36

Jag har fått till det som jag vill ha det nu

Jag var också tvungen att sova en stund innan det klarnade där uppe

Vill ni se hur det blev så kolla här: http://www.bikersite.se/Webshop/index.htm

Tack så mycket för alla bra script ni fixat och extra tack till PazZze!

Inlägg av **Holger** » 2005-10-24 09:31

Det där skriptet ser intressant ut! Hur gjorde du för att få det att funka?

WickeD · Inlägg av **WickeD** » 2005-10-24 09:34

Jag skrev in det fel första gången.

Jag har skrivit det så här nu:

i HEAD:

Kod: Markera allt

<SCRIPT LANGUAGE="javascript">
<!--This is one of many scripts which are available at:     *---
//--http://www.JavaScript.nu/javascript                     *---
//--This script is FREE, but you MUST let these lines       *---
//--remain if you use this script.                          *---

//***---Detta visas då musen dras över bilden
PreviewText="Klicka på bilden för att se den i större storlek!";

//***---Ruvriken av det nya fönster som innehåller den förstorade bilden
NewWindowTitle="Naturlig storlek!";

//***---Visas då musen förs över den förstorade bilden i det nya fönstret
ClickToCloseText="Klicka på bilden för att stänga fönstret!";

function visaBild(imageURL, showThisSize, width, height)
{
newHeight=Math.round(height*showThisSize/width);
document.write("<A HREF=\"javascript:showRealSize('"+imageURL+"', "+width+", "+height+");\"><IMG SRC='"+imageURL+"' WIDTH='"+showThisSize+"' HEIGHT='"+newHeight+"' BORDER='0' ALT='"+PreviewText+"'></A>")
}


function showRealSize(imageURL, width, height)
{
NewImageWindow=window.open("", Math.round(Math.random()*10000000000), "width="+width+",height="+height);
NewImageWindow.document.open();
NewImageWindow.document.write("<HTML><HEAD>");
NewImageWindow.document.write("<TITLE>"+NewWindowTitle+"</TITLE>");
NewImageWindow.document.write("</HEAD>");
NewImageWindow.document.write("<BODY MARGINHEIGHT='0' TOPMARGIN='0' LEFTMARGIN='0' RIGHTMARGIN='0' MARGINWIDTH='0'>");
NewImageWindow.document.write("<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0><TR><TD><A HREF='javascript:top.close();'><IMG SRC='"+imageURL+"' WIDTH='"+width+"' HEIGHT='"+height+"' ALT='"+ClickToCloseText+"' BORDER='0' HSPACE=0 VSPACE=0></A></TD></TR></TABLE>");
NewImageWindow.document.write("</BODY></HTML>");
}
//-->
</SCRIPT>

Och i BODY:

Kod: Markera allt

<SCRIPT LANGUAGE="javascript">
<!--
//***---Nedan beskrivs vad värdena som du ska skriva är för något
//***---1.) ("Marke.jpg")	Adressen till bilden
//***---2.) (150)		Bilden ska förminskas och visas med så här många pixlar på bredden
//***---3.) (350)		Så här stor ska bildens bredd vara då fönstret visas. Detta värde bör vara lika med bildens riktiga bredd-värde
//***---4.) (350)		Så här stor ska bildens höjd vara då fönstret visas. Detta värde bör vara lika med bildens riktiga höjd-värde

visaBild("Marke.jpg", 150, 350, 350);

//-->
</SCRIPT>

Då fungerar det fint!

Liten bild till en större bild vid klickning?

Liten bild till en större bild vid klickning?

Vilka är online