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.

<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>

<p><a href="large.jpg" class="zoom"><img src="small.jpg" alt="Mercedes GP"></a></p>

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;
        }

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!

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

http://www.martiniglesias.eu/blog/easy-zoom-ampliar-fotos-con-clase… (aquí en el idioma de Cervantes )


.

Si si,este es. Gracias!! :wink:

Pues ya lo tengo colocado y configurado. Queda muy bien.

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:

#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/vestidos/modelosves/v104.html

Que me aconsejais?
Gracias anticipadas.

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

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.

Hola, solo tienes que sumar y restar pixeles, es sencillo. Felicitaciones por la web y la colección... Esta muy linda. Saludos y suerte.

Moderación escribió: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.