[3분요리] 플래시 필요없는 이미지 슬라이더 v.0.4 beta - update 0.4

# 0.4
- 다음 표시될 이미지를 미리 캐시합니다.
- 자바스크립트 오류가 수정되었습니다.
- 캐시 방법이 다른 함수가 추가되었습니다 (raw_imageSliderJsCache)
- 기타 몇가지 오류가 수정되었습니다.
- js packet 되었습니다.

기존 방법대로 사용하시면 html 히든으로 캐시합니다. 혹시 문제가 생기면 알려주세요,
자바스크립트 배열로 이미지캐시하는 raw_imageSliderJsCache() 함수가 추가되었습니다만...IE에서 뻗어버립니다.
수정중이니, 아직 사용하지 말아주세요. 죄송합니다 :D 


웹사이트용 몇몇가지 만들어 두면 좀 편리할것 같아 시작한 1호. 
언프슬라이더 v0.3 beta  .. -_-;
플래시 필요없이 이미지들을 페이드효과로 로테이션 합니다.


티스토리에서도 잘 됩니다 :D
단, 티스토리에서 사용하시려면, 이미지올려두실 서버가 있던지, 티스토리에 이미지 올리시고 이미지들 url을 아셔야합니다.
이미지 올리시고, 이미지 URL복사해오셔서 사용하셔도 될듯 하네요... ^^

단순히 위 정도만 필요하시다면, 3분완성 언프라이더...(?) 를 사용하세요 ;

소스를 직접 퍼가셔서 사용하셔도 좋지만, 추후 제가 업뎃하는 소스는 저희 서버의 소스뿐입니다.
위 효과의 슬라이더를 만드는데는 3분이면 충분하고, 코딩을 모르시더라도, 특별히 이해하실 내용은 없습니다. ^^

기능은 추가되는데로 다시 알려드리겠습니다.

어떻게 써!!?

웹코딩 잘 하시는분들은 아래쪽 웹페이지에서 사용하기 읽으시면 될것 같습니다.


http://www.rawady.com/open/js/imageslider.js 요걸 링크걸고 이미지 배열을 만들어서 몇가지 설정과 함께 raw_imageSlider() 를 외쳐요!
아~ 모른다고!! 더 간단히!!

티스토리에 사용하기 -

  글쓰기 하고! HTML 눌러요!

첫번째 줄 부터 설명할게요,  

div 하나, img 하나가 필요합니다.
<div .... 뒤에  id="ra-photo" id는 임의로 작성하셔도 관계없습니다. 편한대로 변경하세요.
style="height:100%; width:800px" 은 이미지 크기대로 변경해주세요. 

다음줄  <img ... 에서  src=""는 그대로 비워두시고, alt=""는 마우스 올려두셨을때 나오는 풍선 입니다. 적당히 적으시면 됩니다.
이 줄의 id는 중요합니다.( 위 스크린샷의 2번째줄의  id="lovehina"라고 되어있는 곳) 기본은 "ra_photos" 로 적으시면 됩니다.
다른 id를 적으셨으면 기억해두세요.  이걸 이제부터 이미지 아이디 라고 부르겠습니다.




그리고 바로 다음줄에 

<script type="text/javascript" src="http://www.rawady.com/open/js/imageslider.js"></script>

이걸 그대로 복사해서 넣으세요. html 상태인것 다시한번 확인하시구요.

(두번째 줄에 <img src="" alt="Photo" id="lovehina" width="640"> width="640"가 사라졌네요 -_-; 있어야합니다)

 
다시 이어서 바로 아래줄에 아래걸 쓰세요, 아래건 붙여넣지 마시고,  굵은 파란색 글자부분을 본인한테 맞게 수정해야합니다.

<script type="text/javascript">

var myimages = new Array();

myimages[0] = "http://www.rawady.com/open/dummy/1.jpg";

myimages[1] = "http://www.rawady.com/open/dummy/2.jpg";

myimages[2] = "http://www.rawady.com/open/dummy/3.jpg";

    

raw_imageSlider(myimages, 4000, 30, 'lovehina');

</script>

위의 파란 부분에 이미지 주소를 적어주시면 됩니다.
이미지가 더 있으시면,

myimages[3] = "..";
myimages[4] = "..."; 
...

이런식으로 추가하시면 되구요 :D
최소한 두개는 적어주세요. 하나만 적으실거면 이글은 쓸모가 없습니다...;
최대는 확인 안해봤지만, 어지간히 많이 적으셔도 별 상관은 없습니다.


가장아래의 raw_imageSlider(... ,... , ... , ,); 부분 설명 드리겠습니다.

raw_imageSlider(1번, 2번, 3번, 4번); 
총 4개를 콤마로 구분해서 적어주셔야합니다.

1번: 위코드대로 사용하셨다면, myimages 라고 그대로 적으시면 됩니다. (이미지 url 배열입니다)
2번: 하나의 이미지를 표시할 총 시간입니다. ms(1/1000초)이므로, 1000 = 1초 입니다.  최소 1000 (1초) 이상으로 적어주셔야합니다.
3번: 이미지가 페이드인/아웃 되는 시간입니다. n*10 만큼의 시간동안 사라지고, 나타납니다. 
4번: 위에 적었던 "이미지 아이디"를 그대로 적어야합니다. <img ...의 아이디를 기본값이라고 말씀드렸던, ra_photos 라고 적으셨다면 4번은 없어도 됩니다.

다 적은 상태는 다음입니다.

 

웹페이지에 사용하기 -

html 헤더부근에, 다음 링크를 걸어주세요

<script type="text/javascript" src="http://www.rawady.com/open/js/imageslider.js"></script>

스크립트가 변경해주는 element는 전달받은 id의 img태그입니다.
div id는 따로 사용하지 않으니 작성하지 않으셔도 무관합니다.

<div id="ra-photo" style="height:100%; width:800px;">

    <img src="" alt="Photo" id="ra_photos" width="100%">

</div> 

파랑은 없어도 되는 값 - 빨간색은 설정하셔야 하는 값입니다.

div style의 height, width 는 표시할 이미지 크기로 설정해주세요.
img 크기는 div에서 설정했으니 100%로 하겠습니다.
img 의 id 는 ra_photos로 하시거나, 다르게 하실려면 raw_imageSlider 호출할때에 함께 id 넘겨주시면 됩니다.


위 div보다 아래쪽에 스크립트가 위치해야합니다.

<script type="text/javascript">

var myimages = new Array();      // 배열을 생성해야 합니다.

   
        // 배열에 표시할 이미지 순서대로 전체 URL을 설정하세요. 반드시 http://로 시작하는 풀패치여야 합니다.

myimages[0] = "image URL 1";

myimages[1] = "image URL 2";

myimages[2] = "image URL 3";

        myimages[3] = "...";

    
       //function raw_imageSlider(allimages,  duration, transitionTime, imageBoxId ) 

raw_imageSlider(myimages, 4000, 30, 'lovehina');

</script>

이미지 url이 담긴 배열 생성한후에 호출하시면 됩니다. 함수원형은 
function raw_imageSlider(/*image's*/ allimages, duration, transitionTime, imageBoxId )
입니다.  파라미터들은

allimages = 이미지 url 담긴 배열  [ 필수 ]
duration   = 이미지 표시할 시간  [ 필수 ]  - 1000 이상적으셔야 합니다. 1000 이하일 경우 1000ms로 설정됩니다.
transitionTime =  페이드 인/아웃 지속시간입니다. n*10 (ms) 의 시간동안 애니매이션 합니다.
imageBoxId = img 태그 아이디입니다. <img ... id="ra_photos"> 일 경우에는 무시해도 상관없습니다.

(transitionTime*10) 이 duration 값 보다 작아야 합니다.
 

테스트는 http://www.rawady.com/open/test.html 아니면, 이글 맨 위에 있는 그림으로 확인해보시면 될듯 하네요. 


옆에 페이스북에 좋아요도 한번~ 뜨든~ :D

협찬(?) : (c)라와디 
버전 : 0.3 베타
위치 : http://www.rawady.com/open/js/imageslider.js
사용조건 :  free.  마음대로 쓰세요. 두번 쓰세요~
                 http://www.facebook.com/rawadykorea 좋아요 눌러주기. 삼십살은 오빠라고 부르기...;;; 

금지 : http://www.rawady.com에 있는 이미지 및 모든 공개하지 않은 다른 파일의 직접 링크는 절대 금지합니다. 

주말이라 글이 좀 쓰다만것 같아서... 내일 다시 좀 수정할게요 ^^

2012/01/14 - [프로그래밍/웹개발] - [Facebook] 페이지에 메뉴 탭 추가하기