본문 바로가기

coding/jQuery

jQuery - gallery

// 1. 반복문을 이용하여 big_image에 li를 생성

  // 2. 이미지를 담는 객체를 생성하여 담기

  // 3. 큰 영역에 첫번째 이미지를 담기

  // ==============================================

  // 1. 작은 이미지를 마우스 올릴경우 다음과 같은 기능을 수행

  // 2. 작은 이미지에 들어있는 이미지와 같은형태의 큰이미지의 주소를 찾아

        // bigUrl + galleryData[i].bigImg

  // 3. 큰 영역에 배경이미지로 배치

  // 4. 이때 작은이미지가 어떤 것이 선택되었는지 주목성이 있도록 처리

  // 5. 주목성처리 : class="act" 삽입

  // // 추가기능1 : 작은이미지를 선택할때, 다른영역에 있는 형태는 act해제

  // // 추가기능2 : 마우스가 아닌 키보드 focus 처리

  // // 추가기능3 : 클릭시 처리되는 부분도 일부 해결

  // ==============================================

  // 이외에 첨부하면 좋을 기능

  // big_image 영역에 이미지가 바뀌면 깜빡이는 현상을 조정

  // 1. bigImage영역 내부에 2개의 영역 생성 앞/뒤로 배치

  // 2. 앞에 있는 것은 현재 보이는 것, 뒤에 존재하는 건 기본 display:none;

  // 3. 작은 이미지에 마우스 처리하면, bigImage뒤에 내용을 삽입하고, 동시에 display:block

  // 4. 앞에있는 요소를 사라지게 (방법은 자유)

  // 5. 뒤에 존재하는 요소를 앞으로 오게 처리(z-index를 이용, 앞의 요소를 뜯어서 뒤로 이동)

  // 6. 뒤로 이동한 요소는 내부를 비우기

'coding > jQuery' 카테고리의 다른 글

jQuery - banner와 indicator를 이용해 만들기  (0) 2021.07.21
jQuery - banner 요소 추가  (0) 2021.07.21
jQuery - 06 mouseclick_xy  (0) 2021.07.21
0629 / jQuery - delete (삭제코드)  (0) 2021.06.30
0622 / jQuery - tab menu  (0) 2021.06.23