Para mostrar una serie de imagenes de un producto cualquiera en la version de la pagina en html usaba el siguiente codigo javascript
Código:
Lo que hace este script es que al clickear sobre el thumbnail se abra la imagen original en una ventana popup que se ajusta al tamaño de la imagen.<script language="javascript">
/*****************************************************************************
Pop-up ajustada a foto. ******************************************************************************/
var titulopordefecto = "IMAGEN"; //Si no se especifica un título al llamar a la función colocará el que se especifique aquí
var ventana;
var cont=0;
function afoto(cual,titulo)
{
if(cont==1){ventana.close();ventana=null}
if(titulo==null){titulo=titulopordefecto}
ventana=window.open('','ventana','resizable=yes,scrollbars=no')
ventana.document.write('<html><head><title>' + titulo + '</title></head><body style="overflow:hidden" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no" onUnload="opener.cont=0"><img src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)">');
ventana.document.close();
cont++;
}
function redimensionar(ancho, alto)
{
ventana.resizeTo(ancho+12,alto+28);
ventana.moveTo((screen.width-ancho)/2,(screen.height-alto)/2); //centra la ventana. Eliminar si no se quiere centrar el popup
}
</script>
El codigo de las tablas que contienen los thumbnails desde los cuales se llama al script es el siguiente:
Código:
Pero tenia que colocar el nombre de cada imagen y de su thumbnail manualmente y ya se imaginaran lo complicado y tedioso que se vuelve si hay muchos productos<table width="120" height="90" border="1" align="center" bordercolor="#99B1D1" bgcolor="#FFFFFF">
<tr>
<td>
<div align="center"><a href="#" onClick="afoto('../fotos/imagen1.jpg','');return false"><img src="thumbnails/thumb_imagen1.jpg" width="120" height="90" border="0"></a></div>
</td>
<td>
<div align="center"><a href="#" onClick="afoto('../fotos/imagen2.jpg');return false"><img src="thumbnails/thumb_imagen2.jpg" width="120" height="90" border="0"></a></div>
</td>
<td>
<div align="center"><a href="#" onClick="afoto('../fotos/imagen3.jpg');return false"><img src="thumbnails/thumb_imagen3.jpg" width="120" height="90" border="0"></a></div>
</td>
<td >
<div align="center"><a href="#" onClick="afoto('../fotos/imagen4.jpg');return false"><img src="thumbnails/thumb_imagen4.jpg" width="120" height="90" border="0"></a></div>
</td>
</tr>
</table>
Ahora almaceno los nombres de las imagenes en la base de datos en un campo de tipo texto, les pongo los codigos que utilice para que se entienda mejor de donde sale cada variable y asi de paso pueda usarlo quien los necesite
Código:
Para guardar las imagenes y alamcenar sus nombres se usa el siguiente codigo//parte del codigo del formulario que uso para enviar las imagenes //a un directorio y sus nombres a la base y otros datos de el producto, //se usa un campo type=file //para cada imagen o sea que podemos enviar la cantidad de imagenes que //necesitemos <input type=file name="images[]"> <br> </td> </tr> <tr><td> </td> <td><input type="submit" name="s1" value="Enviar"></td>
Código:
Para mostrar las imagenes en una tabla de cinco celdas por fila que se genera conforme se recuperan de la base con el siguiente codigo if(isset($_POST[s1]))
{
if(!empty($_FILES[images][name][0]))
{
while(list($key,$value) = each($_FILES[images][name]))
{
if(!empty($value))
{ //se renombra cada imagen y se envia al directorio: fotos
$NewImageName = $t."_pic_".$value;
copy($_FILES[images][tmp_name][$key], "../fotos/".$NewImageName);
$MyImages[] = $NewImageName;
}
}
if(!empty($MyImages))
{ //Se almacenan los nombres de todas las imagenes
//relacionadas con un producto especifico en esta variable
$ImageStr = implode("|", $MyImages);
}
}
}
//y se guarda en la base la variable que contiene los nombres de las imagenes
//junto con algun otro dato enviado por el formulario
$sql = "insert into TABLA set
marca = '$_POST[marca]',
modelo = '$_POST[modelo]',
image = '$ImageStr' ";
//el contenido de la variable $ImageStr seria algo como
//nombreprimeraimagen|nombresegundaimagen|nombreterceraimagen
//asi con todos los nombres de las imagenes
Código:
El problema es que solo me muestran los thumbnails de las imagenes y no se como llamar al javascript con las variables $thumb y $normal intente enif(!empty($_GET[id]))
{ //id de un producto especifico que se obtiene de una busqueda
// por marca o modelo
$sql1="SELECT * FROM tabla WHERE id='$_GET[id]'";
$sql2=mysql_query($sql1);
$row=mysql_fetch_array($sql2);
$cont=1; //variable que sirve para verificar si abro o cierron un renglon
echo"<table border='0' align='center' >";
if(!empty($row[image]))
{
$MyImages=explode("|",$row[image]);
while(list(,$v)=each($MyImages))
{
$thumb="<img src=\"re_images/$v\" width=110 height=83 border='0' >";
$normal="<img src=\"re_images/$v\" width=600 height=450 border='0' >";
if(($cont%5)==1)
{ //Abre el renglon de celdas
echo"<tr>";
}
echo"<td>";
echo"<td ><div align='center'>$thumb</div></td>"; <--AQUI
echo"</td>";
if(($cont%5)==0)
{//cierra el renglon
echo"</tr>";
}
$cont++;
}
}
echo"</table>";
}
lugar de
Código:
porecho"<td ><div align='center'>$thumb</div></td>";
Código:
Siento haberme extendido pero era necesario creo yo para que sea un poco mas facil de entender <td>
<div align="center"><a href="#" onClick="afoto('$normal');return false">$thumb</a></div>
</td>
y obtuve el error:
Parse error: parse error, unexpected T_STRING, expecting ',' or ';' in d:\appserv\www\......\info.php on line 170
que es la linea donde hice la sustitucion
