웹페이지에서 플래시로 이미지를 보여주는 SimpleViewe

홈페이지 : http://www.airtightinteractive.com/simpleviewer/

다운로드 : http://www.airtightinteractive.com/simpleviewer/simpleviewer.zip

- 기본 소스-

<EMBED src=http://~~/viewer.swf width=735 height=760 type=application/x-shockwave-flash flashvars="preloaderColor=0xFFFFFF&xmlDataPath=http://~~/list.xml" quality="high" bgcolor="0x000000">

<EMBED src="경로">

이 부분에는 Viewer.swf가 업로드 되어있는 경로를 적습니다. 네이버 블로그에 올리셔도 됩니다.

<width, height>

플래쉬 플레이어의 크기를 정합니다. 이 부분은 나중에 자세히 설명하겠습니다.

<preloaderColor>

플레이어의 초기 로딩 메시지 색깔을 정합니다. 순식간에 지나가는 부분이라 크게 신경 쓸 부분은 아닙니다.

<xmlDataPath>

불러올 그림파일들의 정보를 담을 xml(재생목록)파일의 경로를 지정합니다. Simpleviewer는 xml파일만 받아들입니다.

<bgcolor>

상당히 중요한 부분입니다. 이미지뷰어의 배경색깔을 지정합니다.

보통은 검은색(0x000000)을 권장합니다.

xml파일 작성

메모장으로 작성하셔도 상관없으며, 저장시 ANSI가 아닌 UTF-8로 저장하셔야 영문이 아닌 다른 언어도 제대로 출력됩니다.

xml파일을 viewer.swf와 같은 경로에 업로드하시기 바랍니다.

기본 소스 파일은 xml파일로 올려두었습니다.

SimpleViewer XML Options

maxImageWidth

그림중에서 가로(width)가 가장 긴 그림의 px값을 입력합니다.

 

maxImageHeight

그림중에서 세로(height)가 가장 긴 그림의 px값을 입력합니다.

 

textColor

제목과 캡션의 글자색깔을 지정합니다.

예제에서 썸네일 그림 위아래가 각각 제목(title)과 캡션(부연설명)이며, 흰색(#FFFFFF)으로 지정되어 있습니다.

 

주의하실 점은 #FFFFFF은 0xFFFFFF등으로 #은 0x로 변환하여 값을 넣어야 한다는 것입니다.

밑의 frameColor도 동일하게 적용됩니다. ->후장파열님 땡큐~

 

frameColor

그림의 테두리를 감싸는 부분, 화살표 버튼, 썸네일을 감싸는 테두리의 색깔을 지정합니다.

예제에서는 흰색(#FFFFFF)으로 지정되어 있습니다.

 

 

 

<xml 옵션 예제 그림>

 

frameWidth

그림의 테두리를 감싸는 부분의 길이를 입력합니다. 테두리가 쳐지는 것이 싫다면 0의 값을 지정하시면 됩니다.

썸네일의 테두리길이지정 기능은 없습니다.

 

stagePadding

그림과 썸네일사이와 갤러리 가장자리 부분의 길이를 지정합니다. 제목과 캡션의 길이를 지정하는 기능도 포함입니다.

예제그림을 보시면 이해가 쉬울꺼라 생각됩니다.

 

0의 값을 지정시 그림밑에 썸네일이 붙어버리기 때문에 권장하진 않지만, 썸네일 기능을 해제시 유용할 것 같네요.

 

 

 

thumbnailColumns, thumbnailRows

썸네일의 행과 열의 값을 입력합니다. 0을 지정시 썸네일 기능은 해제되고 그림만 보여주게 됩니다.

예제에서는 thumbnailColumns=3, thumbnailRows=1의 값을 지정하였습니다.

 

navPosition

썸네일을 어디다 둘 것인지를 정합니다. 위,아래,왼쪽,오른쪽 중에 하나를 고르시면 됩니다.

예제에서는 bottom(아래)으로 지정하였습니다. (이값이 가장 많이 쓰일 것 같네요.)

title

제목을 입력합니다. 입력하지 않을시에는 ""으로 하시면 됩니다.

예제에서는 "종스비의 Image Box"라고 지정하였습니다.

캡션은 xml파일에서 각 그림마다 지정합니다.

 

backgroundImagePath

별 쓸모 없는 부분이라서 패스~~

""으로 지정하셔도 상관없습니다.

 

 

imagePath, thumbPath

 

이미지파일의 경로를 정하는 부분이며, 필수로 입력하셔야 합니다.

SimpleViewer는 이미지 파일을 불러올때 크나큰 단점이 하나 있는데, 항상 절대적인 경로를 요구한다는 점입니다.

 

예를 들어 imagepath가 "http://myhome.naver.com/jongsbee/box/"라고 가정할때

지정한 경로 외에 다른 경로의 그림은 불러오지 못합니다.

 

http://myhome.naver.com/jongsbee/box/hehe.jpg같은 파일은 불러올 수 있어도,

그 외의 경로의 파일은 불러올 수 없습니다.

 

 

자신의 홈계정같은 곳이 아니면 그림경로가 제각각이라 많이 불편합니다.

 

이 불편을 타파할 곳을 찾아보았는데, 그림파일을 올려놓고 링크로 쓰일 최적의 장소를 찾아냈습니다.

 

 

그곳은 바로 엠파스 블로그입니다. >.<

비공개포스트에 그림을 올려도 얼마든지 링크가 가능하며, 그림링크주소를 보시면 절대경로가 항상 같은 것을 볼 수 있습니다.

속도도 꽤 빠른편이니 추천하는 바입니다.   제가 꾸민 갤러리도 엠파스 불로그를 이용하였습니다.

일급 기밀사항입니다. 궁금하면 드래그해서 보세요.

 

thumbpath는 imagepath와 동일하게 지정하시면 됩니다.

 

enableRightClickOpen

우측클릭시 나타나는 팝업메뉴에 "이 그림을 새창으로 열기"를 집어넣을 것인지를 정합니다.

사이즈가 커서 갤러리 안에 다 표현이 되지 않아서 원본사이즈의 그림을 보여주고 싶다면 true로 지정합니다.

대신 그림의 주소가 노출되는 단점이 있으니 취향에 따라 선택하세요.

 

<filename>

그림 파일의 이름을 입력합니다. 절대경로가 지정되어 있으니 이름만 입력하셔야 합니다.

그리고 jpg만 지원된다는 사실도 알아두시기 바랍니다.

 

<caption>

각 그림마다 부연설명하고 싶은 문장을 씁니다. 썸네일 밑에 문장이 나타납니다.

입력하고 싶지 않을시 <caption></caption>로 처리하면 됩니다.

 

 

===============================================================================================
maxImageWidth - width of your largest image in pixels. Used to determine the best layout for your gallery.

• maxImageHeight - height of your largest image in pixels. Used to determine the best layout for your gallery.
• textColor - Color of title and caption text (hexidecimal color value e.g 0xff00ff).
• frameColor - Color of image frame, navigation buttons and thumbnail frame (hexidecimal color value e.g 0xff00ff).
• frameWidth - Width of image frame in pixels.
• stagePadding - Distance between image and thumbnails and around gallery edge in pixels.
• thumbnailColumns - number of thumbnail rows. (To disable thumbnails completely set this value to 0.)
• thumbnailRows - number of thumbnail columns. (To disable thumbnails completely set this value to 0.)
• navPosition - Position of thumbnails relative to image. Can be "top", "bottom","left" or "right".
• title - Text to display as gallery Title
• enableRightClickOpen - Whether to display a 'Open In new Window...' dialog when right-clicking on an image. Can be "true" or "false"
• backgroundImagePath (optional) - Relative or absolute path to a JPG or SWF to load as the gallery background. Relative paths are relative to the HTML document that contains SimpleViewer.
• imagePath (optional) - Relative or absolute path to images folder. This value is only required if you don't want to put your images in the 'images' folder. Relative paths are relative to the HTML document that contains SimpleViewer. Note that this path should include a trailing forward slash (for example: imagePath="my_image_folder/").
• thumbPath (optional) - Relative or absolute path to thumbnail images folder. This value is only required if you don't want to put your thumbnail images in the 'thumbs' folder. Relative paths are relative to the HTML document that contains SimpleViewer. Note that this path should include a trailing forward slash (for example: thumbPath="my_thumb_folder/").

==============================================================================================

 

다음은 그림 아무거나 올려서 대충 꾸며본 갤러리입니다. 캡션란은 귀찮아서 구현하지 않았습니다.

 

 

 

 

종스비의 FAQ

 

1.width, height값을 정하는 방법을 가르쳐 주세요.

 

다음 예제 그림을 참조해 주세요.

 

<똑같은 그림을 또 올리다니..-_-;;>

 

 

그림 사이즈가 210x296이라고 가정할때

 

width = 210 + 50 + 50 + 40 + 40 + α = 390 + α

height = 296 + 50 + 50 + 40 + 40 + 50 + 65 + α = 591 + α

 

그림들의 크기가 작아서 갤러리 안에 충분히 다 표현이 가능할때 가장 큰 사이즈의 그림을 기준으로

위의 계산법을 따르시면 됩니다.

a값은 입력안해도 상관없으며, 기준값보다 약간 높아도 그림크기에는 영향이 없다는 뜻입니다. 즉 여유분이죠.

 

갤러기 크기보다 큰 그림이 있을때에는 포스트 크기에 맞춰서 그냥 적당한 값을 정하면 되겠구요.

 

 

2.썸네일 옆에 simpleviewer라는 글자를 없애고 싶어요.

 

simpleviewer 사이트 가보시면 아시겠지만, 돈을 내야하는 pro버전은 이 부분뿐만 아니라 우측클릭시 나타나는

download simpleviewer 메뉴도 표시되지 않습니다.

 

당나귀를 타면 쉽게 구할수 있습니다. 당나귀에서 받은 압축파일안의 web폴더에 있는 viewer.swf을 쓰시면 됩니다.

날짜가 2007년인지도 확인하시구요.

 

저는 물론 pro버전을 갖고 있습니다. 보내달라는 덧글 달지 마셈.. 삭제처리함.

 

 

3.그림이 표시되지 않아요.

 

홈페이지에 그림표시되지 않는 문제에 대해 설명이 되어 있습니다.

포토샵으로 jpg파일을 non-progressive(baseline)방식으로 저장하라고 언급되어 있습니다.

 

하지만 저는 아직까지 이런 문제가 발생하지 않았습니다.

혹시 문제가 발생할경우 포토샵에서 "웹용으로 저장"을 누르신다음 아래그림처럼 하시면 됩니다.

baseline은 standard와 optimized(최적화) 두가지 방식이 있는데 어느것을 택해야 할지는 잘 모르겠네요.

 

점진적에 체크할경우 progressive방식이 됩니다.

 

그냥 참고만 하시면 될 것 같네요.

 

 

4.색깔정보를 어덯게 찾죠?

네이버에서 "태그연습장"이라 검색하시면 별의별 태그연습장이 다 나오는데,

아마 대부분의 연습장이 색상표를 제공할 겁니다.

5.simpleviewer만의 장점이 있나요?

물론 있습니다. 썸네일 기능이라든지, 간단한 embed scr 코드로 갤러리를 구성할 수 있다든지 등등이 있지만

가장 큰 장점은 이미지를 자동으로 보정해주는 기능이라고 생각합니다.
 

 

어느 블로그나 게시물에 큰 그림을 올릴경우 자동으로 리사이즈되는데

이 경우 위의 그림처럼 그림 군데군데 찌그러지는 모습이 보입니다.

 

 

제가 올린 갤러리에 그림과 비교하시면 자동으로 보정되어 있는 것을 확인 할 수 있습니다.

그래서 사이즈가 무척 큰 그림을 올려도 찌그러지지 않아서 별 부담이 없죠.

6.태그연습장에서 제가 설정된 값대로 적용이 되지 않아요.

simpleviewer의 지랄같은 단점중에 하나라고 볼 수 있습니다. 저도 이것 때문에 처음에 무척 고생했습니다.

예전에 불러온 xml파일은 임시폴더에 저장되는데, xml파일을 갱신해도 simpleviewer는 임시폴더에 저장된 xml파일을 읽어들입니다.

그렇기 때문에 테스트할때마다 IE옵션에서 임시 인터넷 폴더의 내용물을 삭제해주셔야 합니다.

이 매뉴얼을 작성하게 된 계기를 마련해 주신 greenkei님에게 감사드립니다.

p.s)RSS 미등록 문제로 다시 올립니다. 기본소스 부분에서 주소입력시 RSS가 등록되지 않는다는 점을 발견했습니다.

이러면 네이버에서도 검색이 되지않기 때문에 부득이하게 수정하였습니다. 덧글 달아주신 후장파열님 미안 ^.^~~~

>더보기