如何从缩略图放大图片的jQuery的？ [英] How to enlarge image from thumbnail in jQuery?

问题描述

在我的网站上有小的缩略图（t1.jpg，t2.jpg，t3.jpg，...）名单，我想创建code，在中心的对话框将显示图像的全尺寸的版本。如何做到这一点？

On my website there is a list of small thumbnails ("t1.jpg", "t2.jpg", "t3.jpg",...) and I want to create code that in centered dialog box will show a full-size version of the image. How to do this?

例如，当我点击t1.jpg我想在中心框中看到big1.jpg图像。动态。我不希望加载页面时加载的所有图像。它必须是良好的性能。

For example when I click on t1.jpg I want to see in centered box a big1.jpg image. Dynamically. I don't want to load all images when the page is loading. It must be good performance for that.

任何人都可以给我一些建议吗？谢谢你。

Anyone can give me some advice? Thanks.

推荐答案

我创建了一个很好的例子：

I created a nice example:

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

HTML：

<div id="jQ_popup_window">
    <div id="jQ_popup" class="shadow radius">
        <div id="jQ_popup_close"></div> 
        <!-- jQuery -->
    </div>
</div>


<img src="thumb1.jpg" data-full="big1.jpg" alt="" />

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的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！