jquery从jQuery错误中的缩略图放大图像

我想复制一个jQuery插件的例子，它从我的桌面上的缩略图放大图像，问题是，图像不会从缩略图放大，每当我点击它时jquery从jQuery错误中的缩略图放大图像

这里是jQuery的演示的原始来源，从缩略图放大的图像，我试图复制 How to enlarge image from thumbnail in jQuery?

的问题是在我的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

来源

2013-04-30 donkeyboy72

你有一个小提琴或箱子在里面运行这个代码吗？ – 2013-04-30 20:32:21

@NuclearGhost我很难在小提琴上实现它，但是，如果你看看这里的例子http://jsbin.com/egevij/3/edit，我所做的只是剪掉javascript并将它放在它所在的区域说--jquery - 。我不明白为什么它不起作用 – donkeyboy72 2013-04-30 20:34:29

我刚刚从这里复制并粘贴你的代码到一个bin中，它对我来说工作正常...... http://jsbin.com/onimoc/1/edit – 2013-04-30 20:38:59

该解决方案为y我们的问题只是移动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>）中放置脚本标记是不正常的，但我从来没有看到它有这样的不良影响。

来源

2013-04-30 20:59:28

谢谢核电鬼魂 – donkeyboy72 2013-04-30 21:07:23

我确实把它也放在脑袋里，但它没有工作 – donkeyboy72 2013-04-30 21:07:42

@Jacob我会推荐阅读关于包含外部脚本文件的内容。我不建议将它包含在两个位置 – 2013-04-30 21:36:45

jquery从jQuery错误中的缩略图放大图像

回答

相关问题