Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 10 de 10

Tema: Donde colocar codigos - Zoom en imagenes

  1. #1
    Me va gustando esto... Habitante Avatar de Npra
    Fecha de Ingreso
    15 oct, 11
    Ubicación
    Galicia
    Mensajes
    83
    Poder de Reputación
    9

    Cool Donde colocar codigos - Zoom en imagenes

    Hola,
    mi vida ultimamente es ver montones de codigos de todo tipo para poder montar una web humilde pero con algo de estilo. He encontrado este código que tiene muy buen aspecto.
    Asocia dos imágenes; una pequeña a una mas grande a modo de zoom.

    Se lo preguntaria al autor pero ya no sé ni donde lo he copiado.Tendriais que ver la cantidad de hojas que tengo por el escritorio...

    Bueno mi pregunta es donde se debe incrustar cada uno de estos tres codigos.
    Gracias anticipadas.

    Código:
    <link type="text/css" rel="stylesheet" href="default.css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="easyzoom.js"></script>
    <script type="text/javascript">
            jQuery(function($){
                    $('a.zoom').easyZoom();
            });
    </script>
    Código:
    <p><a href="large.jpg" class="zoom"><img src="small.jpg" alt="Mercedes GP"></a></p>

    Código:
    body, table, input, textarea, select, li, button{
            font:1em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
            line-height:1.5em;
            color:#333;
            }       
    body{   
            font-size:12px;
            background:#fff;                
            }       
            
            img{border:0}
            
    #container{
            padding:30px;
            }       
            
            #easy_zoom{
            width:600px;
            height:400px;   
            border:5px solid #eee;
            background:#fff;
            color:#333;
            position:absolute;
            top:60px;
            left:400px;
            overflow:hidden;
            -moz-box-shadow:0 0 10px #777;
            -webkit-box-shadow:0 0 10px #777;
            box-shadow:0 0 10px #777;
            /* vertical and horizontal alignment used for preloader text */
            line-height:400px;
            text-align:center;
            }

  2. #2
    Administrador CCTW Webmaster de CCTWHabitante Avatar de Jorgens_CCTW
    Fecha de Ingreso
    30 ene, 11
    Ubicación
    Cartagena, Murcia, España.
    Mensajes
    1,188
    Poder de Reputación
    10
    El primero en la cabecera de la página en la que quieras usar ese código.

    Lo segundo dentro del body. Es el enlace con el elemento al que se le va a aplicar el efecto.

    Lo tercero en la hoja de estilos CSS, que según el código de la primera parte se llama

    default.css

    Creo que aún te faltan dos archivos

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

    el jquery.js que es la libreria de siempre, y easyzoom.js que no tengo ni idea de lo que lleva dentro, je je je


    Un abrazo!

  3. #3
    Recien Llegado! Habitual
    Fecha de Ingreso
    07 dic, 11
    Mensajes
    14
    Poder de Reputación
    9

    Creo que lo has sacado de aquí

    http://cssglobe.com/post/9711/jquery...asy-image-zoom (creo que este es el original)

    http://www.martiniglesias.eu/blog/ea...1#.Tt9RyLKAq0s (aquí en el idioma de Cervantes )


    .

  4. #4
    Me va gustando esto... Habitante Avatar de Npra
    Fecha de Ingreso
    15 oct, 11
    Ubicación
    Galicia
    Mensajes
    83
    Poder de Reputación
    9
    Si si,este es. Gracias!!

  5. #5
    Me va gustando esto... Habitante Avatar de Npra
    Fecha de Ingreso
    15 oct, 11
    Ubicación
    Galicia
    Mensajes
    83
    Poder de Reputación
    9
    Pues ya lo tengo colocado y configurado. Queda muy bien.

  6. #6
    Me va gustando esto... Habitante Avatar de Npra
    Fecha de Ingreso
    15 oct, 11
    Ubicación
    Galicia
    Mensajes
    83
    Poder de Reputación
    9
    Retomo este hilo a ver si se puede mejora aun mas algo que ya está bien.

    El zoom de las imagenes sale bien. Pero depende de la resolución del monitor del usuario sale mas a la derecha o a la izquierda.
    La distancia la tengo con respecto a la parte de arriba e izquierda,asi:

    Código:
    #easy_zoom {
    width : 380px;
    height : 480px;
    border : 5px solid #eee;
    background : #fff;
    color : #333;
    position : absolute;
    top : 130px;
    left : 500px;
    overflow : hidden;
    Me gustaria que siempre quedase pegada al borde derecho de la web, independientemente de la pantalla o montor.

    http://www.pipilotta.es/colecciones/...sves/v104.html

    Que me aconsejais?
    Gracias anticipadas.
    Web de ropa a medida. Moda y complementos http://www.pipilotta.es

  7. #7
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    08 dic, 08
    Mensajes
    753
    Poder de Reputación
    17
    No se si te he entendido bien, pero si lo que quieres es que queden pegadas al lado derecho, cambia en el codigo el left:500px por right:0px

  8. #8
    Me va gustando esto... Habitante Avatar de Npra
    Fecha de Ingreso
    15 oct, 11
    Ubicación
    Galicia
    Mensajes
    83
    Poder de Reputación
    9
    No me he explicado bien. Es que depende de la resolución a veces sale fuera de los límites de la web. Decía a la derecha, pero dentro de la web. En este rato he estado investigando. Si la web es de 800 px centrados y el ancho de la ventana del zoom es de 380px hay que formlular de manera que sea "ancho de pantalla/2 y que el borde derecho del zoom coincida con el borde derecho de la web.

    Complicado para mi pero sencillo para vosotros, seguro!! Aun así sigo leyendo sobre el tema.
    Web de ropa a medida. Moda y complementos http://www.pipilotta.es

  9. #9
    Moderador CCTW Habitante Avatar de johnpeterjp
    Fecha de Ingreso
    13 abr, 06
    Ubicación
    Santiago de Chile
    Mensajes
    3,181
    Poder de Reputación
    32
    Hola, solo tienes que sumar y restar pixeles, es sencillo. Felicitaciones por la web y la colección... Esta muy linda. Saludos y suerte.
    "Conocimiento es necesidad, necesidad es conocer lo que necesitamos"


  10. #10
    Me va gustando esto... Habitante Avatar de Npra
    Fecha de Ingreso
    15 oct, 11
    Ubicación
    Galicia
    Mensajes
    83
    Poder de Reputación
    9
    Cita Iniciado por johnpeterjp Ver Mensaje
    Esta muy linda.
    Muchas gracias. El 95% de la web ha sido con toda vuestra ayuda.
    En ella tengo un apartado de Webs amigas y agradecimientos. Estareis ahi presentes,no tengas duda

    Por lo de situar el zoom, aun no he dado con la solución. Seguiré prueba-error como decis vosotros. Si veo que no hay manera volveré a preguntar.
    Web de ropa a medida. Moda y complementos http://www.pipilotta.es

Temas Similares

  1. Donde consigo estos códigos PHP¿?
    Por ulove-tech en el foro Php Bases de Datos y MySQL (Nuevo!)
    Respuestas: 2
    Último Mensaje: 11/02/2008, 17:27
  2. No se donde pegar los codigos de las lecciones...
    Por javi en el foro Foro General
    Respuestas: 2
    Último Mensaje: 11/07/2007, 09:48

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •