2012.01.17 14:41

jQuery를 이용한 이미지 롤링(Rolling) 두번째

jQuery 이미지 롤링 조금 발전 시킨 버젼을 추가해 봅니다. 롤링이란 키워드가 일일 방문의 절대 다수로 이뤄지고 있기 때문에 지난 번 포스팅 했던 내용에 좀더 살을 붙이고 쓰임새가 좀더 있는 넘으로 즉 끌어 붙이만으로 나름 동작하는 버젼으로 발전 시켜서 혹시라도 이용할 사람들에게 조금이라도 보탬이 되고자 몇자 적어 봅니다.

개선된 내용
  1. 링크 기능 추가(접힌 부분의 클릭 시 넓어지기, 넓혀진 부분의 클릭 시 링크로 이동)
  2. 이미지 갯수를 li 요소의 갯수로 대체
  3. 가려지는 시간과 보여지는 시간차로 인한 스크립트 오류 수정
  4. 하나의 파일에서 내용 확인 가능하도록 완성된 html 로 수정
아직 해결하지 않은 부분
  1. 이미지의 크기가 현재 코드에 부합하는 크기일꺼란 보장이 없다. 현재 코드 상으로는 넓이 350을 기준으로 이미지를 슬라이딩 하게 해놓은 상태이다. 즉 적용하고자 하는 부분에서 이미지 크기가 350 보다 크거나 작다면 원하는 크기의 이미지 크기로 코드를 수정해 주어야 한다. 
  2. 가려지는 부분의 크기 역시 현재 80px 으로 고정된 상태이다. 이미지 넓이가 350px 인게 4개라고 했을 때 최조 보여지는 부분의 크기가 590px 이여야 한다. 600px 섹션에 뭔가를 꽉 체우려면 여분의 크기를 82.5로 제어해 주어야 한다. 즉 현재 80 으로 세팅된 부분을 82.5 또는 이미지의 갯수 크기에 따라 다르게 세팅해 주어야 한다는 점이다. 만약 350px 넓이에서 이미지가 롤링만 되길 원한다면 80 으로 표시된 부분을 0 으로 고쳐 주어야 한다. 내가 최초 원했던 컨셉은 뒤편의 이미지들이 삐죽이 보이게 하는 것이었습니다.
아래 고쳐진 코드를 하나의 html 로 묶어서 보기 좋게 다시 편집해 두었습니다.

최종 소스 확인


2011/11/24 - [뭐하는데/이따위로 만든다] - jQuery 롤링(Rolling) 이미지 처리

 
    
    
저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Trackback 0 Comment 3
2011.11.24 13:31

jQuery 롤링(Rolling) 이미지 처리


jQuery 란 놈이 있어서 얼마나 다행인지. 요즘엔 그런 생각이 들곤 한다. 어쩌다보니 설계서 부터 막판 구현까지 완벽한 올라운드 플레이 중이다. 좀 슬프다...

이미지 롤링해주는 스크립트 플러그인들이 많기는 한데... 뭔 사용이 그리 복잡한지... 또 원하는 그 형태로 딱 맞는건 하나도 없어서 직접 구현에 나서기로 했다. 그래도 프로그래머로 일한지 좀 되었다고 넘들 만든거보다 스스로 만들어 쓰려는 기특함이...

만들게 될 결과 화면이다.
순서대로 늘여진 그림의 일부를 보여주고 그걸 클릭하면 전체 그림이 보이게 하거나 순서대로 롤링되는 구성이다.

jQuery에 animate 함수와 setTimeout, setInterval 이 세가지가 중요사항이다. 나머지는 내가 필요한 구성을 맞추기 위해서 추가한 것들이니 상황에 맞춰서 구성하면 될 듯 하다. 작업 중인 사이트 코드를 옮기다 보니 jQuery 지정자가 좀 거슬리긴 하지만, 코드를 이해하는데는 크게 무리 없을 것이라고 스스로 생각하며 간단한 설명과 너스레를 보태 본다.

html 과 script , css 세가지면 되고, jQuery 는 기본으로 삽입되었다고 치고... 아래 html 구성과 같이 받은 내용을 근거로 작업을 시작했습니다. 각 id, rel 은 원래 없었고 rollSelected 란 놈도 없었죠...
  1. 먼저 div 에 "mailRolling" 이란 id 를 부여합니다. 
  • li 에 붙어 있는 class="pdl2" 는 padding-left:2px 입니다. 초기 작업시엔 li 엔 id, rel 등이 필요 없었습니다.
    더블어 조작할 Css 구성도 아래와 같이 처리합니다. 아래 css 구성에서 div#mailRolling ul li{width:80px;overflow: hidden;} 부분이 있는데 with:80 은 접혀 있는 이미지 크기가 그렇기 때문입니다. 원하는 크기로 바꾸셔도 상관없습니다. overflow:hidden 이 적용되어서 작은 크기로 접힌듯 보일 수 있습니다.
  • 스크립트 부분의 RollingRcount 는 순번을 주기 위해 넣은 값이고 RollingRstatus 는 롤링되는 동안에 클릭등의 이벤트가 발생했을 경우 애니메이션이 겹치지 않도록 상태값을 준것입니다. 지금 다양한 상태에서 클릭이나 기타 등등을 해봤을때 간혹 밀리는 경우가 발생하는데 클릭 이벤트에서 좀더 섬세한 체크를 하면 될 것 같습니다만, 일단 크게 지장이 없기에 그냥 둡니다.
  • $("#mailRolling ul li.rollSelected").animate({width: '642'}, 400); 첫번째 이미지를 애니매이션 형태로 보이기 위한 부분입니다. 펼쳐진 이미지가 642 라 그 크기를 지정한 것이고 400 은 펼쳐지는 애니메이션의 소요 시간입니다.
  • setInterval(fn_Rolling,3500); 일단 주기적으로 돌도록 fn_Rolling이란 함수를 3.5초 단위로 돌게 합니다.
  • $("#mailRolling ul li").click(function(){ 클릭이벤트 처리... jQuery 에서는 항상 주의 깊게 살펴할 부분이 선택자입니다. 특정 아이디 아래, ul 요소 아래, li 모두에게 클릭 이벤트가 연결되는 것입니다. 다시 한번 jQuery 에게 감사...선택자에 대한 처리를 볼때 마다 쏟아나는 감동과 존경심...xPath 처음 배울때도 그랬지만, jQuery 의 선택자는 선택받은게 틀림 없어요.
  • if(!$(this).hasClass("rollSelected")) 이벤트가 일어 났다면 보여주는, 숨어 있던 이미지를 펴주는 처리를 해야 하는데 내가 이미 펴져 있다면 더 이상 할 일이 없으므로 상태를 확인해 줍니다. 물론 보는 시간을 좀더 늘여주는 센스가 필요한데...(글을 쓰는 지금 사이트에는 수정된 코드가 올라갔지만, 워낙 단순한 코드이므로 알아서 처리하시길).
  • RollingRstatus = 0; 이벤트 시작했으니 자동으로 도는 녀석은 잠시 쉬게 해야겠죠...
  • RollingRcount = parseInt($(this).attr("rel")) + 1; 선택받은 넘에게 추가 정보를 받기 위한 꼼수들이 여기서 등장합니다. li 에 추가된 rel 속성이 그 꼼수입니다. 자동으로 돌고 있던 순번을 지정한 순번으로 강제하는 부분입니다. 지금 클릭된 넘이 마치 순서가 되서 보이게되는 것 처럼 처리해 주는 것입니다. +1 한 것은 지금 선택된 것의 다음 순번으로 도는게 시작되게 하려는 것입니다. (처음에 rel 값을 1 크게 주면 귀찮은 점이 없어질 수도 있는데...)
  • $("#mailRolling ul li.rollSelected").animate({width: '80'}, 500).removeClass("rollSelected"); 일단 먼저 펼쳐진 것을 선택하게 합니다. 펼쳐졌는지 여부는 class 를 이용합니다.  rollSelected 값이 있는 것이 펴쳐진 것입니다. 폭을 80 으로 줄이고(지금 구성된 접힌 부분 넓이가 80 입니다.) 0.5 초 시간을 주었습니다. 그리고 새로 펼쳐질 것이 이게 아니 .removeClass() 를 이용하여 rollSelected 는 제거해 줍니다.
  • $(this).animate({width: '642'}, 500).addClass("rollSelected"); 지금 클릭 이벤트가 일어난 것에 대해서는 폭을 642px 로 늘여 주고 시간은 줄이는 것과 마찬가지로 0.5 초를 주었습니다. 그리고 선택되어 펼쳐졌다는 표시로 .addClass()를 이용해서 rollSelected 를 추가해 줍니다.
  • setTimeout(function(){RollingRstatus = 1;}, 5800); 일단 클릭으로 선택되었으니 자동으로 돌아가기 전에 약간의 감상의 시간이 필요하겠지요. setTimeout 함수를 이용해서 자동으로 도는걸 허용하도록 RollingRstatus = 1 값을 변경하고 감상의 시간을 위해 처리되는 시간은 5.8초를 주었습니다. 클릭 이벤트가 일어나도 5.8초 후에는 다시 자동으로 도는 것이 유지되도록 합니다. fn_Rolling 함수 부분은 특별한 것이 없이 순번을 이용한 li 의 rel 값을 이용한 select 만 이해하면 스크립트 내용은 크게 바뀔 것이 없습니다..

html 구성

   <div class="visual_box" id="mailRolling">
    <ul>
     <li class="rollSelected" id="mainRolling0" rel="0"><img src="/img/main2/visual_1.gif" /></li>
     <li class="pdl2" id="mainRolling1" rel="1"><img src="/img/main2/visual_2.gif" /></li>
     <li class="pdl2" id="mainRolling2" rel="2"><img src="/img/main2/visual_3.gif" /></li>
     <li class="pdl2" id="mainRolling3" rel="3"><img src="/img/main2/visual_4.gif" /></li>
     <li class="pdl2" id="mainRolling4" rel="4"><img src="/img/main2/visual_5.gif" /></li>
    </ul>
   </div>
CSS 구성
div#mailRolling {}
div#mailRolling ul{}
div#mailRolling ul li{float:left;width:80px;overflow: hidden;}
div#mailRolling ul li.rollSelected{}
div#mailRolling ul li img{cursor:pointer;}
스크립트
 var RollingRcount = 1;
 var RollingRstatus = 1;
 jQuery().ready(function ($) {
 
  $("#mailRolling ul li.rollSelected").animate({width: '642'}, 400);

  setInterval(fn_Rolling,3500);
  
  $("#mailRolling ul li").click(function(){
   if(!$(this).hasClass("rollSelected"))
   {
    RollingRstatus = 0;
    RollingRcount = parseInt($(this).attr("rel")) + 1;
    $("#mailRolling ul li.rollSelected").animate({width: '80'}, 500).removeClass("rollSelected");
    
    $(this).animate({width: '642'}, 500).addClass("rollSelected");
    setTimeout(function(){RollingRstatus = 1;}, 5800);
   }
  });
 });

 function fn_Rolling()
 {
  if(RollingRstatus == 1)
  {
   jQuery("#mailRolling ul li.rollSelected").animate({width: '80'}, 500).removeClass("rollSelected");
   
   var liNum = RollingRcount % 5;  
   jQuery("#mainRolling"+liNum).animate({width: '642'}, 500).addClass("rollSelected");
   //jQuery("#mailRolling ul li.rollSelected").animate({width: '80'}, 500).removeClass("rollSelected");
 
   RollingRcount += 1;
  }
 } 








저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Trackback 0 Comment 0


티스토리 툴바