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' />";
}
?>
Código:
y aqui el JS<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>
Código:
Este ejemplo lo baje de la pagina http://www.ajaxshake.com/ y http://www.dailycoding.com/ /*
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 + "'> </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);
