Javascript hjälp

Gumpa

Take me to bed or lose me forever
Gick med
7 Mar 2003
Ort
Östergötland
Hoj
R1-03 & Suzuki Ts250x
Jag har ett script för "random" bilder, men jag vill ha så att när man klickar på bilden så ska bilden visas i en "popup"
I HEAD har jag:

<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. *---
function visa_bild()
{

//***---Här skriver du vilka bilder som ska kunna komma. Ha hur många bilder du vill.
bild=new Array("0.gif","1.gif","2.gif","3.gif","4.gif","5.gif")

visa_bilden=bild[Math.floor(Math.random()*bild.length)]
visa_bilden="<IMG SRC=\""+visa_bilden+"\">"
return visa_bilden
}
//-->
</SCRIPT>

I BODY har jag:
<SCRIPT LANGUAGE="javascript">
<!--
document.write(visa_bild())
//-->
</SCRIPT>

Går det att kombinera det scriptet med detta? det är det som jag behöver hjälp med!
<script type="text/javascript">
//<![CDATA[
/* Detta script finns att hämta på http://www.jojoxx.net och
får användas fritt så länge som dessa rader står kvar. */

function imgPopup2(url){
MyWin = window.open("","","scrollbars=no,resizable=yes,toolbar=no,location=no,directories=no,status=no,menubar=no,width=100,height=100");
with(MyWin.document){
open();
write("<ht"+"ml>\n<he"+"ad><scr"+"ipt>awidth=(document.layers)?0:8;awidth+=(document.all)?4:0;aheight=(document.layers)?0:29;</scr"+"ipt>\n<ti"+"tle>Bildvisare</ti"+"tle>\n</he"+"ad>\n<bo"+"dy onLoad=\"window.resizeTo(document.images[0].width+awidth,document.images[0].height+aheight)\"marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 rightmargin=0 style=\"overflow:hidden;\">\n");
write("<img src=\""+url+"\">\n");
write("</bo"+"dy>\n</ht"+"ml>\n");
close();
}
}
//]]>
</script>
<a href="../../images/calvin/CHANI30.GIF" onclick="imgPopup2(this.href); return false;">Visa bild</a>
 
Visst, allt går.

Är du ute efter att alltså visa en slumpbild i popuprutan ?, men att man fortfarande klickar på <Visa Bild> för att visa bilderna i popuprutan ?

En av lösningarna är i så fall att byta ut referensen this.href till den url som
du slumpat fram med med slumptalsfunktionen.

Edit: Eller så kan du också skriva om funktionen imgPopup2() så att den inte
tar några argument alls utan att en url slumpas fram inne i funktionen imgPopup2(). Mest en smaksak med både för och nackdelar. Inga konstigheter.
 
Last edited:
Här är ett snabbexempel på hur en lösning kan se ut.
Jag tog friheten och förenklade din kod lite. Plockade bort lite referenser och
annat icke-nödvändigt.

Fungerar så att klickar man på länken så öppnas en slumpmässig bild i en popup.

PHP:
<html>
<head>
<SCRIPT LANGUAGE="javascript">

var bild = new Array("a1.gif","a2.gif")
	
function imgPopup2()
{
	MyWin = window.open("","","scrollbars=no,resizable=yes,too lbar=no,location=no,directories=no,status=no,menub ar=no,width=100,height=100");
	with(MyWin.document)
	{
		open();
		write("<ht"+"ml>\n<he"+"ad><scr"+"ipt>awidth=(docu ment.layers)?0:8;awidth+=(document.all)?4:0;aheigh t=(document.layers)?0:29;</scr"+"ipt>\n<ti"+"tle>Bildvisare</ti"+"tle>\n</he"+"ad>\n<bo"+"dy onLoad=\"window.resizeTo(document.images[0].width+awidth,document.images[0].height+aheight)\"marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 rightmargin=0 style=\"overflow:hidden;\">\n");
		write("<img src=\""+ bild[Math.floor(Math.random()*bild.length)] +"\">\n");
		write("</bo"+"dy>\n</ht"+"ml>\n");
		close();
	}
}
</SCRIPT>
</head>
<body>
<p style="font-weight:bold;color:blue;text-decoration:underline;" OnClick="imgPopup2(135,155)">Visa bild</p>
</body>
</html>
 
Last edited:
Ehm... Om du vill visa en slumpmässig bild, sedan kunna klicka på den i en popup... gör följande:

Code:
<script type="text/javascript">
  // Följande kod läggs i <head>-blocket

  // Definera alla bilder som du ska slumpa emellan i en array
  var bilder = ['bild1.gif', 'bild2.gif', ...];


  // Definera en funktion som returnerar bildnamnet slumpmässigt.
  function getRandomPicture() {
    var index = Math.round(Math.random() * bilder.length);
    return bilder[index];
  }
</script>

Nu behöver du också skriva ut bilden, detta kan antingen göras med document.write eller genom att anvädna dig av onload-eventet. Nedan följer ett exempel med document.write:

Code:
<script type="text/javascript">

document.write('<img src="' + getRandomPicture() + '" onclick="open(this.src, \'\', \'width=' + this.width + ',height=' + this.height + '\')" style="cursor: pointer">');

</script>

onclick kan användas på bilder, i själva eventet referar this till nuvarande element (i det här fallet <img> taggen) varpå du har access till vissa variabler som kan användas i open()-metoden, tex src (bildnamnet) och height/width (storleken på bilden)

Detta är otestad kod men det är en riktlinje iaf. Man behöver inte göra det svårare än vad det är.
 
Nu börjar det likna nått:)
Tack för hjälpen!!!
http://www.atf-clan.co.uk/ <-- klicka på "Random Babe" bilden.

Men popup rutan blir vad man skriver i width & height (har ställt den på 500*700 tillfälligt)
Den anpassar sig inte efter bilden storlek, vet i fan hur jag ska göra?:va

Det skulle oxå va kul om man kunde köra (random) på första bilden som startar popupen

Här är Burner´s kod som jag använder:
<html>
<head>
<SCRIPT LANGUAGE="javascript">

var bild = new Array("http://www.atf-clan.co.uk/Pictures/01.jpg","http://www.atf-clan.co.uk/Pictures/02.jpg","http://www.atf-clan.co.uk/Pictures/03.jpg","http://www.atf-clan.co.uk/Pictures/04.jpg","http://www.atf-clan.co.uk/Pictures/05.jpg","http://www.atf-clan.co.uk/Pictures/06.jpg","http://www.atf-clan.co.uk/Pictures/07.jpg","http://www.atf-clan.co.uk/Pictures/08.jpg","http://www.atf-clan.co.uk/Pictures/09.jpg","http://www.atf-clan.co.uk/Pictures/10.jpg","http://www.atf-clan.co.uk/Pictures/11.jpg","http://www.atf-clan.co.uk/Pictures/12.jpg","http://www.atf-clan.co.uk/Pictures/13.jpg","http://www.atf-clan.co.uk/Pictures/14.jpg","http://www.atf-clan.co.uk/Pictures/15.jpg","http://www.atf-clan.co.uk/Pictures/16.jpg","http://www.atf-clan.co.uk/Pictures/17.jpg","http://www.atf-clan.co.uk/Pictures/18.jpg","http://www.atf-clan.co.uk/Pictures/19.jpg","http://www.atf-clan.co.uk/Pictures/20.jpg","http://www.atf-clan.co.uk/Pictures/21.jpg","http://www.atf-clan.co.uk/Pictures/22.jpg","http://www.atf-clan.co.uk/Pictures/23.jpg","http://www.atf-clan.co.uk/Pictures/24.jpg")

function imgPopup2()
{
MyWin = window.open("","","scrollbars=no,resizable=yes,too lbar=no,location=no,directories=no,status=no,menub ar=no,width=500,height=700");
with(MyWin.document)
{
open();
write("<ht"+"ml>\n<he"+"ad><scr"+"ipt>awidth=(docu ment.layers)?0:8;awidth+=(document.all)?4:0;aheigh t=(document.layers)?0:29;</scr"+"ipt>\n<ti"+"tle>Random Babe</ti"+"tle>\n</he"+"ad>\n<bo"+"dy onLoad=\"window.resizeTo(document.images[0].width+awidth,document.images[0].height+aheight)\"marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 rightmargin=0 style=\"overflow:hidden;\">\n");
write("<img src=\""+ bild[Math.floor(Math.random()*bild.length)] +"\">\n");
write("</bo"+"dy>\n</ht"+"ml>\n");
close();
}
}
</SCRIPT>
</head>
<body>
<p style="font-weight:bold;color:blue;text-decoration:underline;" OnClick="imgPopup2(135,155)" align="center"><img src="http://www.atf-clan.co.uk/Pictures/25.jpg"></p>
</body>
</html>
 
Last edited:
Hur menar du ?

Vill du alltså att den lilla bilden skall bytas ut när man klickar på den ?

Nedan snabbhack laddar en slumpmässig thumb(lilla bilden) när huvudsidan laddas in.

Sedan om man vill se flera brudar så är det lite ondödigt att ladda om hela sidan bara för att visa en ny thumb så jag löste
det så att även thumb-bilden byts ut när man klickar på den.
Ganska så smidigt att thumb-bilden även byts ut då man klickar på den.

För att anpassa fönstret efter bildens storlek så kan du använda dig av
document.getElementById("hotBabe") för att hämta storleken på bilden.
Nedan exempel anpassar fönsterstorlekten efter ovan funktion.

Jag provade precis med Firefox, IE och Opera och det fungerar i alla tre.

Här har du exempel på hur det ser ut
http://www.thegate.nu/tmp/randompopup/

Code:
<html>
<head>
<SCRIPT LANGUAGE="javascript">

var bild = new Array("a1.gif","a2.gif")

function imgPopup2(pic)
{
    MyWin = window.open("","","scrollbars=no,resizable=yes,too lbar=no,location=no,directories=no,status=no,menub ar=no,width="+document.getElementById("hotBabe").width+",height="+document.getElementById("hotBabe").height+""); 
    with(MyWin.document)
    {
        open();
        write("<ht"+"ml>\n<he"+"ad><scr"+"ipt>awidth=(docu ment.layers)?0:8;awidth+=(document.all)?4:0;aheigh t=(document.layers)?0:29;</scr"+"ipt>\n<ti"+"tle>Bildvisare</ti"+"tle>\n</he"+"ad>\n<bo"+"dy onLoad=\"window.resizeTo(document.images[0].width+awidth,document.images[0].height+aheight)\"marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 rightmargin=0 style=\"overflow:hidden;\">\n");
        write("<img src=\""+ pic +"\">\n");
        write("</bo"+"dy>\n</ht"+"ml>\n");
        close();
    }
}
function setPic()
{	
	newsrc = bild[Math.floor(Math.random()*bild.length)];	
	document.getElementById("hotBabe").src = newsrc;	
}
</SCRIPT>
</head>
<body OnLoad="setPic()">
<img id="hotBabe" OnClick="imgPopup2(this.src);setPic()">
</body>
</html>
 
Last edited:
Hur menar du ?

Vill du alltså att den lilla bilden skall bytas ut när man klickar på den ?

Nedan snabbhack laddar en slumpmässig thumb(lilla bilden) när huvudsidan laddas in.

Sedan om man vill se flera brudar så är det lite ondödigt att ladda om hela sidan bara för att visa en ny thumb så jag löste
det så att även thumb-bilden byts ut när man klickar på den.
Ganska så smidigt att thumb-bilden även byts ut då man klickar på den.

Tack än en gång burner!, du är grym på javascript:tummenupp

Har bara en fråga,
* Jag vill utgå från en random thumbnail (100*100) för att sedan få samma funktion som finns i ditt script (full storlek på bilderna i popupen)
Har inte plats på sidan att köra full size hela tiden tyvärr:(
Är det möjligt?

Typ så här:
random thumbnailbild --->man klickar på den-->den hamnar i en popup i verklig storlek-->när man stänger den så finns den en ny thumbnail att klicka på
(jag har uploadat samma bilder i liten storlek och i full storlek)
 
Har bara en fråga,
* Jag vill utgå från en random thumbnail (100*100) för att sedan få samma funktion som finns i ditt script (full storlek på bilderna i popupen)
Har inte plats på sidan att köra full size hela tiden tyvärr:(
Är det möjligt?

Typ så här:
random thumbnailbild --->man klickar på den-->den hamnar i en popup i verklig storlek-->när man stänger den så finns den en ny thumbnail att klicka på
(jag har uploadat samma bilder i liten storlek och i full storlek)

Gör så att du sätter en width och height på thumbnailbilden genom
Code:
 width="100" height="100"

Storleken på popupfönstret ställer du in genom att hämta aktuell data på den stora bilden genom tex.
Code:
bigPic = new Image();
bigPic.src = pic.replace("thumbs","big");

Jag uppdaterade mitt exempel lite lätt, kolla källkoden på det exemplet.
Jag har inte buggtestat koden än men den bör fungera.
Finns att se på http://www.thegate.nu/tmp/randompopup/ precis som tidigare. Lite (mycket) intressanta bilder också :tuttar
 
Last edited:
Precis som jag vill ha det!!!:) Fina :tuttar du hade där!!!:kär
Dock så får jag inte det att funka, verkar inte som att scriptet hittar mina bilder, fast jag har skrivit rätt sökväg till vart bilderna ligger.
Har provat både med IE och FF, vad kan jag ha gjort för fel?:va

<html>
<head>
<script language="javascript">

var bild = new Array("http://www.atf-clan.co.uk/Pictures/01.jpg","http://www.atf-clan.co.uk/Pictures/02.jpg")

function imgPopup2(pic)
{
bigPic = new Image();
bigPic.src = pic.replace("thumbs","big");

MyWin = window.open("","","width=" + bigPic.width + ",height=" + bigPic.height + ",left=200,top=100,toolbar=no,location=no,directories=no,status=no,menubar=no");

with(MyWin.document)
{
open();
write("<ht"+"ml>\n<he"+"ad>\<tit"+"le>Bildvisare</tit"+"le>\n</he"+"ad>\n<bo"+"dy marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 rightmargin=0>\n");
write("<img src=\"" + bigPic.src + "\" width=\"" + bigPic.width + "\" height=\"" + bigPic.height + "\">\n");
write("</bo"+"dy>\n</ht"+"ml>\n");
close();
}

}
function setPic()
{
newsrc = "thumbs/"+bild[Math.floor(Math.random()*bild.length)];
document.getElementById("hotBabe").src = newsrc;
}
</script>
</head>
<body OnLoad="setPic()">
<img id="hotBabe" width="100" height="120" OnClick="imgPopup2(this.src);setPic()">
</body>
</html>
 
Ok, det kanske inte rikigt framstod helt klart.

Det du måste göra är att skapa 2 st undermappar som heter thumbs och big.
Detta för att skapa lite struktur i filsystemet. Tex. bild1.jpg som finns
i mappen thumbs ska ha en motsvarande bild(även namnet) fast i större format i mappen big.
 
Last edited:
Ahhh,det borde jag ju ha kunnat räknat ut :rodnar
Tack så mycket för hjälpen burner:tummenupp
 
Nyheter
Yamaha R7-vinnarens rapport: ”Ett riktigt monster på kurviga landsvägar!”

På MC-mässan i vintras anor...

Nisse Hedlund bortgången

Den legendariske motorkonst...

En dag på dragstrippen

Efter att ha varit aktiv so...

Steve McQueens Scott Squirrel till salu

Detta Scott Flying Squirrel...

Dags för Strängnäs Bike Show!

Sista lördagen i augusti är...

Bikeweekend på Kjula denna helg

Den 22-23 augusti är det da...

Motorcycle Inferno #8

Den 5 september blir Laxhol...

Tiotusentals körde Mälaren Runt

Lördagen den 15 augusti gen...

Mälaren Runt fyller 40 år

Nu på lördagen den 15 augus...

Steve Holcombe klar för GGN!

Pressmeddelande 2026-08-10 ...

Back
Top