복잡한 이미지 설명_javascript 기술을 지원하도록 라이트박스 JS 이미지 컨트롤이 수정되었습니다.-JS 튜토리얼-php.cn

복잡한 이미지 설명_javascript 기술을 지원하도록 라이트박스 JS 이미지 컨트롤이 수정되었습니다.

WBOY

풀어 주다： 2016-05-16 18:32:00

원래의

848명이 탐색했습니다.

수정된 라이트박스 버전은 2.04입니다.
라이트박스를 사용하여 이미지를 표시할 때 사용하는 기본 설정은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. :

　콘텐츠
🎜>
주로 연결에 rel="lightbox" 속성을 추가합니다

위 테스트로 연결이 설정되면 연결을 클릭하면 라이트박스에 연결에 대한 그림이 표시되고 제목이 사용됩니다. 연결의 속성을 그림 설명으로 사용합니다. 그림에 대한 자세한 설명을 추가하고 글꼴 크기, 색상 등과 같은 그림 설명에 대한 일부 형식을 설정하려는 경우에는 사용할 수 없습니다. 설명 정보를 설정하는 title 속성입니다.
고객님께서 이 기능을 꼭 갖고 계시기 때문에, 라이트박스의 소스코드를 확인하여 이러한 요구에 맞게 수정이 가능한지 확인해야 했습니다. 다행히 라이트박스의 메인 코드 크기가 그리 크지 않아 수정이 가능합니다. 제가 JS 프레임워크 프로토타입.js에 익숙하지 않기 때문에 약간만 수정하면 이러한 요구 사항을 충족할 수 있습니다.
수정 과정은 다음과 같습니다.
lightbox.js 파일을 엽니다. 원래 218줄의 코드는 다음과 같습니다.
this.imageArray.push([imageLink.href, imageLink.title]); >여기서는 연결 개체의 제목 속성을 직접 읽고 있으므로 imageLink.title만 변경하면 됩니다.
this.imageArray.push([imageLink.href, document.getElementById(imageLink.contentId). innerHTML ]);

imageLink.title을 document.getElementById(imageLink.contentId).innerHTML로 변경했습니다.
이 문장에서 볼 수 있듯이 연결 개체에 대한 contentId 속성을 설정해야 합니다. attribute 값은 특정 DOM 요소의 ID 번호이고, 그림에 대한 설명은 이 요소의 내용입니다.
수정 후 HTML에서 다음과 같이 이미지 설명을 설정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

　콘텐츠