Ayuda con imagenes

lalo0002 · #1 (**permalink**) 24/09/2009, 18:04

hola amigos.
Estoy haciendo una web de venta de ropa.

Quisiera hacer un efecto como el que esta en esta pagina, pero no logro hacerlo
http://www.newport-news.com/shop/thu...egory_id=10513

Quiero hacer que al hacer clic en una imagen chica de la derecha, esta salga en la parte izquierda a su tamaño real(mas grande) asi como esta en la pagina.

Alguien me puede ayudar ?

Estoy trabajando toda la web con php.

abimaelrc · #2 (**permalink**) 24/09/2009, 18:36

Eso lo puedes lograr con HTML DOM

loncho_rojas · #3 (**permalink**) 24/09/2009, 19:15

ok.. veamos.. puedes hacerlo con Javascript, o alguna galeria prediseñada.. a ver si esto te ayuda

creamos una tabla SQL exclusivamente para los productos

Código:

#
# Estructura de tabla para la tabla `productos`
#

CREATE TABLE `productos` (
  `idProductos` bigint(20) NOT NULL auto_increment,
  `imagen` varchar(50) NOT NULL default '',
  PRIMARY KEY  (`idProductos`)
) TYPE=MyISAM AUTO_INCREMENT=7 ;

#el TYPE muchas veces se cambia por ENGINE, depende de la version de SQL
#
# Volcar la base de datos para la tabla `productos`
#

INSERT INTO `productos` VALUES (1, 'img1.jpg');
INSERT INTO `productos` VALUES (2, 'img2.jpg');
INSERT INTO `productos` VALUES (3, 'img3.jpg');
INSERT INTO `productos` VALUES (4, 'img4.jpg');
INSERT INTO `productos` VALUES (5, 'img5.jpg');
INSERT INTO `productos` VALUES (6, 'img6.jpg');

# --------------------------------------------------------

creamos la famosa conexion a la base de datos, si ya la tienes, genial, si no recilca esta

conexion_aguila.php

Código PHP:

  <?php
/*aca se configuran los datos para conectar, como el servidor, usuario, clave, y nombre de base de datos. */
$db_aguila_servidor="localhost";
$db_usuario="webaguila";
$db_clave="12345";
$db_aguila_base_datos="webaguila";

$aguila_conn=mysql_connect($db_aguila_servidor, $db_usuario, $db_clave);
if(! $aguila_conn){
die("Error al conectarse a la base de datos".mysql_error());
}

mysql_select_db($db_aguila_base_datos, $aguila_conn) or die("No se pudo seleccionar la base de datos");

?>

ahora generamos el archivo productos.php

Código PHP:

  <?php
    
    include("../inc/conexion_aguila.php");
    mysql_select_db($db_aguila_base_datos,$aguila_conn);
    
?>
 <?php 
    $sql_Muestra = "SELECT idProductos, imagen  
    FROM productos 
    WHERE idProductos = '".$_GET['id']."'
    ORDER BY idProductos";
    $rsMuestra = mysql_query($sql_Muestra,$aguila_conn) or die(mysql_error()."<br />".$sql_Muestra);
    $rowMuestra = mysql_fetch_array($rsMuestra);
    ?>



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Productos</title>
</head>

<body>

<table width="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
  
    <td>
    <a href="http://www.tupagina.com/productos.php?id=1">
    <img src="http://www.forosdelweb.com/f18/img/productos/ima1.jpg" width="200" height="150" border="0" />
    </a>
    </td>
    
    <td>
    <a href="http://www.tupagina.com/productos.php?id=2">
    <img src="http://www.forosdelweb.com/f18/img/productos/ima2.jpg" width="200" height="150" border="0" />
    </a>
    
    </td>
    <!--esta es la imagen que cambiará cuando le des clik-->
    <td rowspan="3">
    <img src="http://www.forosdelweb.com/f18/img/productos/<? echo $rowMuestra["imagen"] ?>" width="500" height="450" border="0" />
    </td>
    
  </tr>
  
  
  <tr>
  
    <td>
    <a href="http://www.tupagina.com/productos.php?id=3">
    <img src="http://www.forosdelweb.com/f18/img/productos/ima3.jpg" width="200" height="150" border="0" />
    </a>
    </td>
    
    <td>
    <a href="http://www.tupagina.com/productos.php?id=4">
    <img src="http://www.forosdelweb.com/f18/img/productos/ima4.jpg" width="200" height="150" border="0" />
    </a>
    </td>
  </tr>
  
  <tr>
  
    <td><a href="http://www.tupagina.com/productos.php?id=5">
    <img src="http://www.forosdelweb.com/f18/img/productos/ima5.jpg" width="200" height="150" border="0" />
    </a>
    </td>
    
    <td><a href="http://www.tupagina.com/productos.php?id=6">
    <img src="http://www.forosdelweb.com/f18/img/productos/ima6.jpg" width="200" height="150" border="0" />
    </a>
    </td>
    
  </tr>
</table>
<?
            mysql_free_result($rsMuestra);
            ?> 

</body>
</html>

todo es cuestion de tener 2 tipos de imagenes guardadas, una pequeña que sirva de muestra, y otra mas grande que sera mostrada cuando le das click en los enlaces, donde IMA1 es la imagen pequeña, e IMG1 es la mas grande, cuyo nombre guardamos en la base de datos y de acuerdo a que ID tiremos por la URL nos trerá dicha imagen..

espero sirva

lalo0002 · #4 (**permalink**) 24/09/2009, 21:57

gracias x todo ya tengo una idea, pero quisiera las img con sus datos almacenarlas con xml, para de alli jalar sus datos, sin usar nada de bd

gracias

Krato · #5 (**permalink**) 25/09/2009, 06:44

Bueno, lo puedes hacer muy fácil con jQuery. Además le daría más vida a tu web.

A mi me gusta por ejemplo mucho el plughn para jQuery: Gallerific.

Página Oficial

Y aquí tienes una demo que se parece bastante a lo que buscas.

http://www.twospy.com/galleriffic/advanced.html

Despues por ejemplo puedes adaptar tu css o el código a lo que quieras. Por ejemplo yo lo tengo en mi web para mostrar mi portfolio:

Ver mi web

Espero que te sirva.