WordPress 사진 라이트박스 effect_jquery를 사용하는 방법

귀하의 웹사이트에서 라이트박스와 같은 효과를 이미 사용해 본 적이 있거나 다음 응용 프로그램 경험이 귀하에게 적합할 수 있습니다(단, JQuery를 사용하여 구현된 경우).
1. 라이트박스 효과를 사용할 조건을 지정하세요
웹사이트의 js 파일에 다음 명령문을 추가하세요.

링크에 "rel=lightbox"를 추가한 후에만 결정됩니다. , 링크에 라이트박스 효과가 적용됩니다. 두 번째 줄의 '.gallery a'는 WordPress의 기본 사진 앨범용입니다. 이 문장을 추가하면 앨범의 사진에도 라이트박스 효과가 적용됩니다.
2. rel=lightbox 속성 자동 추가
위 정의에서 "rel=lightbox"가 포함된 링크만 유효하므로 일반적으로 업로드된 각 이미지를 수동으로 추가해야 합니다. "rel=라이트박스". 하지만 이것은 번거로운 일인 것 같습니다. 링크가 포함된 사진을 자동으로 추가하도록 할 수 있습니다.
먼저 그림이 포함된 각 p 단락에 자동으로 스타일을 추가합니다.
$("#content p:has(img)").addClass("imgbg")
예를 들어 위 문장은 다음과 같습니다. #content 영역에 문단에 img가 있는 한 스타일이 지정되지 않은 원래 p 문단이

가 되도록 "imgbg" 스타일을 추가한 다음 자동으로 추가합니다.

의 링크에 대한 "rel=lightbox" 속성:

이후 위의 두 단계를 거치면 텍스트에 링크가 포함된 모든 그림이 자동으로 라이트박스 효과를 구현합니다.

3. 라이트박스 선택적으로 로드
사이트 전체에 라이트박스 효과를 로드할 필요는 없습니다. 일반적으로 우리는 이 효과를 별도의 기사 페이지에만 사용합니다. 따라서 라이트박스의 js 코드를 분리하여 WordPress의 header.php에 다음과 같이 설정할 수 있습니다.
한 단계 더 나아가세요. 기사에 사진만 추가하려는 경우 이 효과를 구현하려면 "사진" 태그가 지정된 기사에 대해 라이트박스를 로드하면 됩니다.