I checked this link of SO : Pop Images like Google Images
And tried to setup the image hover effect.
Everything worked fine when i tested it in here
// ibox image zoomer plugin // roXon
(function($) {
$.fn.ibox = function() {
// set zoom ratio //
resize = 20;
////////////////////
var img = this;
img.parent().append('<div id="ibox" />');
var ibox = $('#ibox');
var elX = 0;
var elY = 0;
img.each(function() {
var el = $(this);
el.mouseenter(function() {
ibox.html('');
var elH = el.height();
elX = el.position().left - 6; // 6 = CSS#ibox padding+border
elY = el.position().top - 6;
var h = el.height();
var w = el.width();
var wh;
checkwh = (h < w) ? (wh = (w / h * resize) / 2) : (wh = (w * resize / h) / 2);
$(this).clone().prependTo(ibox);
ibox.css({
top: elY + 'px',
left: elX + 'px'
});
ibox.stop().fadeTo(200, 1, function() {
$(this).animate({top: '-='+(resize/2), left:'-='+wh},400).children('img').animate({height:'+='+resize},400);
});
});
ibox.mouseleave(function() {
ibox.html('').hide();
});
});
};
})(jQuery);
$(document).ready(function() {
$('.item').ibox();
});
But when i added it to my site, I get the following error
Uncaught TypeError: Property '$' of object [object Window] is not a function
$('.hovermore').ibox();
I guess its because of other jquery effects in the site.
Is there any way to solve this?
尝试使用以下代码启动代码:
jQuery(document).ready(function ($) {
那是因为您忘记加载jQuery了:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
Have you included jQuery on your page before calling $('.hovermore').ibox();
?
Also, I don't think it should matter, but also make sure you're using the latest version of jQuery.
Can you post a link to the page where it doesn't work so we can see all of the code?
You forgot to include the jQuery library.
Visit this demo, go to SAVE -> DOWNLOAD and look at the downloaded file.
http://jsbin.com/ifefop/edit#javascript,html,live
Your document should have:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
And if you placed the script in an external file:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/ibox.js"></script>
Please try
jQuery(document).ready(function($) {
$('.item').ibox();
});
or
jQuery(document).ready(function() {
jQuery('.item').ibox();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.