Jquery从jQuery错误中的缩略图放大图像答案

【问题标题】：Jquery enlarge image from thumbnail in jQuery errorJquery从jQuery错误中的缩略图放大图像
【发布时间】：2013-04-30 20:16:34
【问题描述】：

我正在尝试复制一个 jquery 插件的示例，该插件在我的桌面上从缩略图中放大图像，问题是，每当我点击它时，图像都不会从缩略图中放大

这是 jquery 演示的原始来源，它放大了我试图复制的缩略图中的图像 How to enlarge image from thumbnail in 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

【问题讨论】：

你有没有运行这段代码的小提琴或垃圾箱？
@NuclearGhost 我之前在小提琴上实现时遇到了困难，但是，如果你看一下这里的例子 jsbin.com/egevij/3/edit ，我所做的就是剪切 javascript 并将其放在它所说的区域 - jQuery——。我不明白为什么它不起作用
我刚刚将您的代码从这里复制并粘贴到了一个垃圾箱中，它对我来说很好......jsbin.com/onimoc/1/edit
@NuclearGhost 如果您删除。它仍然可以工作。如果你在真实的演示中看到，我认为 jsbin 会自动读取 javascript。 jsbin.com/egevij/3/edit 。这家伙没有显示他在他的 html 中插入 javascript 代码的位置
是的，jsbin 会自动读取该 javascript。所以你的 javasciprt 存在于一个名为 trouble.js 的文件中，它与你的 html 页面位于同一目录中？

标签： javascript jquery

【解决方案1】：

您的问题的解决方案是简单地移动 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> 是不正常的，但我以前从未见过它有这样的不良影响。

【讨论】：

@Jacob 我建议阅读有关包含外部脚本文件的信息。我不建议在两个位置都包含它