Jquery在jQuery错误中放大缩略图
我正在尝试复制一个jquery插件的示例,该插件可以放大桌面缩略图中的图像,问题是,每当我点击它时图像都不会从缩略图中放大
这是jquery演示的原始来源,它从我想要复制的缩略图放大图像如何从jQuery缩略图放大图像?
这是他的工作演示http://jsbin.com/egevij/3/edit
问题出在我的HTML中。有人请指出我哪里出错了吗?
这是我的HTML
Demo by roXon
forms.css CSS
CSS:
/* === POPUP WINDOW === */ #jQ_popup_window{ background: rgba(0,0,0,0.6); left: 0; margin-left: -9000px; position: absolute; top: 0; width: 100%; z-index:999999; } #jQ_popup { background: #000; border: 1px solid #BDB9B8; margin: 30px auto; padding: 25px; position: relative; width: 600px; /* SET HERE DESIRED W .*/ } #jQ_popup_close { background:#fff; cursor: pointer; height: 28px; width: 28px; position: absolute; z-index:999999; right: 10px; top: 10px; -webkit-border-radius:30px; border-radius:30px; border:2px solid #fff; border-color: rgba(255,255,255,0.2); } #jQ_popup_close:hover{ background:#f00; } /* #POPUP WINDOW */
jQuery的:
// POPUP WINDOW: var scrT = $(window).scrollTop(); $(window).scroll(function(){ scrT = $(window).scrollTop(); }); // GET and use WINDOW HEIGHT // $.getDocHeight = function(){ var D = document; return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight)); }; // POPUP WINDOW (lightbox for video and other) // GET WINDOW SCROLLtop OFFSET $('[data-full]').on('click', function(e){ e.preventDefault(); $('#jQ_popup').css({ top: scrT+15 }).find('img').remove(); $('#jQ_popup_window').height($.getDocHeight).fadeTo(0,0).css({ marginLeft:0 }).fadeTo(600,1); var imgToLoad = $(this).data('full'); $('', {src:imgToLoad, width:'100%'}).appendTo('#jQ_popup'); }); // close popup $('#jQ_popup_close, #jQ_popup_window').on('click', function(){ $('#jQ_popup_window').fadeTo(600,0,function(){ $(this).hide(); }); }); $('#jQ_popup').on('click', function(ev){ ev.stopPropagation(); }); // end POPUP WINDOW
您的问题的解决方案只是移动JavaScript文件的导入。 它应放在两个标签后的末尾。
标准做法是将javascript文件加载到头部最后或最后加载到正文中。 将脚本标签放在其他html标签(如
)中并不正常,但我以前从未见过它会产生这样的不良影响。