jQuery를 사용하여 웹 페이지 중앙에 전체 크기 이미지를 추가하는 방법은 무엇입니까?

Question

내 사이트 설정 방법은 사용자의 화면 해상도에 따라 크기가 조정 된 축소판 그리드가 있고 그 안에 스크롤 메커니즘이 있습니다. 내가 추가하려고하는 또 다른 기능은 미리보기 이미지를 클릭하고 클릭 한 이미지를 전체 크기 (또는 화면을 벗어나지 않고 가능한 한 최대 크기에 가깝게)의 가운데에 나타낼 수있는 기능입니다. 검은 투명 오버레이. 이 플러그인이 있다는 것을 알지만, 배우고 익숙하게하기 위해 자신 만의 플러그인을 시도하고 있습니다.

여기까지 제가 지금까지 가지고 있습니다.

$('a.cell').click(function() { 
     $('<div id = "overlay" />').appendTo('body').fadeIn("slow"); 
     var src = $('img', this).attr("src");   
    }); 

이 기능이 잘 수행하는 전체 페이지에 오버레이를 적용하고 사용자가 클릭 썸네일에서 이미지의 경로를 검색하기위한 것입니다. 미리보기 이미지는 'img'태그이며 'cell'클래스의 'a'태그의 하위 태그이며 크기는 100x100이고 'src'는 실제 이미지의 경로입니다. 별도의 미리보기 이미지 나 크기 조정/리샘플링 메커니즘이 아직 없지만 나중에 추가 할 계획입니다. 이 부분 후에 나는 다음에 무엇을 써야할지 고집했다. 이미지는 페이지 중앙으로 이동하여 페이드 인하 고 크기가 조정되어 전체 크기이거나 브라우저 경계를 넘지 않고 최대한 가깝게 조정해야합니다. 내가 구현하려고하는 또 다른 중요한 기능은 화면의 중앙에 로딩 애니메이션을 배치하여 이미지가 표시 될 준비가 될 때까지 머무르며 더 이상 필요하지 않을 때 사라지게하는 것입니다.

Answer 1

이렇게하는 방법을 배우고 싶으므로 여기에 비교적 간단한 예가 나와 있습니다. 코드는 아래에 있으며 this pastebin에 게시됩니다.

참고 : 스크립트는 미리보기 이미지와 풀 사이즈 이미지가 동일하다고 가정합니다. 크기가 다른 경우 이미지 rel의 전체 크기 이미지 URL을 저장할 수 있습니다. 그럼 그냥이에 popupImage의 SRC를 변경 : $(this).find('img').attr('rel')

CSS

#overlay { 
position: absolute; 
left: 0; 
top: 0; 
height: 100%; 
width: 100%; 
background: #000; 
opacity: 0.8; 
filter: alpha(opacity=80); 
} 
#popupImage { 
position: absolute; 
left: -99999px; 
top: 0; 
} 

HTML 예

<a class="cell"><img src="http://i47.tinypic.com/2m2c36v.jpg" width="30" /></a> 

스크립트

$(document).ready(function(){ 
$('a.cell').click(function(){ 

    // Add overlay 
    $('<div id="overlay" />') 
    .hide() 
    .appendTo('body') 
    .fadeIn('slow'); 

    // Add image & center 
    $('<img id="popupImage" src="' + $(this).find('img').attr('src') + '">').appendTo('body'); 
    var img = $('#popupImage'); 
    var imgTop = ($(window).height() - img.height())/2; 
    var imgLft = ($(window).width() - img.width())/2; 
    img 
    .hide() 
    .css({ top: imgTop, left: imgLft }) 
    .fadeIn('slow'); 

    // Add click functionality to hide everything 
    $('#overlay,#popupImage').click(function(){ 
    $('#overlay,#popupImage').fadeOut('slow',function(){ 
    $(this).remove(); 
    $('#overlay').remove(); 
    }); 
    }) 
}); 
}) 

Answer 2

나는 lightBox 플러그인이 당신이 찾고있는 것을 정확히 제공한다고 믿습니다.

Answer 3

는

@ 마이크 나는 라이트 같은 플러그인의 톤 있기 때문에 즉, 취향의 문제라고 생각.

개인적으로 [http://fancybox.net/ fancybox]가 더 가볍기 때문에 (적어도 생각해보십시오.) 똑같은 것을 권장합니다.

Answer 4

http://johnpolacek.github.io/imagefill.js/이 또한 좋은 방법입니다. 시체뿐만 아니라 모든 이미지를 모든 div 컨테이너에 중앙에서 채울 수 있습니다.