Duplicacion del la imagen efecto lupa o zoom

[Hugo_Euan]

Iniciado por Anna Carolina

Buenas, observando el comportamiento de la lupa que coloque en una pagina sobre las imagenes principales de cada producto, resulta que cuando paso por encima de la imagen se queda una imagen de la lupa duplicada pero estatica.

A continuacion el codigo que tengo, ojo esta mezclado con PHP y JavaScript y llama al archivo JS.

Todo lo que este a continuacion es de un mismo archivo plantilla_detalle.php

Código:

<script src="jquery.js" type="text/javascript"></script>
	<script src="jquery.imageLens.js" type="text/javascript"></script>
	<script type="text/javascript" language="javascript">
		$(function () {
			$("#img_01").imageLens();
					});	
	</script>

Código PHP:

  <?php
 
    if(file_exists($_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/1-" . $data_id . ".jpg")) {
 
    
        echo "<a href='/proyectocrossh/img/productos/1-" . $data_id . ".jpg' title='" . $data_titulo  . "'><img id='img_01' src='/proyectocrossh/img/productos/1-" . $data_id . ".jpg' alt='" . $data_titulo . "' border='0' width='360' height='361' /></a>";
        
    }
    else
    {
        echo "<img src='/proyectocrossh/img/trans.gif' alt='" . $data_titulo . "' border='0' width='360' height='361' />";
    }
    
?>   

solo queria saber donde puedo colocar este codigo, que en el ejemplo lo colocan en el final del documento a diferencia de que mi archivo .php no tiene ni el encabezado html, head, body en estos casos como se pone ,

Código:

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>	
<script type="text/javascript">	
try{var pageTracker = _gat._getTracker("UA-2030729-5");
pageTracker._initData();
pageTracker._trackPageview();}catch(ex){}
</script>

y aqui el JS

Código:

/*  
    http://www.dailycoding.com/ 
*/
(function ($) {
    $.fn.imageLens = function (options) {

        var defaults = {
            lensSize: 180,
            borderSize: 1,
            borderColor: "#888"
			
        };
        var options = $.extend(defaults, options);
        var lensStyle = "background-position: 0px 0px;width: " + String(options.lensSize) + "px;height: " + String(options.lensSize)
            + "px;float: left;display: none;border-radius: " + String(options.lensSize / 2 + options.borderSize)
            + "px;border: " + String(options.borderSize) + "px solid " + options.borderColor 
            + ";background-repeat: no-repeat;position: fixed;";

        return this.each(function () {
            obj = $(this);

            var offset = $(this).offset();

            // Creating lens
            var target = $("<div style='" + lensStyle + "' class='" + options.lensCss + "'>&nbsp;</div>").appendTo($(this).parent());
            var targetSize = target.size();

            // Calculating actual size of image
            var imageSrc = options.imageSrc ? options.imageSrc : $(this).attr("src");
            var imageTag = "<img style='display:none;' src='" + imageSrc + "' />";

            var widthRatio = 0;
            var heightRatio = 0;

            $(imageTag).load(function () {
                widthRatio = $(this).width() / obj.width();
                heightRatio = $(this).height() / obj.height();
            }).appendTo($(this).parent());

            target.css({ backgroundImage: "url('" + imageSrc + "')" });

            target.mousemove(setPosition);
            $(this).mousemove(setPosition);

            function setPosition(e) {

                var leftPos = parseInt(e.pageX - offset.left);
                var topPos = parseInt(e.pageY - offset.top);

                if (leftPos < 0 || topPos < 0 || leftPos > obj.width() || topPos > obj.height()) {
                    target.hide();
                }
                else {
                    target.show();

                    leftPos = String(((e.pageX - offset.left) * widthRatio - target.width() / 2) * (-1));
                    topPos = String(((e.pageY - offset.top) * heightRatio - target.height() / 2) * (-1));
                    target.css({ backgroundPosition: leftPos + 'px ' + topPos + 'px' });

                    leftPos = String(e.pageX - target.width() / 2);
                    topPos = String(e.pageY - target.height() / 2);
                    target.css({ left: leftPos + 'px', top: topPos + 'px' });
                }
            }
        });
    };
})(jQuery);

Este ejemplo lo baje de la pagina [url]http://www.ajaxshake.com/[/url] y [url]http://www.dailycoding.com/[/url]

Hola Srita. Carolina....

Bueno respecto a lo de tu efecto de zoom que quieres hacer podrias intenterlo con este pluggin, veo que utilizas JQuwey, por lo cual no creo que te sea de mucha dificultad implementarlo.

http://demo.tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/demo.html

Espero que te sea de Utilidad...

SALUDOS y EXITO !!!