BBcode Imagen Expando

Hace unos dias encontre un script muy interesante llamado "Expando Image Script".

¿Que es imagen Expando?

Imagen Expando es un sencillo script que redimenciona las imagenes con un efecto onMouseOver (Pasando el Puntero). Esto le permite visualizar imágenes de gran tamaño en un tamaño reducido y hacer que se expanda dinámicamente cuando el puntero del ratón pasa sobre las imagenes. Estas imágenes en miniatura deben tener una anchura explícitas o atributo de altura que es inferior a las dimensiones originales de la imagen, para poder conseguir el efecto deseado.

Demo y enlace original del script: Dynamic Drive DHTML Scripts- Expando Image script


Instalacion:

Subimos via ftp el archivo expando.js al directorio del foro.

Luego vamos a:

Admincp -> Estilos y Plantillas -> Administrador de Estilo.

Selecciona su estilo y buscan la plantilla headinclude, al final de la plantilla colocan el siguiente codigo:

Código HTML:

<style type="text/css">

img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}

</style>

<script type="text/javascript" src="expando.js">

/* Expando Image Script ©2008 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use
   */

</script>

Guardar.


Ahora crearemos el codigo BB:

Admincp -> Códigos BB -> Agregar nuevo código BB.


Titulo: Expando
Nombre de Etiqueta de Código BB: expando

Reemplazo:

Código HTML:

<p>
<img class="expando" border="0" src="{param}" width="200" height="100">
</p>

Ejemplo: [expando]http://anime-wallpapers.com/images/800x600/pein-and-hanzou.jpg[/expando]

Usar {option}: No

Imagen de Botón: colocan la imagen que deje adjunto

Guardar.

Listo, ahora creas un tema y pruebas el BBcode para ver que funcione bien.

Aclaro: este efecto funciona con todas las versiones de vbulletin.

Saludos y suerte.

Gracias por compartir Hades.

Luce bastante interesante ese efecto en las imágenes, y es sencillo de hacer!

Ostia, si que funciona bien y está muuuuy interesante este efecto.

Muchas gracias por compartirlo

Luce muy bueno Heades, muchas gracias lo probare =)

Interesante el código y la utilidad.

No acabo de entender el max-width="600px" dentro del código html, ya que no es un atributo de la etiqueta img sino que es un atributo css.

Y otra cosa que es la que me preocupa, es que si la imagen es de inferior tamaño, este bbcode lo que hace es que la expande al tamaño fijado en el código html y luego hace un scroll inverso, es decir reduce la imagen hasta llegar a su tamaño real. No se si se podría de alguna manera evitar este efecto.

Saludos.

Iniciado por acabator

No acabo de entender el max-width="600px" dentro del código html, ya que no es un atributo de la etiqueta img sino que es un atributo css

Bueno como tu lo dices es css ya que queria que la imagen no fuera de un tamaño fijo, pero es decision tuya si lo dejas o no, cambialo y lo dejas en width="400px"

Y otra cosa que es la que me preocupa, es que si la imagen es de inferior tamaño, este bbcode lo que hace es que la expande al tamaño fijado en el código html

Al contrario lo que hace que el codigo html lo que hace dejar la imagen de menor tamaño y al pasar el puntero sobre la imagen esta se expande a su tamaño original.

y luego hace un scroll inverso, es decir reduce la imagen hasta llegar a su tamaño real. No se si se podría de alguna manera evitar este efecto.

Como te lo dije anteriormente este efecto hace lo contrario al hacer el scroll inverso la imagen se reduce al tamaño inicado en el codigo html y si se puede evitar no, porque de eso se trata este codigo html.

Saludos.

Me gusta mucho el efecto. Pero el tamaño de la imagen en la que se use este efecto
esta limitado a 600 px?

Iniciado por Hades

Bueno como tu lo dices es css ya que queria que la imagen no fuera de un tamaño fijo, pero es decision tuya si lo dejas o no, cambialo y lo dejas en width="400px"


Al contrario lo que hace que el codigo html lo que hace dejar la imagen de menor tamaño y al pasar el puntero sobre la imagen esta se expande a su tamaño original.




Como te lo dije anteriormente este efecto hace lo contrario al hacer el scroll inverso la imagen se reduce al tamaño inicado en el codigo html y si se puede evitar no, porque de eso se trata este codigo html.

Saludos.

A ver, creo que no me he explicado bien, lo que digo es que si en vez de poner entre las etiquetas "expando" una imagen de mayor tamaño que se redimensione al tamaño fijado en el código y al pasar el ratón se expande a su tamaño real (funcionamiento normal), ponemos una imagen de menor tamaño el código la redimensiona al tamaño fijado (mayor, es decir la agranda) y al pasar el ratón la imagen se comprime a su tamaño real.

Con un ejemplo, si en el código de reemplazo fijas un width="800px" y luego pones una imagen de 1600 px, esta se visuliza a 800 y cuando pasas el ratón se expande hasta los 1600 px, esto es lo normal y esta muy bien. Sin embargo si la imagen es más pequeña, por ejemplo de solo 500 px, se va a visualizar en el cuerpo del mensaje ampliada a los 800 px y al pasar el ratón se comprime hasta los 500 px que tiene en realidad.

Y justamente eso es lo que me gustaría evitar.

En cuanto al código css metido así en el código html de reemplazo no tiene ningún efecto, al menos que yo sepa, es decir no sirva para nada, y tal como lo has puesto solo hace su efecto el heigth="200px". Estaría bien crear un código, bien html o bien css, que fuese capaz de redimensionar la imagen tanto vertical como horizontalmente sin que se distorsione, así según esta se puede redimensionar en uno solo de los parámetros pero no en los dos a la vez sin distorsionarla.

Y ya de paso contestando a Destron, el tamaño es el que tu fijes, aunque como digo sin usar el máx-width que no va a funcionar como atributo de la etiqueta html <img>, si no usando el width sin más, que ese si es un atributo reconocible por dicha etiqueta.

Saludos.

Como tu lo haz dicho ese codigo css no hace ningun efecto en el codigo html y eso era lo que queria inicialmente, pero en fiin codigo editado.

Pero el tamaño de la imagen en la que se use este efecto
esta limitado a 600 px?

El tamaño que se fija en el codigo es para la imagen inicial, no para el resultado final.

Saludos.

muy bueno GRacias

Por favor utilizar el botón Gracias para evitar mensajes flood.

ya lo probe esta de lujo me encanto .

A mí lo que me gustaría es que las imágenes aumentadas se mostrasen en otra zona, estilo galería. Vamos, algo como ésto, que creo que a día de hoy no existe en VBulletin y que yo lo veo muy práctico: http://www.bretteleben.de/lang-de/jo...s-gallery.html . ¿Es posible hacer algo similar para VBulletin?

Hola buenas, la verdad es que promete mucho este sistema de ver las fotos.
Una consulta ya que no se por qué motivo no funciona, puede ser que no funcione si dispongo en el foro de algún hack que disminuye las fotos?
Ya que lo instalé, adjunte un link dentro de Expando y no funciona, adjunté dentro de Expando una foto [IMG] y tampoco funciona siempre sale un error.
Las pruebas las hice dentro de un post creado intenté introducir en el las fotos de prueba.



" width="200" height="100"> Se queda siempre con este error.
Gracias y saludos.

Tize, las imagenes no deben de ir entre etiquetas IMG, fijate en el ejemplo:

[expando]http://anime-wallpapers.com/images/800x600/pein-and-hanzou.jpg[/expando]

Repasa la guia para ver si te haz equivocado en algo.