타쿠꺼
16.06.14 본문
포토 갤러리 메뉴
1. isAnim boolean값을 이용해 애니메이션이 꼬이지 않게 다뤘다.
2. 이미지 주소값을 ajax로 얻어오고, jQuery로 이미지 엘리먼트 만든 뒤 attr에 src를 줌으로써 이미지를 로드시키고, 로드 이벤트리스너를 등록하여 로드가 완료되면 이미지 객체를 DOM에 append시켜 이미지를 보이게끔 처리했다.
여기서 시행착오가 있었는데, 이미지 로드가 항상 일정하지가 않기 때문에 이미지의 순서가 일정치 않게 로드되어 append된다는 점이었다.
그래서 이를 해결하기 위해 배열을 만들고 이미지 객체들을 차례로 저장한 뒤, 마지막 이미지 로드 이벤트리스너가 실행되면 배열에 있는 값들을 0부터 차례대로 append하게 했다.
그런데 여기서 간과한게, 마지막 이미지 로드 이벤트 리스너를 구분하는걸 each의 마지막index값으로 했다는 점이다. 이는 마지막으로 로드 이벤트리스너가 등록되는 것이지, 실행되는게 아니라는 점이다.
그래서 어쩔때는 되고, 어쩔때는 안됐는데 이는 마지막 이미지 로드 이벤트리스너가 등록되었더라도 이 이미지가 먼저 로드되는 경우가 있다는 점이다. 그러면 배열의 첫번째에 있는 이미지 객체는 로드가 안되었기 때문에 객체가 만들어지지 않고 이는 곧 undefined를 불러일으켰다. 그래서 이미지 카운터 변수를 만들고, 이미지가 로드 될 때마다 이미지 카운터 값을 1씩 증가시켜 결국 모든 이미지의 갯수와 카운터의 숫자가 같아지는 경우 append하게 했더니 잘 작동했다.
3. DOM Insertion 메서드들로 클릭된 사진의 DOM에서의 위치를 변경시켰다. 여기서 사용된건 .prependTo 메서드다. 이는 API문서를 참고하도록 하자.
Fly-out 메뉴
1. 오른쪽 메뉴 박스의 경우 각 박스의 innerWidth 크기, 위치를 계산해서 설정해주면 됨.
2. relative 형제요소들 사이에 absolute가 끼면, 순서에 따라 그 이후의 요소들부터 absolute의 영향력이 적용된다. 그 이전의 relative 형제들의 영향력은 계속 존재하여 absolute여도 위치속성이 없으면 형제요소들 다음 자리에 위치하게 된다. 마치 float: clear 속성처럼 행동하게 된다.
자바스크립트에서 Multi-String은 그레이브` `로 감싸면 된다.