Javascriptpopupp, samt PHP-värde

8 svar · 345 visningar · startad av tody 8 mars 2005

todyMedlem sedan mars 200520 inlägg

8 mars 2005 20:14#1

Hej

Har en sida som visar massa bilder. Hade sedan tänkt att när
man klickar på någon utav bilderna så ska det komma upp ett
popuppfönster, utan addresfält, uppdateringsknappar osv och
detta måste göras med javascript.

Det funkar felfritt men, jag vill ju att den ska hämta ett värde så
att det blir den bilden man klickar på som kommer upp i
popuppfönstret och det är detta jag inte klarar att lösa.

För som jag tänker det så måste man ju lägga in någon
phpkodsnutt i javascriptet så att den hämtar bilden från ett värde.

Så här ser min javascriptskod ut som ligger mellan <head>
taggarna:
-------------------------------------------------------------------

<script language="JavaScript">
<!-- Begin
function popUp() {
props=window.open('sidandärbildenfinnspå.html', 'poppage', 'toolbars=0, 
scrollbars=0, location=0, statusbars=0, menubars=0,
 resizable=0, width=200, height=300 left = 100, top = 100');

}
// End -->
</script>

-------------------------------------------------------------------
Det som jag markerat fetstilt, är där jag tror att man måste lägga
någon sorts kod som skriver ut värdet på bilden som man klickar
på.

Koden som visar bilden som man klickar på för att popuppfönstret
ska komma upp:
-------------------------------------------------------------------

<A HREF="javascript:popUp()">
<img class="bildgalleri2" width="120" height="120"
 src="bilder/<? echo $rad['filenamn'] ?>"></A>
<br>

-------------------------------------------------------------------
Men har inte kommit på hur jag ska lösa detta, någon som har
några ideer och tankar, eller rent utav svar?

PeeerMedlem sedan mars 20025 907 inlägg

8 mars 2005 21:47#2

För det första så får du ändra lite i din javascriptfunktion

<script language="JavaScript">
<!-- Begin
function popUp(url) {
props=window.open(url, 'poppage', 'toolbars=0, 
scrollbars=0, location=0, statusbars=0, menubars=0,
 resizable=0, width=200, height=300 left = 100, top = 100');

}
// End -->
</script>

Och sen får du vid varje bild anropa javascriptfunktionen med adressen till bilden som ska visas i popupen.

<A HREF="javascript:popUp('bilder/<?php echo $rad['filenamn'] ?>')">

<img class="bildgalleri2" width="120" height="120"

 src="bilder/<?php echo $rad['filenamn'] ?>"></A>

<br>

Ordet "javascript" i koden ovan ska inte vara särskrivet!

Patrik81Medlem sedan okt. 2001538 inlägg

8 mars 2005 21:57#3

Hej :)

Kan du inte skicka filnamnet på bilden som ett argument till javascriptfunktionen och på så sätt slänga på det som en querystring till popup-sidan? (Och ändra detta från en html-fil till php, så att man kan ta emot querystingen och sedan därifrån skriva ut htmlkod med rätt bild?)

Alltså:

<script language="JavaScript">
<!-- Begin
function popUp(image) {
props=window.open('sidandärbildenfinnspå.php?img='+image, 
 'poppage', 'toolbars=0, scrollbars=0, location=0, 
statusbars=0, menubars=0, resizable=0, width=200, 
height=300 left = 100, top = 100');
}
// End -->
</script>

Sedan anropas den:


<A HREF="javascript:popUp('<?php echo $rad['filenamn'] ?>')">
<img class="bildgalleri2" width="120" height="120"  src="bilder/<?php echo $rad['filenamn'] ?>"></A>
<br>

Och till sist ett php-script (sidandärbildenfinnspå.php) som fångar upp och matar ut rätt bild

<html>
<head>
<title>En bild</title>
</head>
<body>
<?php
if ( is_file($_GET['img']) ) {
  echo("<img src=\"" . $_GET['img'] . "\" />");
} else {
  echo("Bilden finns tyvärr inte.");
}
?>
</body>
</html>

Exempelvis.
Jag är helt urkass på javascript, så scriptet kanske inte funkar, och du får modifiera sökvägar etc, så att is_file hittar rätt till mappen med bilder etc, men i princip skulle detta kunna funka.
Anledningen till att koden använder is_file är för att kolla att man inte försöker göra något elakt som att pilla in ett eget värde i querystring. Men den kan ju behöva backas upp med exempelvis en koll att filtypen är rätt (jpg, gif etc)

MVH Patrik

/r: Eller göra det mkt enklare sättet som Peeer föreslog ;)

todyMedlem sedan mars 200520 inlägg

9 mars 2005 19:07#4

Testade det som du skrev Peeer

Men när jag kör det på min dator så står det Fel på sidan.
längst ner och när man försöker klicka på någon bild så öppnas
den ej i en popupp, inget händer.

Min kod ser ut så här nu:

<script language="JavaScript">
<!-- Begin
function popUp(url) {
props=window.open(url, 'poppage', 'toolbars=0, 
scrollbars=0, location=0, statusbars=0, menubars=0,
 resizable=0, width=200, height=300 left = 100, top = 100');
</script>

Sen den andra koden:

<A HREF="javascript:popUp('bilder/<?php echo $rad['filenamn'] ?
>')">
<img class="bildgalleri2" width="120" height="120"
 src="bilder/<?php echo $rad['filenamn'] ?>"></A>
<br>

Kan hända att det är fel på min dator bara? Ska testa att ladda upp det på mitt webhotell.

Men ser ni några fel i koden eller något annat?

todyMedlem sedan mars 200520 inlägg

9 mars 2005 19:39#5

Japp testade nu på mitt webhotell det vill inte funka riktigt, kolla denna länken:

http://tody.1go.dk/bilduppladdning/bildvis.php

Det är tänkt att när man ska klicka på någon utav bilderna så ska det komma upp i ett popupp-fönster.

Vad kan vara fel?

PeeerMedlem sedan mars 20025 907 inlägg

9 mars 2005 21:42#6

Lite fel i din javascriptfunktion

<script language="JavaScript">
<!-- Begin
function popUp(url) {
props=window.open(url, 'poppage', 'toolbar=no, scrollbars=no, location=0, statusbars=no, menubar=no, resizable=no, width=200, height=300, left = 100, top = 100');
}
</script>

todyMedlem sedan mars 200520 inlägg

11 mars 2005 14:58#7

Peeer, perfekt! Nu funkar det så som jag vill.

Men nu är det bara en yttligare fråga som jag undrar. Nu blir ju
det popuppfönstret som kommer upp när man trycker på något i
storlekarna width=200, height=300.

Hur gör man för att den istället ska anpassa sig till hur stor bilden
är? Alltås fall en bild är större än width=200, height=300 så blir
popupprutan automatiskt större så hela bilden syns.

Hur löser man de?

PeeerMedlem sedan mars 20025 907 inlägg

11 mars 2005 20:44#8

Man söker lite i javascriptforumet. Hittar man inget så skapar man en ny tråd (i det forumet) och frågar :)

todyMedlem sedan mars 200520 inlägg

12 mars 2005 14:15#9

Peeer, alright får testa där :)