放大图片从缩略图在Jquery错误
Jquery enlarge image from thumbnail in jQuery error
我试图复制一个jquery插件的例子,放大图像从缩略图在我的桌面的问题是,图像不放大从缩略图每当我点击它
这是jquery演示的原始来源,放大图像从缩略图,我试图复制如何放大图像从缩略图在jQuery?
这是他的工作演示http://jsbin.com/egevij/3/edit
问题是在我的HTML。有人能指出我错了吗?
这是我的HTML<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="css/forms.css">
<meta charset=utf-8 />
<title>Demo by roXon</title>
</head>
<body>
<div id="jQ_popup_window">
<div id="jQ_popup" class="shadow radius">
<div id="jQ_popup_close"></div>
<script type = "text/javascript" src ="trouble.js"></script>
</div>
</div>
<img src="http://placehold.it/250x150/cf5" data-full="http://placehold.it/860x590/cf5" alt="" />
<img src="http://placehold.it/250x150/fof" data-full="http://placehold.it/860x590/fof" alt="" />
</body>
</html>
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');
$('<img>', {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文件的导入。它应该放在两个<img>
标签的末尾。
<img src="http://placehold.it/250x150/cf5" data-full="http://placehold.it/860x590/cf5" alt="" />
<img src="http://placehold.it/250x150/fof" data-full="http://placehold.it/860x590/fof" alt="" />
<script type = "text/javascript" src ="trouble.js"></script>
这是标准的做法加载你的javascript文件要么最后在头部或最后在正文。将脚本标签放在其他html标签(如<div>
)中是不正常的,但我从未见过这样的不良影响。
相关文章:
- 将菜单项与滚动绑定时出现Jquery错误
- 试图获取表单时出现Jquery错误
- 任何人都知道IE7设置或更新/补丁,它可以防止IE因为jquery错误而无法加载页面
- 组中需要Jquery错误位置
- IE9中的Jquery错误
- 使用下拉菜单排除jquery错误
- 在文本区域检查电子邮件数据时出现奇怪的jquery错误
- 扩展对象导致jQuery错误
- 一个经典的jQuery错误 - 未捕获的类型错误:未定义不是一个函数
- 使用ng-include时发生Angular.js jQuery错误
- JQuery 错误 -- 减慢在浏览器中查看错误的操作速度
- 在页面上获取网格数据之前出现 jQuery 错误
- 如何修复我的 JQuery 错误
- jQuery 错误 SCRIPT5002:IE9 64 位中预期的函数
- jQuery错误地导致悬停
- 未定义获取 jquery 错误 $
- 将 jQuery 错误处理添加到列表、网格内的 JSF 页面上的所有图像
- 未捕获的错误:信号器 jquery 错误
- JQuery 错误的脚本顺序
- 当展开点击 li 的 ul 事件时,JS JQUERY 错误不起作用