Agrandar imagen al pasar

[_Peibol_]

Muy buenas a todos.

Mi duda es la siguiente:
Tengo este codigo:

<script type="text/javascript">//<![CDATA[

document.write('<a href="javascript:void window.open(\'<?php echo $product_full_image ?>\', \'win2\', \'status=no,toolbar=no,scrollbars=yes,titlebar=no, menubar=no,resizable=yes,width=<?php echo $full_image_width ?>,height=<?php echo $full_image_height ?>,directories=no,location=no\');">');

document.write( '<?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?></a>' );

//]]>

</script>

<noscript>

<a href="<?php echo $product_full_image ?>" target="_blank" title="<?php echo $product_name ?>">

<?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?>

</a>

</noscript>

Que como veis muestra la lista de imagenes y al clikar me abre la imagen grande en un popup(hoy dos imagenes una grande y una pekeña de cada objeto).

Pues bien, quisiera modificar este mismo código para que al pasar sobre la imagen pekeña se abra la grande sin clikar en ella, solo pasando sobre ellas,
¿alguien sabria como modificar este mismo codigo? Yo lo he intentado sin solución, siempre con errores... :(
Muchas gracias de antemano a todos.

[djaevi]

Te lo dejo en un ejemplo simple vos despues adaptalo

A esta funcion le pasas como parametros el id de la imagen y el ancho y el alto nuevo que le vas a dar.

Código PHP:

  function resize(img,nuevoAncho,nuevoAlto) { 
img.width = nuevoAncho; 
img.height = nuevoAlto; 
}  
   

Y en el codigo html llamas a la funcion con los eventos onmouseover para agrandar y onmouseout la llamas para volverla al tamaño original.

Código HTML:

<img src="laImagen.jpg" id="laImagen" onmouseover="resize(this,300,300);" onmouseout="resize(this,150,150);"/> 

Saludos

[_Peibol_]

Muchas gracias por contestar djaevi, y si que funciona tu funcion, la unica pega para mi caso, esq quiero usar las dos imagenes la grande y la pekeña, no redimensionar la pekeña, quizás me explique mal antes.

$product_thumb_image = imagen pekeña
$product_full_image = tamaño original de la imagen

¿Se podrá hacer lo que comento? ¿o solo se puede redimensionar como tu has hecho?
Gracias por todo!!

[djaevi]

En tal caso podes hacer una funcion que cambie el src de la imagen

Código PHP:

  function verImagen(img,ruta) { 
img.setAttribute('src',ruta); 
}  
   

Código HTML:

<img src="smallimage.jpg" id="laImagen" onmouseover="verImagen(this,'fullimage.jpg');" onmouseout="verImagen(this,'smallimage.jpg');"/> 

Salu2

[_Peibol_]

En el código PHP que debería meter en la variable ruta. Me arroja el siguiente error:

Parse error: syntax error, unexpected ',', expecting '&' or T_VARIABLE

He sustituido este código:

Código PHP:

 <script type="text/javascript">//<![CDATA[ 
            document.write('<a href="javascript:void window.open(\'<?php echo $product_full_image ?>\', \'win2\', \'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=<?php echo $full_image_width ?>,height=<?php echo $full_image_height ?>,directories=no,location=no\');">'); 
            document.write( '<?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?></a>' ); 
            //]]> 
            </script> 
            <noscript> 
                <a href="<?php echo $product_full_image ?>" target="_blank" title="<?php echo $product_name ?>"> 
                <?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?> 
                </a> 
            </noscript>  

Por este otro:

Código PHP:

  <? function verImagen(img,ruta) {  
        img.setAttribute('src',ruta);  
        }?> 
        <img src="<?php echo $product_thumb_image ?>" id="laImagen" onmouseover="verImagen(this,'<?php echo $product_full_image ?>');" onmouseout="verImagen(this,'<?php echo $product_thumb_image?>');"/>  

¿Me podéis echar una mano?
Cómo podréis ver mis conocimientos en PHP son muy limitados y solo necesito hacer esta "pequeña" modificación.
Muchas gracias.

[djaevi]

esta todo bien el codigo html y php pero no pongas la funcion entre <? ?> ya que no es una funcion php sino una funcion javascript :D...

debes poner la funcion dentro de tags de scripts por ejemplo:

<script type="text/javascript">
function verImagen(img,ruta) {
img.setAttribute('src',ruta);
}
</script>

Disculpa si dice codigo php en la respuesta uso eso para encapsular codigo en las respuestas porque no se como poner etiquetas javascript pero el codigo es javascript...

Salu2

[_Peibol_]

Perfecto, me ha funcionado, muchisimas gracias.

Pero un par de dudas más:

1º La acción se realiza sobre una serie de imágenes de productos que está metido en un listado de 2 filas por 4 columnas. Al pasar el ratón y sustituir la imagen pequeña por la grande, el resto de imágenes de la fila en cuestión quedan superpuestas, es como si la ampliación quedara de fondo de pantalla. ¿Habría alguna opción para "traer al frente" la imagen?

2º Se puede centrar de alguna forma la imagen, pues la que está en el centro de la fila se ve perfecta pero la del lateral queda cortada al llegar al extremo del div.

NOTA AÑADIDA: Sobre la 2º cuestión, perdón, rectifico, la de la izquierda sale ajustada al lateral izquierdo y se ve perfecta, las del centro ya se quedan algo cortadas y la de la derecha se ve la mitad. Lo que necesitaría sería alinearlas todas a la izquierda.

[djaevi]

Mmm respecto a lo segundo nose si se podra hacer algo no se si los css tiene forma de manejar el punto de giro como en flash, respecto a las capas tendrias que usar la propiedad z index podrias poner un contador aver fijate de probar el codigo javascript de esta forma...

var c=0;
function verImagen(img,ruta) {
c++;
img.setAttribute('src',ruta);
img.style.zIndex = c;
}

despues decime si te resulto...

Saludos

[_Peibol_]

No ha funcionado, sigue saliendo de la misma forma, es decir, al ampliar la imagen se coloca la última, detrás incluso de los textos que hay más abajo.

Sobre la 2º cuestión... Ya que en un principio no sabrías como indicarme para centrarlo, ¿podría redimensionarse la imagen grande?

Muchas gracias.

[djaevi]

Mmmm posteate como armas la tabla de imagenes en el html o php mira yo trate de rehacer algo asi como lo que vos decis una fila de imagenes de 2 columnas pero hace otra cosa agranda la celda de acuerdo a la imagen que se agranda te dejo el codigo x las dudas...

Código javascript:

function vi(img,ruta) {
    img.setAttribute('src', ruta);
}
 
function llenarCampos() {
var celdas = document.getElementsByTagName('td');
    for (var i=0; i<celdas.length; i++) {
        var cadenaDiv = "";
        cadenaDiv +=  '<a href="#">';
        cadenaDiv += '<img src="small' + (i+1) + '.jpg"'
        cadenaDiv += 'onmouseover="vi(this,\'full'+ (i+1) +'.jpg\')"'
        cadenaDiv += 'onmouseout="vi(this,\'small'+ (i+1) +'.jpg\')>';
        cadenaDiv +=  '</a>';
        celdas[i].innerHTML = cadenaDiv;
    }
}
 
window.onload = llenarCampos;
 

Código HTML:

<table border=1>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table> 

Saludos

[_Peibol_]

Todo esto lo estoy utilizando con virtuemart de Joomla. Se podrían configurar el número de filas y columnas que se quieran y yo lo tengo 2 filas por 4 columnas por página. Un ejemplo de su visualización puedes tenerlo aquí:

(Soy usuario novel y no me dejan pegarte el enlace, te lo envío por privado, a ver si me dejan).

Aunque con tan solo un artículo y la imagen por defecto.


Te pego el código de todo el archivo tal y como lo tengo actualemente:

Código PHP:

  <?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); 
mm_showMyFileName(__FILE__); 
 ?> 
 <div class="browseProductContainer"> 
         
         
        <h3 class="browseProductTitle"><a title="<?php echo $product_name ?>" href="<?php echo $product_flypage ?>"> 
            <?php echo $product_name ?></a> 
        </h3> 
         
        <div class="browsePriceContainer"> 
            <?php echo $product_price ?> 
        </div> 
         
        <div class="browseProductImageContainer"> 
         
        <script type="text/javascript"> 
        function verImagen(img,ruta) {  
        img.setAttribute('src',ruta);  
        }</script> 
        <img src="<?php echo $product_thumb_image ?>" id="laImagen" onmouseover="verImagen(this,'<?php echo $product_full_image ?>');" onmouseout="verImagen(this,'<?php echo $product_thumb_image?>');" /> 
                     
             
        </div> 
         
        <div class="browseRatingContainer"> 
        <?php echo $product_rating ?> 
        </div> 
        <div class="browseProductDescription"> 
            <?php echo $product_s_desc ?>&nbsp; 
            <a href="<?php echo $product_flypage ?>" title="<?php echo $product_details ?>"><br /> 
            <?php echo $product_details ?>...</a> 
        </div> 
        <br /> 
        <span class="browseAddToCartContainer"> 
        <?php echo $form_addtocart ?> 
        </span> 
 
</div>  

Esta página seria el efecto perfecto para mi, aunque nose si es con java o no, sabrias decirme? o como ahcer algo parecido?

.boutikenvogue.com

Muchas gracias, te debo unas cuantas jejeje.

[djaevi]

ajaj no para nada che tengo un problema el link que me pasaste no me muestra ninguna galeria de imagenes :s fijate de corregirlo lo que noto es que no alojas las imagenes en una tabla sino en divs por lo cual para el tema de las capas podrias agregar en el div una funcion en mouseover que le de un z index superior como en el ejemplo que te puse en el comentario 8, igual revisa lo del link si veo bien como lo queres hacer se me va a hacer mas facil

SALU2

[_Peibol_]

Te he pasado el link por mensaje privado, es el mismo que te puse en el post pero con www delante. Es que en el foro no se me permiten poner links completos.

Respecto a agregar en el "div una funcion en mouseover que le de un z index superior" podrías especificarme un poco más?? Me he perdido...

[djaevi]

Ahh ahi lo vi al efecto en efecto creo que es javascript dejame ver que en un rato me fijo si saco como hacer el tema ese del aparecimiento del div no creo que sea dificil simplemente hacerlo aparecer el tema del movimiento ya es mas elaborado pero voy a ver de hacer algo tambien.

Saludos

[djaevi]

Hola mira te lo dejo en un rar aver si te sirve y lo podes llegar a entender como funciona, lo comprimi porque lleva unas imagenes de muestra creo que lo que hace el ejemplo que me pasaste es llamar mediante los rollover peliculas flash que hacen el zoom ese interno y mediante flashvars le debe pasar que imagen mostrar yo lo que te hice es que al hcer roll over apareezcan por fade la imagen en grande en otro div fijate si te sirve...

Otra cosa lo arme con jquery la libreria esta incluida en el rar te aclaro x si ves cosas raras en el codigo

http://rapidshare.com/files/25930255...Query.rar.html

Dejo el codigo por si alguien quiere verlo...

Código HTML:

<style>
a {color:#ffffff;}
#maxDiv {
width:300px; display:none; z-index:100; 
position:absolute; top:10px; left:0px; border:dashed;
}
</style> 

Código:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var cells = $('td');
		for (var i=0; i<cells.length; i++) {
			var string = "";
			string += '<a href="#">';
			string += '<img id="'+i+'" class="galeria" src="small'+(i+1)+'.jpg">';
			string += '</a>';
			cells[i].innerHTML = string;
		}
	$('.galeria').hover(
      function () {
	  	$('#maxDiv').html('<img src="full'+(Number(this.id)+1)+'.jpg">');
	  	$('#maxDiv').css('left', ((this.id%2)+1) * this.width + 30);
        $('#maxDiv').fadeIn(100);
      }, 
      function () {
        $('#maxDiv').fadeOut(100);
      }
    );
})
</script>

Código HTML:

<div id="maxDiv"></div>
<table>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table> 

Salu2 ojala te sirva :D

[_Peibol_]

Hola djaevi ,
Te he dejado un privado. A ver si puedes darme una respuesta pues me urge encontrar una solución, muchas gracias y un saludo.

[mercadeokennedy]

Hola

soy novata también en Virtuemart y Joomla

y leyendo ésto que ustedes comentan tal vez puedan ayudarme

yo necesito hacer que desde el listado de los artículos al dar clic en la imagen pequeña se abra de una vez la imagen ampliada. En estos momentos toca darle clic a la imagen pequeña, se abre la página de los detalles del artículo y luego volver a dar clic en la imagen pequeña para poderla ver ampliada... quiero omitir éste paso de los detalles

por favor qué debo cambiar y en cuál o cuales archivos???

muchas gracias!