워드프레스 라이트박스 클론 플러그인 26선

페이지 이동 없이 현재창에서 링크된 이미지를 클릭해서 확인할 수 있는 플러그인을 찾아봤습니다. 링크된 이미지를 현재창에서 보여주는 것에 초점을 맞추었기 때문에 아래 목록에는 정확히 라이트박스 클론이라고 볼 수 없는 플러그인도 있습니다.

플러그인 출시일이 많이 차이나지 않는 경우에는 대체로 많이 내려받기된 플러그인이 쓰기에 무난한 것 같습니다. 블로그에 적용할 플러그인을 찾고 계시다면 동영상 링크에도 적용할 것인지, 워드프레스 기본 이미지 갤러리에 주로 사용할 것인지 등의 사용 목적을 고려해 내려받기된 횟수와 최근 판올림된 일자, 실제 플러그인을 적용한 블로그를 둘러보고 판단하세요.

제가 보기에는 이름에 라이트박스가 붙은 플러그인이 무난했습니다. 그 외에 눈에 띄었던 플러그인은 조금 무겁긴한 듯 하지만 FloatBox Plus와 ThickBox 인데요. ThickBox는 딕바스를 사용할 때에만 필요한 스크립트와 CSS 파일을 불러오도록 쉽게 설정할 수 있는 점이 마음에 들었고, FloatBox Plus는 조금 무거운 듯 하지만 플롯박스의 깔끔한 디자인과 동영상 이용이 조금 간편한 점이 마음에 들었습니다. FloatBox Plus는 또 소개한 플러그인 중 유일하게 라이센스 키를 개발자에게 요청해야되는데요. 상업적인 목적으로 운영하는 곳이 아니면 이메일로 요청하면 무료 라이센스 키를 쉽게 받으실 수 있으실텝니다. 아래 목록에 있는 플러그인 중 몇몇은 다음에 자세히 소개하도록 하겠으며, 빠진 플러그인은 차후에 추가하겠습니다.

아래 설명에서 워드프레스 갤러리라하면 글에 이미지 갤러리를 삽입할 때 Link thumbnails to 설정을  Attachment Page가 아닌 Image File을 선택한 경우를 말합니다. Attachment Page를 선택한 경우에는 이미지로 링크된 경우가 아니기 때문에 라이트박스가 적용되지 습니다.

Lightbox 2

라이트박스 2 플러그인은 라이트박스 테두리 색을 검은색과 흰색, 회색, 짙은 회색 중에서 택일할 수 있으며, Auto-lightbox images links 기능을 활성화시키면 플러그인이 자동으로 이미지 링크를 감지해 클릭했을 때 라이트박스로 이미지를 보여줍니다. 이 경우 여러 장의 이미지 링크가 한 페이지 내에 있을 때에 자동으로 묶어(이미지 셋) 주기 때문에 이미지 링크마다 매번 라이트박스를 띄울 필요 없이 한 번에 탐색이 가능합니다. 이 기능이 활성화되어 있을 때에는 워드프레스 이미지 갤러리에도 자동으로 라이트박스가 적용됩니다.

‘Auto-lightbox image links’ 기능(Settings > Lightbox)을 사용하지 않을 때에는 포스트에 삽입한 이미지를 더블클릭하면 뜨는 창에서 Advanced Settings의 Link rel 칸에 lightbox라고 기입해주시면 됩니다. 여러개의 이미지를 엮어서 한 번에 탐색할 수 있도록 할 경우에는 rel 값을 lightbox-gallery1처럼 rel 값을 주시면 됩니다.  [위로 ↑]

Lightbox Plus

라이트박스 스타일을 7가지 중에서 선택할 수 있으며, 이미지 링크를 자동으로 감지해서 rel과 class 속성을 부여해줍니다. Do Not Auto-LightBox Image 옵션(Appearance > Lightbox Plus)에 체크하면 특정한 rel 속성 값을 지정해주거나, Use Class Method 옵션에 체크한 경우에는 특정 클래스로 묶었을 때에만 라이트박스가 적용됩니다.

그룹지정을 하지 않아도 자동으로 한 페이지에 삽입된 그림을 전환하며 보여주며, 이미지 전환 효과도 Elastic과 Fade, None 중에서 택일 할 수 있으며, 이미지 간 전환 속도도 설정할 수 있습니다. 또한 클릭했을 때 보여질 이미지의 크기를 제한할 수 있으며, 라이트박스를 띄웠을 때의 배경 불투명도를 설정할 수 있는 등 다양한 옵션이 있습니다.

위 그림에 라이트박스 스타일을 Framed으로 했을 때입니다. [위로 ↑]

jQuery Lightbox

제이쿼리 라이트박스 플러그인은 별도의 플러그인 옵션이 없습니다. 라이트박스로 이미지 링크를 열리게하려면 앵커 태그에 rel=”lightbox”를 추가해주면 됩니다. 방법은 Lightbox2 플러그인에서 말씀드렸던 이미지의 Advanced Settings에서 Link rel 칸에 lightbox 값을 넣어 주거나 HTML 편집 모드에서 직접 추가해주시면 됩니다.

여러 개의 이미지의 링크 속성에 rel 값을 lightbox-nod 처럼 lightbox 뒤에 슬래시와 임의의 구분기호를 덧붙이면 라이트박스를 한 번 띄워서 같은 rel 값을 가진 이미지 파일을 탐색할 수 있게 됩니다. [위로 ↑]

jQuery Lightbox For Native Galleries

이름에서 알 수 있듯 이 플러그인은 숏코드로 본문에 삽입되는 워드프레스 기본 이미지 갤러리의 썸네일에만 적용되는 라이트박스 플러그인입니다. 글에 워드프레스 이미지 갤러리를 삽입했을 때 썸네일을 클릭하면 라이트박스로 원본 이미지를 보여주며, 갤러리로 삽입한 이미지 전체를 이전/이후 버튼을 이용해 순환하며 볼 수 있습니다.

플러그인은 활성화시키면 별도의 설정과정 없이 블로그에 적용됩니다. [위로 ↑]

Photo LightBox

플러그인 개발자는 자바스크립트 라이브러리를 사용하지 않아 플러그인 파일 크기가 작고, 빨리 로딩된다고 합니다. 플러그인은 활성화 후 별도의 설정 과정이 없으며, 이미지로 링크된 경우 자동으로 인식해 라이트박스로 링크된 이미지를 띄워 보여주며, 라이트박스의 크기는 창 크기에 자동으로 맞추어집니다.

링크에 rel 속성으로 여러 개의 이미지 링크를 묶을 경우 자동으로 전환되거나 수동으로 다음 그림으로 넘겨볼 수 있습니다. 이미지 링크에 rel 속성이 없을 경우에는 개별 이미지 별로 라이트박스를 띄워야하며, 워드프레스의 이미지 갤러리는 숏코드로 삽입되기 때문에 rel 속성이 지정할 수 없어 썸네일을 클릭했을 때 갤러리 전체 이미지를 넘겨 볼 수 있는 게 아니라 개별 이미지를 따로 라이트박스를 띄워봐야합니다.

외부 이미지 파일도 라이트 박스로 띄울 수 있으며, 글자에 이미지로 연결되는 링크를 걸어둔 경우에도 라이트박스로 이미지를 띄워 볼 수 있습니다. 위 그림에서 라이트박스 중앙에 뜬 ‘Kara Photo #1′은 이미지가 아닌 링크에 title=”Kara Photo #1″ 값을 넣어준 것입니다.  [위로 ↑]

Flexible Lightbox

워드프레스 이미지 갤러리에 자동으로 라이트박스가 적용되며, 이미지 삽입할 때 Open using lightbox에 Yes/No 중 택일해서 라이트박스로 링크된 이미지를 열 것인지 일반 창으로 열 것인지 지정할 수 있습니다. 또는 이미지 링크에 class=”lightbox”를 추가해주면 라이트박스로 링크된 이미지를 열어서 보여줍니다. 여러 개의 이미지에 클래스를 지정했을 경우 별도로 그룹 지정을 하지 않아도 같은 클래스를 사용하기 때문에 자동으로 그룹 이미지로 인식하게 됩니다.

플러그인은 활성화 후 별도의 설정과정 없이 곧 바로 블로그에 적용됩니다. [위로 ↑]

LightWindow

자동으로 이미지 링크를 감지해 라이트박스를 적용해주지 않기 때문에 이미지 링크에 class=”lightwindow” 를 추가해주어야 합니다. 라이트윈도우 플러그인은 이미지 링크를 그룹화하지 못하기 때문에 한 페이지 내에 여러 장의 이미지가 있을 때에도 하니씩 열어 봐야됩니다.

하지만 무엇보다 속도가 빠른편이 아니라는 점 때문에 큰 매력은 없습니다. [위로 ↑]

Thickbox

Thickbox와 Smoothbox 두 가지 효과 중 플러그인 설정에서 원하는 효과를 택일 할수 있으며(Settings > ThickBox > Use SmoothBox instead of ThickBox), 인라인 콘텐츠와 iFrame을 이용한 외부 웹사이트 웹페이지를 열 수도 있습니다. 무엇보다 큰 장점은 딕박스가 문서 내에서 사용될 때에만 필요한 스크립트와 CSS를 불러오도록 할 수 있다는 점입니다. 이 기능을 사용하고자 할 때에는 플러그인 설정에서 Expert Mode에 체크한 뒤 딕박스 기능을 사용할 포스트나 페이지에서는 커스텀필드에 thickbox라는 이름으로 커스텀필드를 하나 생성해주면됩니다.

이미지 링크를 자동으로 딕박스로 열어주지 않기 때문에 thickbox 클래스를 지정해 주어야 됩니다. 만약 여러 개의 이미지를 연결해서 볼 수 있도록 묶어 주고 싶다면 rel 속성에 rel=”amplifier”처럼 임의의 값을 넣어 주면됩니다. 스무스박스를 사용할 경우에는 클래스를 thickbox가 아닌 smoothbox로 지정해주면 됩니다.

하지만 키보드를 이용해 연결된 이미지를 탐색할 수 없으며, 숏코드로 삽입되는 워드프레스 갤러리에는 클래스를 지정할 수 없기 때문에 딕박스로 열 수 없습니다. [위로 ↑]

Auto ThickBox

ThickBox가 자동으로 이미지 링크를 딕박스로 열어 주지 못하는 단점을 보완한 것이 Auto ThickBox입니다. 이미지 링크에 클래스나 rel을 지정하지 않아도 자동으로 딕박스가 적용됩니다. 때문에 워드프레스 갤러리에도 적용됩니다. 단, 텍스트에 이미지 링크를 걸어 둔 경우에는 thickbox 클래스를 지정해줘야 됩니다.

수동으로 클래스를 지정하지 않은 이미지 링크의 경우 하나의 갤러리처럼 묶여서 이전/다음 이미지 파일 탐색이 쉬운데요. 만약 몇몇 이미지만 따로 묶고 싶을 때에는 rel을 이용하시면 됩니다. 클래스만 지정하면 외부 웹사이트 등도 딕박스로 열어서 볼 수 있습니다.

이 플러그인은 워드프레스에 내장된 jQuery와 ThickBox 스크립트를 이용하며, 별도의 플러그인 옵션은 없습니다. [위로 ↑]

WP Thickbox Integration

워드프레스 갤러리에 자동으로 적용되며, 일반 이미지를 삽입할 때에는 플러그인을 설치하면 추가되는 이미지 업로더의 Open in the same window에 기본값인 Yes로 두면 자동으로 이미지에 딕박스 클래스가 적용되며, No를 선택할 경우에는 일반 링크처럼 새창에서 이미지가 열리게 됩니다. 일반 텍스트 링크에 딕박스로 열어서 보여주고 싶을 때에는 링크에 class=”thickbox”를 추가해주면 됩니다. 동일한 rel 속성이 적용되기 때문에 자동으로 묶여지게 됩니다.

웹사이트를 iFrame 형태로 열 경우 링크에 thickbox 클래스를 주고, 링크시킬 웹사이트 주소 뒤에 아래에 있는 짧은 코드를 추가해주면 됩니다. width와 height 뒤에 숫자는 창의 크기입니다.

?KeepThis=true&TB_iframe=true&height=400&width=600

플러그인 설정 옵션이 없습니다. [위로 ↑]

ILC Thickbox

이 플러그인은 thickbox 클래스를 사용하며, rel을 이용해 그룹 지정을 하는 것은 동일하지만 조금 다른 면이 있습니다. 일반적인 이미지 업로더를 이용해 링크를 걸어 이미지를 삽입하면 딕박스로 열어 볼 수 있도록 자동으로 클래스와 rel이 지정되지만, 이미지 삽입 후 플러그인을 활성화시키면 추가되는 Add Thickbox to this image 버튼()을 이미지 선택 후 클릭해주면 해당 이미지에 딕박스 효과도 적용될 뿐더러 플러그인 옵션의 CSS에서 설정대로 오른쪽 그림처럼 돋보기 아이콘이있는 썸네일로 표시됩니다. 버튼을 클릭 대신 콘트롤+알트+엑스(Ctrl+Alt+X) 단축키를 이용해 지정할 수도 있습니다.

이 플러그인 역시 워드프레스에 내장된 jQuery와 Thickbox 스크립트를 이용합니다. [위로 ↑]

ILC FLVbox

이 플러그인은 flv 파일 형식의 동영상을 재생시키는 게 주 목적이지만, Thickbox를 이용하기 때문에 이미지 링크에도 이용할 수 있습니다. 동영상 재생에 이용할 경우 플러그인 옵션에서 MiPlayWeb과 OSFLV Player 중 재생기를 택일 할 수 있으며, 동영상과 같은 이름의 Jpg 파일을 이미지 업로더를 통해 계정에 올리면 동영상의 미리보기 이미지로 사용됩니다. 미리보기 이미지에는 재생 버튼이 올려지며, 미리보기 이미지를 클릭했을 때 Modal dialog 사용이 선택되어져 있으면 창을 띄워 재생시켜주고, 선택되어져 있지 않으면 현재 페이지 내에서 재생시켜줍니다.

이미지 링크에 Thickbox를 적용시키기 위해서는 thickbox 클래스를, 여러 이미지 링크를 묶기 위해서는 rel을 사용하며, 플러그인에 내장된 스크립트 하나 외에 워드프레스에 내장된 jQuery와 Thickbox 스크립트를 이용합니다. flv 파일은 2getFLV에서 구했습니다. [위로 ↑]

FancyBox

플러그인 개발자가 맥스타일의 라이트박스라 소개한 팬시박스는 일반 텍스트와 이미지 뿐만 아니라 워드프레스 갤러리 썸네일에 걸린 이미지 링크에도 자동으로 적용되어 링크된 이미지를 팬시박스에서 볼 수 있습니다. 클래스를 달리 설정하지 않는 한 한 페이지 내에 있는 모든 이미지 링크가 엮이게 되기 때문에 팬시박스 내에서 이전/이후 그림을 탐색할 수 있습니다. 워드프레스 MU에서는 iFrame과 inline 콘텐츠 등을 사용할 수 없으며, 플러그인 옵션이 활성화되지 않습니다.

워드프레스 플러그인 페이지에는 플러그인의 최신판 정보가 갱신되지 않았지만 파일은 1.2.1입니다. fancybox.net 참고 [위로 ↑]

Fancybox for WordPress

모든 이미지 링크와 워드프레스 갤러리의 썸네일 이미지링크에 자동으로 적용됩니다. 단, 글자에 이미지를 링크시킨 경우 자동으로 인식하지 않습니다. 앵커 태그에 fancybox 클래스를 지정해줘야 됩니다. (<a class=”fancybox” href=”http://nod…) 이외 웹페이지와 Ifrmae 문서 페이지 내부 콘텐츠 등을 라이트박스로 띄워 보여줄 수 있습니다. 창의 크기는 브라우저 화면 크기에 맞춰집니다.

플러그인 설정 화면 Appearance Settings에서 라이트박스의 테두리 색과 닫기 버튼의 위치, 배경색과 불투명도, 이미지 전환 속도 등을 설정할 수 있습니다. Advanced에서는 rel 속성을 사용한 경우에만 라이트박스를 띄워 보여주도록 할 것인지, post 클래스로 감싼 영역에만 적용시킬 것인지 등을 설정할 수 있습니다. 기본 값은 페이지 내에 있는 모든 이미지를 자동으로 그룹화시켜 갤러리처럼 보여주는 것입니다. [위로 ↑]

Advanced Fancybox

이미지와 웹페이지 또는 커스텀필드에 있는 내용을 라이트박스로 보여줄 수 있습니다. 자동인식은 되지 않으며 팬시박스 버튼을 이용할 경우에는 라이트박스 효과는 자동으로 지정되지만 그룹으로 묶거나 할 때에는 직접 rel=”group1″처럼 임의의 이름을 붙여줘야 됩니다. 라이트박스를 넣고 싶을 때 사용하는 클래스는 class=”advfancybox”, 웹페이지나 웹사이트를 링크시킬 때에는 class=”advfancybox iframe” 이며, 커스텀 필드를 이용해 HTML 문서나 텍스트를 보여주고 싶을 때에는 반드시 커스텀필드의 이름을 fancybox, fancybox1, fancybox2, fancybox3 중 하나여야 됩니다.

라이트박스의 디자인은 Fancybox for WordPress와 동일합니다. 글 쓰기 창의 팬시박스 버튼의 닫기 기능이 잘 작동하지 않습니다.

fancybox라는 이름의 커스텀필드의 내용을 라이트박스로 보여주고 싶을 경우 버튼을 사용하지 않고 앵커 태그에 클래스는 class=”advfancybox”로, 주소를 href=”#fancybox”로 입력해주어도 됩니다. 플러그인 설정에서 iFrame으로 웹페이자 웹사이트를 보여질 때와 커스텀필드의 내용을 보여줄 때의 창의 가로/세로 크기와 줌 스피드 등을 설정할 수 있습니다. 워드프레스 갤러리에는 라이트박스 효과를 지정할 수 없습니다. [위로 ↑]

WP-Slimbox2 Plugin

플러그인 설정에서 Autoload에 체크를 하면 자동으로 이미지 링크를 감지해 라이트박스로 보여줄 수 있으며, 플리커와 피카사로부터 불러온 이미지와 워드프레스 갤러리도 라이트박스로 보여줄 수 있습니다. Autoload를 사용하지 않을 경우에는 이미지 링크에 rel=”lightbox”을 넣어 주면 링크된 해당 이미지를 라이트박스를 띄워 보여주게 됩니다. 여러 장의 이미지를 묶어주고자 할 때에는 rel=”lightbox-group1″ 처럼 lightbox- 뒤에 특정한 이름을 붙여주면 됩니다.

플러그인 설정(Settings > WP-Slimbox2)에서 라이트박스 전환효과와 배경색 배경색의 불투명도 값 등을 설정할 수 있으며, 이전(p, ←)/다음(n, →) /창닫기(c, ESE) 등의 기본 키보드 탐색키도 달리 설정할 수 있습니다. [위로 ↑]

Shadowbox JS

이미지 링크와 유튜브 동영상, 플래시 파일, Iframe, Html 문서 외에도 MP3과 AAC 포맷의 음악 파일과 mov, mp4, avi, mpg, mpeg, flv과 같은 동영상 파일도 라이트박스로 띄워 보여주는 플러그인입니다. 플러그인은 설치 후 Settings > Shadowbox JS에서 Shadowbox JS를 적용할 미디어 선택과 자바스크립트 라이브러리를 불러올 것인지, Smart Loading을 사용할 것인지 등에 대한 설정에서부터 쉐도우박스 배경색과 불투명도 조정 등 세부적인 요소들에 대해서도 설정할 수 있습니다.

여러 장의 이미지나 동영상 등을 그룹화시키고 싶을 때에는 rel=”shadowbox[group1]” 처럼 앵커태그에 넣어 주시면 됩니다. gallery는 구분을 위한 이름짓기이니 임의의 값으로 하시면 됩니다. 만약 특정 이미지를 쉐도우박스로 띄워 링크된 이미지를 보여주고 싶지 않을 때에는 rel=”nobox” 속성값을 앵커 태그에 넣어 주시면 됩니다.

이 플러그인에서 가장 마음에 드는 기능은 워드프레스 2.8판 이상에서만 사용할 수 있는 스마트 로딩(smart loading)입니다. 문서 내 링크에 rel=”shadowbox” 값이 없을 경우에는 쉐도우박스 스크립트를 로딩하지 않기 때문에 현재 페이지에서 이동 없이 무언 갈 띄워 보여줘야 되는 경우가 아닐 때에는 불필요한 스크립트를 불러올 필요가 없는 것이죠. Shadowbox Automation에서 자동으로 링크를 인식할 미디어를 이미지와 동영상, 음악 파일 링크,튜브와 구글 비디오 링크 항목에서 각각 true/false로 지정할 수 있습니다. 불필요한 기능은 false로 두시는 게 좋습니다. General의 재생시킬 미디어 항목에서도 불필요한 미디어는 체크하지 않는 게 좋습니다. 불필요한 스크립트를 로딩시키지 않기 위해. [위로 ↑]

Shutter Reloaded

가볍고 별도의 라이브러리를 사용하지 않습니다. 자바스크립트 파일도 10KB가 못 됩니다. 이미지 링크를 열어 보여주는 방식이 다섯 가지인데요. Appearance에 추가되는 Shutter Reloaded 플러그인의 옵션 페이지에서 Shutter on al image links를 활성화시키면 이미지 링크에 클래스나 rel 속성 값을 넣어 주지 않아도 페이지나 포스트에 있는 모든 이미지 링크를 현재 창에서 열어 볼 수 있습니다. 다른 네 가지 보기 방식 중에서는 shutter나 shutterset, shutterset_setname 등의 클래스가 적용된 경우에만 열어 주는 방식과 특정 페이지의 이미지 링크에만 셔터 리로디드를 적용하는 방법 등이 있습니다.

재미있는 옵션은 특정 페이지나 포스트의 고유 번호(ID)로 이미지 링크에 셔텨 리로리드가 적용되지 않을 수 있도록 설정할 수 있다는 점입니다.

셔터 리로디드는 위 그림처럼 창 닫기와 이전/다음 이미지를 탐색하는 버튼이 브라우저 맨 아래에 위치하게 됩니다. 맨 오른쪽에 있는 오른쪽 아래를 향하는 화살표 버튼은, 브라우저 화면이 좁을 때 링크된 이미지를 원래 크기가 아닌 브라우저에 맞추어 주는데요. 그 때 브라우저 크기에 맞추어진 이미지를 원래 크기대로 보여주도록 해주거나 다시 창 크기에 맞게 줄여주도록 할 때 사용됩니다. 플러그인의 설정 페이지에서 아이콘 대신 텍스트를 사용하도록 설정할 수 있으며, 셔터 리로디드 창이 활성화되었을 때의 화면 배경색과 불투명도 등도 설정할 수 있습니다. [위로 ↑]

iBox

링크 rel 속성에 ibox를 주면 라이트박스가 적용됩니다. 하지만 같은 rel 속성을 가지고 있어도 여러 이미지들이 연결되어 하나의 창에서 이전/다음 그림을 탐색할 수 있는 기능은 없습니다. 한장 한장의 그림을 클릭해서 큰 그림을 확인해야 됩니다. 이미지 뿐만 아니라 웹페이지도 라이트박스로 보여줄 수 있습니다. 유튜브 동영상과 텍스트에 이미지 링크를 걸어 라이트박스로 띄워볼 수도 있습니다. 웹페이지와 인라인 콘텐츠에도 적용할 수 있습니다.

rel에 width, height 속성을 추가해 창의 크기를 조절할 수 있습니다. <a href=”#” rel=”ibox&width=400″>iBox</a> 처럼 말이지요. 워드프레스 갤러리에는 적용되지 않습니다. [위로 ↑]

WP FaceBox

페이스북 스타일의 라이트박스 rel=”facebox”을 링크에 추가해주면 라이트박스가 적용됩니다. 하지만 같은 rel 값을 가지고 있어도 이미지 셋으로 지정되지 않기 때문에 여러 장의 이미지를 한 창에서 볼 수 없습니다. 하나씩 열어 봐야 합니다. 창 크기에 맞게 라이트박스의 크기가 자동으로 줄어들지는 않습니다.

html 문서를 라이트박스로 열어 볼 수도 있으며, 특정 클래스를 지정할 수도 있습니다. <a href=”#footer” rel=”facebox”>푸터 내용 보기</a>처럼 코드를 넣어주면 해당 페이지에 사용된 스타일시트의 특정 아이디나 클래스를 넣어주면 해당 아이디나 클래스가 사용 된 곳에함된 내용만 라이트박스로 볼 수 있습니다. [위로 ↑]

WP-prettyPhoto

플러그인을 활성화시키면 아무런 설정 없이 이미지 링크를 라이트박스로 열어 줍니다. 한 페이지 내에 삽입된 이미지는 그룹 이미지 링크로 인식하며, 워드프레스 갤러리에도 적용됩니다. 이 플러그인은 이미지 링크 뿐만 아니라 동영상과 플래시, Iframe에도 적용됩니다. 제가 해봤을 때에는 유튜브 동영상이 자동인식이 되지 않아 링크에 rel=”wp-prettyPhoto” 을 넣어 줬습니다.

Media Settings (Settings > Media)에 WP-prettyPhoto Options에서 이미지, 유튜브 동영상, 플래시 파일, Iframe 링크 등을 자동으로 인식해 라이트박스로 보여줄 것인지, 라이트박스의 모양을 밝은 색과 어두운 색 중 테두리를 둥글게 또는 각지게 할 것인지 등을 설정할 수 있습니다. 불투명도, rel 값을 원하는 임의의 값으로 변경하건 숏코드를 사용할 수 있도록 하거나 할 수 있습니다. [위로 ↑]

WP FancyZoom

플러그인 활성화 후 플러그인 설정 페이지에서 플러그인 파일의 위치만 잡아주면 바로 이미지 링크에 팬시줌 효과가 적용됩니다. 워드프레스 갤러리에도 적용됩니다. 하지만 한 페이지 내에 있는 이미지 링크를 모두 묶어서 처리하지 않기 때문에 한 페이지 내에 있는 이미지 링크를 살펴보기 위해서는 이미지 마다 클릭을 해야 됩니다. 워드프레스 갤러리에서는 이미지에 적용한 대체 텍스트(alt)가 일반 이미지 링크에서는 링크에 적용한 제목(title)이 그림 파일을 팝업창으로 띄웠을 때 제목으로 사용됩니다.

이미지 링크를 클릭했을 때 연결된 이미지 파일을 팝업창으로 띄워서 보이는 것을 원치 않으신다면 링크 rel=”nozoom”을 주시면 됩니다. 이 플러그인은 여러 이미지를 rel에 동일한 값을 줘서 하나의 팝업창에서 이전/다음 버튼으로 탐색할 수 있는 기능을 제공하지 않습니다. [위로 ↑]

Floatbox Plus

이미지 외에 유튜브(일반화진 고화질)와 비메모(Vimeo) 동영상을 포스트에 조금 손쉽게 삽입해 팝업창에서 재생시켜줍니다. 플러그인 설치 후 Settings > Floatbox Download에서 라이센스에 동의하면 평가판을 설치해 사용할 수 있습니다. 평가판은 플롯박스가 일정회수 실행될 때마다 비영리 사이트의 경우 무료 라이센스 요청을, 그렇지 않을 경우 유료 라이센스 키를(호스트당 20달러) 구입할 것을 권하는 메세지 창이 뜹니다.

관련 스크립트를 설치하고 나면 링크된 이미지에 자동으로 팝업창으로 보여줄 수 있습니다. 팝업창은 자동으로 창 크기에 맞춰지며, 원본 이미지의 크기보다 화면에 작게 보여졌을 때에는 이미지 위에 커서를 가져갔을 때 돋보기가 나타나 클릭해주면 원본 크기롤 이미지를 볼 수 있습니다.

플러그인 설정에서 팝업창 테마(black, white, yellow, blue, red)를 다섯 가지 중 택일할 수 있으며, 동영상 삽입 시에는 글쓰기 창에 있는 아이콘()을 이용해 동영상의 ID를 입력합니다. Vimeo 동영상은 vimeo.com/ 뒤에 오는 ID를, YouTube는 동영상 주소에 watch?v=rUWABzMYgLc ‘v=’뒤에 오는 게 ID입니다.

일반 설정 옵션과 플롯박스, 동영상 옵션이 있으며 일반설정에서는 플롯박스 버전과 동영상에도 적용할 것인지 등을 설정할 수 있습니다. 플롯박스 옵션에서는 플롯박스 테마와 적용되는 효과를 설정할 수 있습니다. 동영상 옵션에서는 동영상 아래 링크를 둘 것인지, 동영상이 피드에서도 보이도록 할 것인지와 동영상 팝업창의 크기와 유튜브 동영상을 전체창 크기로 볼 수 있게 할 것인지 등을 설정할 수 있습니다. [위로 ↑]

SuperSlider-Milkbox

플러그인 설정에서 Auto Link에 체크되어 있으면 워드프레스 갤러리에 자동으로 밀크박스 효과가 적용됩니다. 일반 이미지와 텍스트에 이미지를 링크시킬 경우에는 rel=”milkbox”를 추가해 밀크박스를 적용시킬 수 있습니다. 네 개의 밀크박스 창 테마가 준비되어 있으며, 갤러리 이미지를 자동으로 반복되는 슬라이드로 보여줄 수 있는 옵션도 있습니다. 이미지 전환시간과 효과 설정, 배경 불투명도 설정 등을 할 수 있습니다. 숏코드로 필크박스를 제어할 수도 있습니다.

창이 크기에 따라 마일드박스의 크기가 변하지는 않습니다. [위로 ↑]

GreyBox Integrator

개별 이미지 링크에는 rel=”gb_image[]“를, 여러 개의 이미지를 묶을 때에는 rel=”gb_imageset[amugeona]“, 웹사이트를 링크를 전체창으로 보여줄 때에는 rel=”gb_page_fs[], 웹사이트 링크를 특정한 크기의 창에 보여줄 때에는 gb_page_center[640,480], 여러 웹사이트를 묶어서 보여줄 때에는 rel=”gb_pageset[nice_pages]” 를 사용합니다. 브라우저 전체 화면으로 그레이박스를 띄우며 닫기 버튼을 클릭해야지만 화면에서 나갈 수 있습니다.

플러그인을 활성화시키면 HTML 편집창에 GBI 아이콘이 추가됩니다. [위로 ↑]

SuperSlider-MooFlow

슬라이드 쇼에 나타난 이미지만 키워서 볼 수 있습니다. 슬라이드쇼는 키보드와 마우스 휠로도 그림을 넘겨볼 수 있습니다. 플러그인을 활성화시키면 글쓰기/편집 창에 추가되는 SuperSlider-MooFlow를 이용해 포스트 ID와 기타 설정 후 HTML 보기모드에서 Add MoodFlow를 누르면 포스트에 첨부된 이미지 파일들의 슬라이드 쇼가 삽입됩니다.

창이 크기에 따라 마일드박스의 크기가 변하지는 않습니다. [위로 ↑]

SuperSlider-Show

워드프레스 갤러리를 슬라이드쇼로 보여줄 수 있으며, 플러그인의 숏코드를 이용해

창이 크기에 따라 마일드박스의 크기가 변하지는 않습니다. [위로 ↑]

GeotagPhoto

위치 정보를 포함하고 있는 사진에 구글 맵으로 위치를 표시해주기 위한 플러그인이지만, 플러그인 옵션 ThickBox에서 Add Thickbox to all photos에 체크를 하면 클래스 지정 없이도일반 이미지 링크를 딕박스로 열 수 있습니다. 이 플러그인 역시 워드프레스에 내장된 jQuery와 ThickBox 스크립트를 이용합니다.

미리보기 사이트에서는 사용 중인 테마 때문에 위에 첨부한 그림처럼 나오지 않습니다. 워드프레스 Default 테마나 다른 테마를 사용하면 정상적으로 출력됩니다. [위로 ↑]

Popupper

일반적인 이미지 팝업용 플러그인은 아닙니다. 마우스 오버시 텍스트나 이미지를 툴팁으로 보여주는 플러그인이며, Popupper 플러그인을 활성화시키면 글쓰기 창에 추가되는 Create Popup 버튼은 이미지 파일을 선택했을 때에는 사용할 수 없습니다.

하지만 일반 텍스트를 선택한 뒤 Create Popup 버튼()을 눌러 팝업 설정을 하면 생성되는 링크 코드를 일반 이미지 태그에 사용하면 포스트에 삽입된 이미지 파일에도 툴팁처럼 팝업을 띄워 이미지 파일을 보여줄 수 있습니다. [위로 ↑]

Thumbnail Viewer

이 플러그인은 마지막으로 업데이트 된 게 2007년 1월이니 이미 업데이트된지 2년 반이 넘었고, 한 번 창을 띄워 여러 이미지 링크를 살펴볼 수도 없습니다. 이미지 하나 클릭해야지 큰 이미지를 확인할 수 있지요. 그럼에도 이 플러그인은 무척 가볍습니다. 만약 글을 쓸 때 이미지를 많이 사용하지 않으며 여러 이미지를 연결해서 볼 필요가 없는 경우가 대부분이라면 이 플러그인이 쓰임새는 있으리라 생각합니다.

플러그인은 활성화시키면 바로 적용됩니다. 단 썸네일 뷰어로 큰 이미지를 열어볼 이미지 링크에 rel=”thumbnail” 속성을 추가해주어야 됩니다. 일반 글자에 이미지를 링크시킨 경우에도 마찬가지입니다. 이 썸네일 뷰어 플러그인은 배경을 어둡게 처리하지 않으며, 이미지 영역 안에서 클릭했을 때 창이 닫힙니다. 썸네일 뷰어 플러그인이 지원하는 이미지 파일의 확장자는 png, gif, jpeg, jpg, bmp입니다. [위로 ↑]

Add Lightbox

위에 소개한 플러그인 중에서 예컨대 jQuery Lightbox는 자동으로 이미지 링크에 rel 속성을 추가해주지 못하기 때문에 라이트박스로 링크된 이미지를 열리도록 하기 위해서는 rel=”lightbox”를 직접 추가해줘야 됩니다. 만약 이런 과정이 번거로우시다면 Add Lightbox나 Add LightBox & Title 플러그인을 이용해 쉽게 rel 값을 넣어줄 수 있으며, class를 추가하도록 할 수도 있습니다.

Add Lightbox 플러그인을 이용하면 자동으로 이미지 링크에 rel=”lightbox[포스트 고유번호]“를 더해줘 라이트박스가 적용될 수 있도록 해주는데요. lightbox 뒤에 동일한 포스트 고유번호가 할당되기 때문에 한 페이지 내에 있는 여러 장의 이미지는 갤러리처럼 라이트박스를 한 번 띄워서 탐색할 수 있게됩니다. Add Lightbox는 아무런 설정 사항이 없습니다. 활성화만 시켜주면 이미지 링크에 자동으로 rel 속성을 추가해줍니다. 하지만 만약 class를 변경시켜주도록 하고 싶으실 때에는 플러그인 파일을 열어 수정해주셔야 됩니다.

연관 글

1. 워드프레스 플러그인, Random Pages Widget
2. MU 카테고리 슬러그 편집 플러그인
3. 링크된 이미지를 현재 창에서 보여주는 WP AutoZoom
4. 판페어 갤러리 삽입 플러그인 WP-Phanfare
5. 워드프레스 플러그인 TwitterGrid