Pop Up <-

**Nebula88** · 16-09-2005, 16:55

Salve a tutti!

vorrei un favore, io JS non lo conosco per niente,
ho una serie di anteprime di img, una sotto l'altra..

codice:

[img]$link[/img]

Vorrei che al click si aprisse un PopUp con dimensioni scelte da me,
e inoltre vorrei che quando si clicca su un'altra img il PopUp precedente si chiudesse solo,
insomma anche cliccando su 100 img il popup dovrebbe essere uno solo..

Mi scrivereste il codice plz??

Grazie Mille,

Ciauz!

**var** · 16-09-2005, 17:02

codice:

[img]$link[/img]

ciao

**badaze** · 16-09-2005, 17:16

Puoi fare cosi

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
var myPopUp;
var curImage;
var prevImage = null;
function view(anImage) {
  if (prevImage != null) {
	 myPopUp.close();
	} // if (prevImage != null)
  curImage  = anImage;
	prevImage = curImage; 
  myPopUp = window.open("test2191b.html","____","width=200,height=200,left=100,menubar=no");
} // function view(anImage)

function closePopUp() {
 myPopUp;close();
} 
//-->
</script>

</head>
<body>
[img]rossa.jpg[/img]
[img]verde.jpg[/img]
[img]blu.jpg[/img]

</body>
</html>

File : test2191b.html

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function visualizza() {
 document.getElementById('immagine').src = window.opener.curImage.src;
}
//-->
</script>

</head>
<body onload="visualizza()">
[img][/img]
</body>
</html>

**Nebula88** · 16-09-2005, 20:01

mhh e nel pop up si dovrebb vedere l'immagine + ingrandite insieme al nome, come faccio a mandargli i dati?..ad esempio delle variabili in php?? o anche altri modi se ve ne sono..

Grazie tante per l'aiuto

**badaze** · 17-09-2005, 16:34

Cosi ?

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
var myPopUp;
var curImage;
var prevImage = null;
function view(anImage) {
  if (prevImage != null) {
	 myPopUp.close();
	} // if (prevImage != null)
  curImage  = anImage;
	prevImage = curImage;
	//
	imgSave     = document.createElement('IMG');
	imgSave.src = anImage.src;
  larghezza   = parseInt(imgSave.width) + 100 ;
  altezza     = parseInt(imgSave.height) + 100 ;
  //
  myPopUp = window.open("test2191b.html","____","width="+larghezza+",height="+altezza+",left=100,menubar=no");
} // function view(anImage)

function closePopUp() {
 myPopUp.close();
} 
//-->
</script>

</head>
<body>
[img]i1.jpg[/img]
[img]i2.jpg[/img]

</body>
</html>

File : test2191b.html

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Visualizza immagine</title>
<script language="JavaScript" type="text/javascript">
<!--
function visualizza() {
 document.getElementById('comment').innerHTML = window.opener.curImage.title;
 document.getElementById('immagine').src      = window.opener.curImage.src;
}
//-->
</script>

</head>
<body onload="visualizza()">
<center>
 [img][/img]
 

 <div id="comment" style="font-family:verdana;font-size:12pt;font-weight:bold"></div>
</center>
</body>
</html>

**badaze** · 17-09-2005, 19:35

il php non c'entra niente con il js.

codice:

<body>
<?php
... qui fai il ciclo con il php
?>
[img]<? print $link_immagine; ?>[/img]" onclick="view(this)">

<?php
... qui fai la fine del ciclo con il php
?>

</body>

**Nebula88** · 17-09-2005, 20:52

si ma io devo mandare le due variabili al pop up

perciò questo dovrebbe essere in php in modo che io glieli mandi in questo modo ****.php?nome=$nome&link=$link

**badaze** · 17-09-2005, 22:12

Originariamente inviato da Nebula88
si ma io devo mandare le due variabili al pop up

perciò questo dovrebbe essere in php in modo che io glieli mandi in questo modo ****.php?nome=$nome&link=$link

Ma no !!! Le variabili le metti nella pagina principale come da me indicato. In questo caso non serve il php nella pop-up.

Potresti farlo. Ma qui non serve.

**Nebula88** · 18-09-2005, 10:22

Allora ok, ma continuoi a non capire..
se io ho questo ciclo,

codice:

<?php
while($row = mysql_fetch_array($result2)) {
$link = $row["img"];
$nome = $row["dbname"];
echo"
[img]$link[/img]</p>";
}

che andrà a stampare nell'html tante img ovviamente..

codice:

[img]link[/img]
[img]link2[/img]
[img]link3[/img]
....ecc

per identificare l'immagine ho due dati, che come vedi sopra sono $link e $nome (link e nome dell'immagine)

come faccio a fare in modo che nel Pop UP che si apre cliccando (x esempio) nella prima img si veda questa ingrandita (quindi mi serve il link) e di sotto il nome (perciò mi serve l'altro dato) ??

**badaze** · 18-09-2005, 10:38

Originariamente inviato da Nebula88
Allora ok, ma continuoi a non capire..
se io ho questo ciclo,

codice:

<?php
while($row = mysql_fetch_array($result2)) {
$link = $row["img"];
$nome = $row["dbname"];
echo"
[img]$link[/img]</p>";
}

che andrà a stampare nell'html tante img ovviamente..

codice:

[img]link[/img]
[img]link2[/img]
[img]link3[/img]
....ecc

per identificare l'immagine ho due dati, che come vedi sopra sono $link e $nome (link e nome dell'immagine)

come faccio a fare in modo che nel Pop UP che si apre cliccando (x esempio) nella prima img si veda questa ingrandita (quindi mi serve il link) e di sotto il nome (perciò mi serve l'altro dato) ??

codice:

<?php
while($row = mysql_fetch_array($result2)) {
$link = $row["img"];
$nome = $row["dbname"];
echo"
[img]$link[/img]
";
}

Con il mio codice, creerai righe tipo :

codice:

[img]link[/img]
[img]link2[/img]
[img]link3[/img]

A questo punto, l'url dell'immagine ed il nome sono settati nella pagina html per le relativi immaggini. Se clicchi spunta allora una popup a cui vengono trasmessi l'url dell'immagine ed il nome tramite le proprietà src e title dell'oggetto img su cui hai cliccato.

Un'ultimo consiglio :

codice:

$link = $row["img"];
$nome = addslashes($row["dbname"]);

Cosi hai un apice nel nome non ci saranno errori.

Discussione: Pop Up <-

Strumenti discussione

Ricerca discussione

Visualizza

Pop Up <-

Permessi di invio