Nextgen gallery

Nextgen gallery 은 갤러리 효과 플러그인 중 가장 인기있는 플러그인으로 슬라이드효과 등 화려하고 다양한 기능을 가지고 있습니다. 여기서는 이미지 슬라이드효과와 게시판 갤리리 효과를 설정해보도록 합니다.

Nextgen

<그림00-Nextgen gallery Add Gallery 클릭시 나타나는 화면>

대시보드 > Gallery 에서 [Add Gallery]를 선택합니다. 이미지를 업로드할 수 있는 메뉴가 나오고,

이미지는 3가지로 방법으로 업로드할 수 있습니다.

1. 파일을 선택해서 업로드

2. zip파일로 업로드

3. 폴더형식으로 업로드

 

세 가지 방법 중 하나를 선택해 이미지 파일을 올려보겠습니다.

 

Nextgen2

 

<그림00 – Nextgen gallery Add new gallery >

 

두 번째 탭에 있는 Add new gallery를 클릭해 갤러리 제목을 입력하고 하단에 [Add gallery] 버튼을 클릭합니다.

 

Nextgen3

 

<그림00 – Nextgen gallery Upload Images >

 

Upload Images 혹은 Upload a Zip-File 탭에서 이미지를 업로드하고 ‘in to’에서 만들어놓은 갤러리 제목을 선택합니다.

Nextgen4

[그림 – Gallery > Manage Gallery 선택 화면]

 

Gallery > Manage Gallery 로 들어가 추가된 갤러리목록을 확인합니다. 각각의 이미지 정보 편집을 위해 해당 갤러리를 클릭합니다.

Nextgen5

<그림00- Nextgen gallery 에서 이미지 업로드시 Manage gallery >

 

해당 갤러리에 들어가면 각각의 이미지에 제목과 설명, 태그 등을 입력할 수 있는 페이지가 나타납니다. 각각의 이미지 정보를 입력한 후에 이미지를 선택해 액션을 설정합니다.

 

Nextgen6

 

[그림 – 슬라이드쇼로 보여질 액션 선택 화면]

 

내용과 액션을 모두 설정했다면 [Save Changes] 버튼을 클릭합니다.

이제 설정한 대로 슬라이드쇼를 적용해보겠습니다

 

 

 

 

Nextgen7

 

 

<그림00- Nextgen gallery 메뉴에서 Options 선택>

 

먼저 gallery 메뉴에서 [Options]을 선택합니다.

 

Nextgen8

<그림00- Nextgent gallery Options 에서 [Slideshow]선택시 화면 >

 

맨 우측에 있는 [Slideshow] 탭을 선택합니다.

사이즈와 지속시간, 효과방법 등을 설정합니다. 그리고 슬라이쇼를 적용하기 위해 필수적인 ‘JW Image Rotator’를 설정합니다. 설정을 위해서 ‘JW Image Rotator’링크를 클릭해 사이트에 접속합니다.

 

Nextgen9

<그림00 JW Image Rotator 메인화면>

http://www.longtailvideo.com/players/jw-image-rotator

 

사이트 메인 화면에 보이는 공란에 자신의 이메일 주소를 입력하고 [Download the Image Rotator]버튼을 클릭해서 해당파일(imagerotator.zip)을 다운받습니다.

 

 

 

 

Nextgen10

<그림00- imagerotaor 다운 후 압축 풀었을 때 imagerotor 폴더내 있는 파일들>

 

다운받은 파일의 압축을 풉니다. 위와 같은 화면이 나타나면 [imagerotator.swf] 파일을 대시보드 > 미디어 > 파일올리기 로 추가합니다.

 

 

 

 

Nextgen11

<그림00- imagerotator.swf 파일 선택 열기>

 

Imagerotor.swf 선택해 업로드 합니다.

 

 

 

 

 

 

Nextgen12

<그림00- imagerotator.swf 파일 업로드시 정보입력 화면>

 

파일이 업로드되면 위와 같은 이미지 정보를 입력하는 공간이 보입니다. 여기서 파일URL값을 복사합니다.

 

 

 

 

 

Nextgen13

<그림00- 파일URL값 복사하기>

 

다시 Gallery > Options > Slideshow 로 돌아갑니다.

 

 

 

 

 

 

 

Nextgen14

<그림00- imagerotator.swf 저장경로 URL 붙여넣기 화면>

 

중간에 보이는 “Path to the imagerotator (URL)”에 복사한 URL값을 붙여넣습니다. 이제 슬라이드쇼를 구현할 플래시파일이 설치되었습니다.

 

이미지 사이즈와 노출시간 등 슬라이드쇼에 필요한 다른 설정까지 모두 마쳤다면 이제 포스팅에 삽입해보도록 합니다.

 

 

 

 

 

 

 

Nextgen15

<그림00-글쓰기에서 Nextgen gallery 아이콘 선택 화면>

*해당 부분 아이콘 표시

글 > 새 글 쓰기를 선택해 제목과 내용을 쓴 후 이미지가 들어갈 영역에서 NextGEN 아이콘을 선택합니다. 아이콘을 클릭하면 다음과 같은 팝업창이 뜹니다

 

 

 

 

Nextgen16

<그림00-NextGen Gallery 아이콘 클릭시 나타나는 팝업창>

 

Gallery 부분에서 삽입할 갤러리명을 선택하고 Show as 부분에서 보여주는 형태를 세가지 중 하나를 선택하고 [Insert] 버튼을 클릭합니다.

 

 

 

 

Nextgen17

<그림00-NextGen Gallery 적용시 글편집에서 보여주는 화면>

 

내용 입력창에 위와 같이 입력이 되면 결과물이 어떻게 보여지는지 본문에서 확인해봅니다.

 

 

 

 

 

 

 

Nextgen18

<그림00-Nextgen gallery 슬라이드쇼 & Image list 적용 화면 >

 

적용된 슬라이드쇼는 5초 동안 보여지며 슬라이드 하단에 썸네일로 이미지리스트를 보여지도록 적용되어 있습니다. 여기서 이미지를 하나 클릭하면 아래 화면과 같이 팝업창이 생기면서 [이전][이후]로 갈수 있는 링크가 자동으로 생깁니다.

 

 

 

 

 

 

 

 

 

Nextgen19

 

<그림00-Nextgen gallery Image list 에서 이미지클릭시 보이는 화면 >

 

위와 같은 방법으로 이미지에 다양한 효과를 주어 포스팅을 더욱 재미있고 풍부하게 표현해보도록 합니다.

Share the Post

About the Author

Comments

No comment yet.


Warning: strpos() expects parameter 1 to be string, array given in /free/home/topshock/html/wp-includes/shortcodes.php on line 190

Warning: preg_match() expects parameter 2 to be string, array given in /free/home/topshock/html/wp-includes/shortcodes.php on line 201
Leave a Reply

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.

장바구니

  • 장바구니에 상품이 없습니다.

로그인