jQuery从jQuery错误中的缩略图放大图像 [英] Jquery enlarge image from thumbnail in jQuery error
问题描述
我正在尝试复制一个jquery插件的示例，该插件在我的桌面上从缩略图中放大图像，问题是，每次单击缩略图时图像都不会从缩略图中放大
I'm trying to replicate an example of an jquery plugin that enlarges image from thumbnail at my desktop and the problem is , the image doesn't enlarge from the thumbnail whenever I click on it
这是jquery演示的原始来源，该演示从我尝试复制的缩略图中放大图像 如何在jQuery中从缩略图中放大图像?
Here is the original source of the jquery demo that enlarges image from thumbnail that i'm trying to replicate How to enlarge image from thumbnail in jQuery?
这是他的工作演示 http://jsbin.com/egevij/3/edit
问题出在我的HTML中.有人可以指出我要去哪里了吗?
The problem is in my HTML .Can someone please point where I'm going wrong?
这是我的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
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>标签之后.
The solution to your problem is simply moving the import of the JavaScript file. It should be placed at the end after your two <img> tags.
<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>)中是不正常的，但我之前从未见过它会产生这种不良影响.
It's standard practice to load your javascript files either last in the head or last in the body. Putting script tags inside of other html tags such as <div> as you have done is not normal but I've never seen it have ill effects like this before.
这篇关于jQuery从jQuery错误中的缩略图放大图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
