BBcode Imagen Expando

imported_Ryuk · 30 Ene 2010

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:

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:

HTML:

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

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

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.

Andrés Durán · 30 Ene 2010

Gracias por compartir Hades.

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

KingRuko · 30 Ene 2010

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

Muchas gracias por compartirlo

jjuuaannk · 31 Ene 2010

Luce muy bueno Heades, muchas gracias lo probare =)

acabator · 3 Feb 2010

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.

imported_Ryuk · 3 Feb 2010

acabator dijo:
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.

Destron · 4 Feb 2010

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

acabator · 4 Feb 2010

Hades dijo:
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.

imported_Ryuk · 4 Feb 2010

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.

ArgentoSeo · 7 Feb 2010

muy bueno GRacias

Andrés Durán · 7 Feb 2010

Por favor utilizar el botón

Gracias para evitar mensajes flood.

felenn · 14 Abr 2010

ya lo probe esta de lujo me encanto .

imported_katxan · 28 Abr 2010

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/joomla/css-gallery.html . ¿Es posible hacer algo similar para VBulletin?

Tize · 29 May 2010

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 y tampoco funciona siempre sale un error.
Las pruebas las hice dentro de un post creado intenté introducir en el las fotos de prueba.

[IMG]http://www.ddirecta.com/%3Cimg%20style=" width="200" height="100"> Se queda siempre con este error.
Gracias y saludos.

imported_Ryuk · 30 May 2010

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

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

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

Tize · 30 May 2010

Hola Kuervo, voy a probarlo nuevamente a ver que sucede y si me funciona.
Gracias , en un rato te comento algo.
Saludos.

MasterPlayer · 17 Feb 2011

Tize, me pasaba lo mismo, la solución fue desabilitar unas opciones del BBcode expando. Yo lo dejé así:

Eliminar Etiqueta Si Está Vacío Sí No

Deshabilitar Código BB Dentro de Este Código BB Sí No

Ignorar Emoticonos Dentro de Este Código BB Sí No

Deshabilitar Envoltura de Texto Dentro de Este Código BB Sí No

Deshabilitar Análisis Automático de Enlaces Dentro de Este Código BB Sí No

Espero que a alguien le sirva, Abrazo.

Tize · 17 Feb 2011

Hola buenas, ya ni me acordaba de este tema.
Muchas gracias por avisarme.
Si me animo a probarlo de nuevo publicaré al respecto aquí mismo ya que era un tema que me preocupaba.
Ahora mismo estoy un poco desanimado pero lo probaré.
Saludos y gracias por tu tiempo.

MasterPlayer · 17 Feb 2011

De nada, es lo menos que puedo hacer, por la ayuda que dan en esta web.

Ahora tengo otro problema. Si la imagen tiene mas de 800x600 cuando paso el mouse por la imagen y se expande[hace el efecto que corresponde] se termina expandiendo mucho mas de alto y no obtiene el tamaño original.

Lo raro es que cuando pongo vista previa al post se ve bien, pero cuando el efecto lo hace en un post ya creado... pasa ese problema.

Puede ser que esté restringido el tamaño del ancho de imagenes en los post ? Como puedo solucionarlo ?

Abrazos.

Tize · 17 Feb 2011

Cuando me ponga con ello lo miraré por si alguien no te da respuesta a tu consulta antes de que pueda verlo yo.
Gracias nuevamente y espero que alguien pueda ayudarte.
Saludos.