Lightbox 2를 페이지 중앙에 정렬하는 방법은 무엇입니까?

Question

나는 갤러리에서 일하고있다. 라이트 박스 갤러리가 가운데보다 화면 위쪽으로 약간 더 나오는 것을 제외하고는 모든 것이 잘 작동합니다.

라이트 소스 : http://lokeshdhakar.com/projects/lightbox2/

그것은 동적으로 화면의 중앙에 오버레이를 배치해야하지만 어떤 이유로 내 경우에 그렇게 아니에요.

<div id="lightbox" style="display: block; top: 189.4px; left: 0px;"> 

두 번째 질문 : 내가 코드를 디버깅 할 때이 같은 주요 라이트 박스 컨테이너 속성을 보여줍니다 나는 또한 지금 라이트 박스에 사진에 대한 설명을 추가 할 수 있습니다 그것은 단지 사진의 제목을 보여주는 방법. 사실 사진의 설명과 날짜를 추가해야합니다.

그냥 좀 더 분명 내가 내 화면에 보이는 방법을 보여 스크린 샷을 추가하고 만들려면!

[여기 이미지 설명을 입력합니다] [1]이 화면에서

샷이 분명하다 Lightbox는 75 픽셀부터 시작하여 화면 중간에서 이미지가 수직으로 정렬되지 않습니다.

Answer 1

동일한 문제가 발생했습니다. 수직 정렬은 화면 높이에 의해 결정되지만 이미지 크기는 고려하지 않습니다. 내 문제는 세로 모드에서 찍은 사진이 페이지에서 넘쳐 흐르므로 모든 이미지를 위로 이동시키기 위해 라이트 박스 코드를 수정하기로 결정했습니다. 미리 모든 이미지의 크기가 동일하다는 것을 안다면 이론적으로이 값을 원하는 값으로 변경할 수 있습니다 (직접 계산해야합니다.) 라이트 박스 내에서이 코드 섹션을 찾으십시오 . JS 다음, 라이트의 CSS 파일에, 또는 그에 따라

o=f.scrollTop()+f.height()/10;n=f.scrollLeft();this.$lightbox.css({top:o+'px',left:n+'px'} 

을 수정 .lightbox을 찾아서 추가합니다.

top: 0px !important; 

당신이 계산대로에 0 픽셀 값을 수정

으로 lig에 설명을 추가한다. htbox에서 <img> 태그의 alt 속성을 설정합니다.