Kompozer: Cómo hacer funcionar el efecto Zoomi y sobrevivir para verlo

Si usted domina el tema de los javascript el título le parecerá una exageración… Este es un tutorial dirigido a todos los demás.

He incluido la explicación en el apartado de Kompozer pero es cierto que se puede hacer desde cualquier otro editor web ya que se trabaja fundamentalmente desde el código.

Hace un tiempo dando un paseo por Xyberneticos me encontré con un artículo sobre un efecto javascript que me resultó más que interesante: el efecto Zoomi. El principal problema eran mis escasos conocimientos del tema. Acababa de iniciarme (y sigo en ello) en el asunto del HTML y del CSS pero yo quería hacer funcionar aquello. Con la descripción que allí aparecía, un principiante como yo, no tenía nada que hacer así que busqué algo más de información. Encontré varios sitios (docenas) que trataban el tema pero todos se habían limitado a copiar el artículo de Xyberneticos. Un poco cabreado dejé en Tutula el siguiente comentario:

Con respecto a este asunto de Zoomi todo el mundo que ha escrito sobre el tema se ha dedicado a Copiar/Pegar el artículo de Xyberneticos pero nadie se ha molestado en añadir alguna explicación más. Yo con esos datos no hago nada de nada.

A pesar del tono de cabreo Ruy (el administrador) se molestó en contestar y a ofrecerme cuanta ayuda me fuera necesaria (en ese momento él no sabía el nivel de inutilidad que me avalaba)
Prácticamente todo lo que se incluye en el tutorial es un resumen de las ayudas que fui recibiendo de él para poder ver funcionar el efecto Zoomi en mi portafolio.

En mi desesperación le dije:

Si salgo de esta pienso publicar un tuto con todo lujo de detalles sobre el asunto que se titule “Como hacer funcionar Zoomi y sobrevivir para verlo”

Y, aunque un poco tarde, aquí está.

ver tutorial Kompozer: Cómo hacer funcionar el efecto Zoomi y sobrevivir para verlo

    • Rosendo
    • 21/05/08

    Mire tu tutorial “Kompozer: Cómo hacer funcionar el efecto Zoomi y sobrevivir para verlo”
    Te comento que por lo que se ve en la primera imagen el archivo que contiene el jquery pesa 95kb
    , te comento que lo mas acconsejable es usar la vercion enpaquetada de jquery que actulamente pesa 30kb y tiene las misma funcionaledades.

  1. Que tal,
    Te felicito por el tutorial exelente, pero me quedó una duda. cuando dices incorporar el class… no se si lo estoy haciendo bien porfa ayudame😄

    prob

  2. @Diego: para incorporar el atributo class o id a una etiqueta como puede ser una imagen (img) puedes hacerlos de varias formas. La más sencilla es seleccionar la imagen e ir a Formato/Propiedades de imagen y dentro de ese cuadro pulsar Edición avanzada…

    Esto te lleva a un cuadro con una pestaña llamada Atributos HTML donde puedes escoger el Atributo en el desplegable y añadir el Valor a mano.

    No sé si esto te soluciona la duda. Si no és así, ya sabes donde estoy.

    Suerte.

  3. perfecto master con ese tutorial, me pase dos semanas leyendo e investigando y te felicito es el mas completo y sencillo k encontre.

    • Hermes Cisneros
    • 17/03/10

    Hola, soy relativamente nuevo en estos temas. He leído el tutorial y me parece muy interesante por lo caul agrego mis felicitaciones.

    De ser posible me gustaría saber como puedo hacer o que parte de zoomi.js debo modificar para que el zoom sea de tamaño personalizado pero con la imagen completa ya que muchas de la imagenes que suben son muy grandes y al pasar el mouse éstas cubren buena parte de la pagina.

    Saludos y de antemano muchas gracias.

  4. Hermes Cisneros :

    ..me gustaría saber como puedo hacer o que parte de zoomi.js debo modificar para que el zoom sea de tamaño personalizado pero con la imagen completa ya que muchas de la imagenes que suben son muy grandes y al pasar el mouse éstas cubren buena parte de la pagina.

    Buff. Cómo puedes ver en el tuto hice funcionar Zoomi pero de ahí a comprender la complejidad interna del script hay un mundo. Mi consejo inicial sería que escalaras la imagen target al tamaño que deseas. Así consigues que salga al tamaño deseado y además que se reduzca su peso.

    • Pablo
    • 4/11/10

    Hola no llego a ver en el primer paso el cambio entre las dos imagenes, supongo en en kompozer en “vista preliminar” deberia ver el efecto no?
    Este es el codigo (gracias por tu paciencia)

    index

  5. @Pablo: Mmmmm… en Vista previa no lo vas a ver. Tines que guardar y navegar el HTML con Explorer, Firefox…
    No puedo ver el código porque al ser HTML WordPress lo borra😦

  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: