★이미지 슬라이드로 포토앨범 만들기(사랑가님)

★슬라이드 앨범 만들기★   슬라이드 앨범을 만들기전에 먼저, 계정에 대한 의미를 짚어봅니다.   계정이란? 자신만의 이미지나 사진등에 인터넷주소를 부여함을 말합니다. 인터넷에 도는 모든 사진이나 이미지, 또는 파일등은 http://~~ 시작 ~~~~~ asf/wma/jpg/gif/bmp/등등으로 마무리 됩니다. 맨 끝에 오는 확장자명에 따라 음악, 동영상, 이미지 파일등으로 분류가 됩니다.   즉, 자신의 컴퓨터에 있는 사진이나 이미지, 파일등은 자신만이 볼 수 있습니다. 예를들어) 사랑가님이 디카로 찍어 컴퓨터에 보관해둔 사진은 인터넷 포털사이트에 올리기전까지는 사랑가님 눈에만 보일뿐 다른분들에겐 보이지 않습니다. 이러한 사진이나 이미지, 파일등을 다른분들과 함께 공유를 하자면 인터넷 포털사이트 자료실에 해당 사진이나 이미지, 파일등을 업로드해야 합니다. 간단한 예)로 자신의 카페 자료실에 해당 사진을 올리고(업로드) 이미지주소를 따서 게시판에 이미지태그의 주소란에 넣어서 올리는 방법입니다.   문제는 다음카페 자료실은 파일의 용량을 제한해서(최대업로드 2mb/5mb로 제한) 용량이 큰 파일은 올릴 수 없으며, 자바스크립트 또한 제한이 되어 있습니다. 또 해당카페의 회원이 아니면 이미지를 볼 수 없다는 불편함이 있습니다. 이러한 여러가지 불편함을 없애기 위해 자신의 개인계정을 이용하는거지요. 카페를 운영하시는 분들이라면 개인 계정 하나정도는 가지고 있어야 편합니다.   ★이제 슬라이드 앨범 만들기 입니다.★   1.슬라이드 시킬 이미지10장 정도를 사이즈를 동일화 시켜서 준비합니다. (그냥 이미지를 사용하셔도 되지만 이왕이면 테두리를 이쁘게 만들어서 준비하시면 더욱 좋습니다 이미지 파일명을 지정하실땐 꼭 영문으로 하세요.. 한글명은 컴터 사양에 따라 인식을 못하는 경우가 있습니다.. 참고하세요) 2.이미지10장을 자신의 개인계정에 업로드 시킨후 이미지주소를 따옵니다. --------------------------------------------------------------------- <A href="http://pp6143.webzero.co.kr/bbs/data2/july/sample01.jpg">http://pp6143.webzero.co.kr/bbs/data2/july/sample01.jpg</A> <A href="http://pp6143.webzero.co.kr/bbs/data2/july/sample02.jpg">http://pp6143.webzero.co.kr/bbs/data2/july/sample02.jpg</A> <A href="http://pp6143.webzero.co.kr/bbs/data2/july/sample03.jpg">http://pp6143.webzero.co.kr/bbs/data2/july/sample03.jpg</A> <A href="http://pp6143.webzero.co.kr/bbs/data2/july/sample04.jpg">http://pp6143.webzero.co.kr/bbs/data2/july/sample04.jpg</A> <A href="http://pp6143.webzero.co.kr/bbs/data2/july/sample05.jpg">http://pp6143.webzero.co.kr/bbs/data2/july/sample05.jpg</A> <A href="http://pp6143.webzero.co.kr/bbs/data2/july/sample06.jpg">http://pp6143.webzero.co.kr/bbs/data2/july/sample06.jpg</A> <A href="http://pp6143.webzero.co.kr/bbs/data2/july/sample07.jpg">http://pp6143.webzero.co.kr/bbs/data2/july/sample07.jpg</A> <A href="http://pp6143.webzero.co.kr/bbs/data2/july/sample08.jpg">http://pp6143.webzero.co.kr/bbs/data2/july/sample08.jpg</A> <A href="http://pp6143.webzero.co.kr/bbs/data2/july/sample09.jpg">http://pp6143.webzero.co.kr/bbs/data2/july/sample09.jpg</A> <A href="http://pp6143.webzero.co.kr/bbs/data2/july/sample10.jpg">http://pp6143.webzero.co.kr/bbs/data2/july/sample10.jpg</A> --------------------------------------------------------------------- 3.이미지가 준비 되셨으면 자신이 슬라이드 시킬 효과를 선택합니다. 전, 태그자료실 633번 '이미지에 효과주며 변하는 소스'를 선택 했습니다. 아래의 '소스가져가기 누르세요'..를 클릭하면 아래와 같은 적용시킬 소스가 보입니다.   <A href="http://pp6143.webzero.co.kr/text.html">http://pp6143.webzero.co.kr/text.html</A>    (위 주소에 마우스를 올리고 마우스 우측버튼을 클릭, 새창에서 열기(N)을 누르세요) 예제 소스가 뜹니다.. <html> ~~~</html> 까지의 소스 전부가 이미지슬라이드를 만들어주는 소스입니다.. 그중 사랑가님이 수정해서 사용하실 소스는 빨간색 부분입니다. 나머지 소스는 그대로 사용하세요.   <td width="514" height="402"> 는 이미지의 실제사이즈를 넣어주세요. 즉, <A href="http://pp6143.webzero.co.kr/bbs/data2/july/sample01.jpg">http://pp6143.webzero.co.kr/bbs/data2/july/sample01.jpg</A> 이미지의 가로/세로 사이즈와 똑같이 기입해주세요. 전 514*402 입니다. 사랑가님은 이미지 10장을 준비 하셨다면 그 이미지의 실제사이즈를 넣어주세요.   (실제 태그자료실633번 글 소스에는 <td width="514" height="402"> 란 테이블이 없습니다.. 제가 좀 더 이쁘게 만들려고 따로 넣었습니다..이 부분은 응용입니다.. 참고하세요) (포토샵 같은 프로그램으로 이미지를 줄이실때 미리 숙지해 주시던지.. 아니면, 개인계정에 이미지를 업로드한후, 파일명을 클릭하면 새창에서 이미지가 뜹니다. 해당 이미지에 마우스 우측버튼을 누른후, 맨 아래에 속성을 누르면 이미지의 가로 세로가 나옵니다)   var imagewidth=514 는 이미지의 가로크기 var imageheight=402 는 이미지의 세로크기 var standstill=4 는 이미지의 전환속도입니다(수치가 클수록 속도는 느려짐)   이제 <A href="http://pp6143.webzero.co.kr/text.html">http://pp6143.webzero.co.kr/text.html</A> 창의 소스를 전체 복사한후.. 시작 > 프로그램 > 보조프로그램 > 메모장을 하나 여세요..   메모장에 복사하신 소스 전체를 붙혀넣으신후, 빨간색 부분을 자신이 사용할 이미지의 주소나 사이즈로 수정하세요.. 수정이 끝나셨다면   ★아래와 같은 방법으로 html 파일을 만드세요★   메모장 상단의 파일(F) > 저장(S)를 누르세요. ------------------------------------------------------------------------------------- <a href="javascript:albumViewer('viewer','http://pds9.cafe.daum.net/download.php?grpid=kGFg&fldid=NcbG&dataid=3726&fileid=1&regdt=20051126144453&disk=35&grpcode=pp6143&dncnt=N&.gif')"><IMG hspace=0 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fpds9.cafe.daum.net%2Fdownload.php%3Fgrpid%3DkGFg%26fldid%3DNcbG%26dataid%3D3726%26fileid%3D1%26regdt%3D20051126144453%26disk%3D35%26grpcode%3Dpp6143%26dncnt%3DN%26.gif" width=600 align=absMiddle vspace=3 border=0 id=upload_image1 onload='controlImage(this.id);'></a> -------------------------------------------------------------------------------------   <a href="javascript:albumViewer('viewer','http://pds9.cafe.daum.net/download.php?grpid=kGFg&fldid=NcbG&dataid=3726&fileid=2&regdt=20051126144453&disk=19&grpcode=pp6143&dncnt=N&.gif')"><IMG hspace=0 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fpds9.cafe.daum.net%2Fdownload.php%3Fgrpid%3DkGFg%26fldid%3DNcbG%26dataid%3D3726%26fileid%3D2%26regdt%3D20051126144453%26disk%3D19%26grpcode%3Dpp6143%26dncnt%3DN%26.gif" width=600 align=absMiddle vspace=3 border=0 id=upload_image2 onload='controlImage(this.id);'></a> -------------------------------------------------------------------------------------   <a href="javascript:albumViewer('viewer','http://pds9.cafe.daum.net/download.php?grpid=kGFg&fldid=NcbG&dataid=3726&fileid=3&regdt=20051126144453&disk=26&grpcode=pp6143&dncnt=N&.gif')"><IMG hspace=0 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fpds9.cafe.daum.net%2Fdownload.php%3Fgrpid%3DkGFg%26fldid%3DNcbG%26dataid%3D3726%26fileid%3D3%26regdt%3D20051126144453%26disk%3D26%26grpcode%3Dpp6143%26dncnt%3DN%26.gif" width=600 align=absMiddle vspace=3 border=0 id=upload_image3 onload='controlImage(this.id);'></a> -------------------------------------------------------------------------------------   <a href="javascript:albumViewer('viewer','http://pds9.cafe.daum.net/download.php?grpid=kGFg&fldid=NcbG&dataid=3726&fileid=4&regdt=20051126144453&disk=33&grpcode=pp6143&dncnt=N&.gif')"><IMG hspace=0 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fpds9.cafe.daum.net%2Fdownload.php%3Fgrpid%3DkGFg%26fldid%3DNcbG%26dataid%3D3726%26fileid%3D4%26regdt%3D20051126144453%26disk%3D33%26grpcode%3Dpp6143%26dncnt%3DN%26.gif" width=600 align=absMiddle vspace=3 border=0 id=upload_image4 onload='controlImage(this.id);'></a> -------------------------------------------------------------------------------------   <a href="javascript:albumViewer('viewer','http://pds9.cafe.daum.net/download.php?grpid=kGFg&fldid=NcbG&dataid=3726&fileid=5&regdt=20051126144453&disk=6&grpcode=pp6143&dncnt=N&.gif')"><IMG hspace=0 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fpds9.cafe.daum.net%2Fdownload.php%3Fgrpid%3DkGFg%26fldid%3DNcbG%26dataid%3D3726%26fileid%3D5%26regdt%3D20051126144453%26disk%3D6%26grpcode%3Dpp6143%26dncnt%3DN%26.gif" width=600 align=absMiddle vspace=3 border=0 id=upload_image5 onload='controlImage(this.id);'></a> -------------------------------------------------------------------------------------   <a href="javascript:albumViewer('viewer','http://pds9.cafe.daum.net/download.php?grpid=kGFg&fldid=NcbG&dataid=3726&fileid=6&regdt=20051126144453&disk=3&grpcode=pp6143&dncnt=N&.gif')"><IMG hspace=0 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fpds9.cafe.daum.net%2Fdownload.php%3Fgrpid%3DkGFg%26fldid%3DNcbG%26dataid%3D3726%26fileid%3D6%26regdt%3D20051126144453%26disk%3D3%26grpcode%3Dpp6143%26dncnt%3DN%26.gif" width=600 align=absMiddle vspace=3 border=0 id=upload_image6 onload='controlImage(this.id);'></a> 쉽게 말하자면 image.html 익스플러는 카페 메인 image-메모장은 주인백이라 생각하시면 됩니다. 우리가 카페 메인을 수정할려면 주인백으로 들어가서 수정한후, 카페 메인으로 나와서 확인하죠? 마찬가지로 image.html을 수정할려면 image-메모장을 수정하고 image.html의 새로고침을 눌러 변경된 사안을 확인하는거지요.. 맘에 드실때까지 무한 반복 하셔도 됩니다.  -------------------------------------------------------------------------------------   <a href="javascript:albumViewer('viewer','http://pds9.cafe.daum.net/download.php?grpid=kGFg&fldid=NcbG&dataid=3726&fileid=7&regdt=20051126144453&disk=16&grpcode=pp6143&dncnt=N&.gif')"><IMG hspace=0 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fpds9.cafe.daum.net%2Fdownload.php%3Fgrpid%3DkGFg%26fldid%3DNcbG%26dataid%3D3726%26fileid%3D7%26regdt%3D20051126144453%26disk%3D16%26grpcode%3Dpp6143%26dncnt%3DN%26.gif" width=600 align=absMiddle vspace=3 border=0 id=upload_image7 onload='controlImage(this.id);'></a> 업로드 방법은 사이트마다 다릅니다.. 사랑가님은 계정만들기 게시판 게시글 3번을 참조하세요. -------------------------------------------------------------------------------------   <a href="javascript:albumViewer('viewer','http://pds9.cafe.daum.net/download.php?grpid=kGFg&fldid=NcbG&dataid=3726&fileid=8&regdt=20051126144453&disk=35&grpcode=pp6143&dncnt=N&.gif')"><IMG hspace=0 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fpds9.cafe.daum.net%2Fdownload.php%3Fgrpid%3DkGFg%26fldid%3DNcbG%26dataid%3D3726%26fileid%3D8%26regdt%3D20051126144453%26disk%3D35%26grpcode%3Dpp6143%26dncnt%3DN%26.gif" width=600 align=absMiddle vspace=3 border=0 id=upload_image8 onload='controlImage(this.id);'></a> -------------------------------------------------------------------------------------   <A href="http://pp6143.webzero.co.kr/image.html">http://pp6143.webzero.co.kr/image.html</A>   제대로 하셨다면 위와 같은 주소가 생성됩니다. 이 주소를 아이프레임태그에 넣어서 카페 메인이나 게시판에 올려주시면 됩니다.   아이프레임소스 --------------------------------------------------------------------------- <iframe width="가로크기" height="세로크기" frameborder="0" marginwidth="0" marginheight="0" src="image.html주소" scrolling="no"></iframe> --------------------------------------------------------------------------- 완성소스(복사해서 메인이나 게시판에 html 글쓰기형태를 선택, 올려보세요) --------------------------------------------------------------------------- <iframe width="516" height="404" frameborder="0" marginwidth="0" marginheight="0" src="<A href="http://pp6143.webzero.co.kr/image.html">http://pp6143.webzero.co.kr/image.html</A>" scrolling="no"></iframe> --------------------------------------------------------------------------- 위와 같이 작성합니다.. 가로 세로의 크기는 이미지의 원본 크기보다 +2px 정도 크게 해 주시면 좋습니다. ^^   완성작보기(주소를 클릭하세요)   <A href="http://pp6143.webzero.co.kr/image.html">http://pp6143.webzero.co.kr/image.html</A>     공부가 좀 되셨는지요? 자바스크립트를 이용한 슬라이드 소스는 따로 보관하고 나중에 필요할때 복사해서 사용하시면 됩니다. 태그자료실의 다른 슬라이드 소스도 사용자가 수정해서 사용할 부분이 명시가 되니 그것만 잘 활용하시면 응용하시는대는 불편함이 없을겁니다.   응용하시다 잘 안되는거 있으면 질문 주세요.. 수고 하셨습니다..^^