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
Nicky Hayden-specialversion – såld för 2,5 miljoner

En exklusiv motorcykel med ...

BMW Motorrad Vision CE

På IAA Mobility 2025-mässan...

Höstrusch för våra fotografer

Inte bara sommarmånaderna, ...

Jonathan Rea avslutar sin racingkarriär

Efter nästan två decennier ...

Yamaha debuterar med V4 i MotoGP

Yamaha har meddelat att för...

Hojmys i Ugglans Park

Ända sedan början av 90-tal...

MC-mässan 2026

MC-Mässan är tillbaka 23–25...

Bike kör Stark Varg EX!

Under hösten kommer Bike gö...

Customhoj Bike Show 2026

Den 23 till 25 januari körs...

Racing på Kjula Dragway till helgen

Den kommande helgen (23-24 ...

Back
Top