저번 포스팅에서는 JSON형태를 jquery를 통하여 이미지 링크를 화면에 뿌려주는 작업을 했습니다.
이번에는 구글 이미지에서 보여주는것처럼 버튼을 누를때다마 이미지를 뿌려주는 작업을 해보겠습니다.
일단 구글 이미지는 다음 화면과 같습니다.
아래의 결과 더보기를 버튼을 누르면 이미지들이 아래에 생성되는 기능입니다.(트위터나 블로그에도 많이 사용되는 기능이죠?)
사실 jquery 에서 지원하는 함수만 써준다면 간단히 해결이 됩니다.
먼저 버튼 이벤트를 위해서 기존의 소스에서 페이지 실행후 바로 실행되던 스크립트를 이벤트 형식으로 바꿔줍니다.
이제 ImageAdd() 로 호출이 가능합니다. input 버튼도 추가해줍니다.
<input type='button' value='이미지 추가!' onclick='ImageAdd()'>
이제 소스를 실행해서 보면 1~10까지 이미지가 똑같이 붙여지는거을 볼수 있습니다. 당연히 똑같은 그림을 볼 이유가 없지요? json에서 불러오는 파라미터값 from, to 값을 조정해 주면 됩니다.
ImageAdd()함수를 다음과 같이 수정합니다.
params 데이터가 배열이기 때문에 접근은 params.from, params.to 이렇게 접근이 가능합니다.
이제 소스를 실행해서 보면 새로운 이미지들이 붙지만 기존의 이미지가 뒤로 밀려서 앞쪽에 붙게 됩니다.
jquery after()는 현재 #twiImage 뒤에 생성되기 때문에 기존에 있던 이미지들이 뒤로 밀려보이게 됩니다.
우리가 할일은 기존의 이미지는 뒤로 밀리지 않고 맨 뒤쪽에 새로운 이미지들이 추가되게 하는겁니다.
그러기 위해서 jquery find() , eq()함수를 사용합니다.
jquery find() 레퍼런스 : http://api.jquery.com/find/
jquery eq() 레퍼런스 : http://api.jquery.com/eq/
find()함수로 해당 태그를 찾은뒤 eq()로 가장 마지막 태그를 찾을수가 있습니다.
기존의 imageInsert()함수를 다음과 같이 수정합니다.
#twiImage에서 a 태그를 찾습니다. -> $('#twiImage').find("a")
찾은 태그들중에서 가장 마지막 a태그를 찾습니다. -> $('#twiImage').find("a").eq(-1)
그 뒤에 해당 태그를 넣어줍니다. -> $('#twiImage').find("a").eq(-1).after('...')
간단하지요? 완성된 소스 입니다.
이미지가 쭉쭉쭉 늘어납니다. (썸네일인데도 용량이 상당한지 로딩이 느리네요;ㅋ)
이미지 대신에 글로 활용도 가능합니다. (트위터 글이나 블로그 더보기 하면 아래로 쭈욱쭈욱 늘어나는게 이거랑 비슷합니다.)
이상끝!
- 근데 뭘 만들다가 내가 이걸하고 있는지 잊어버림..
- 소스 수정함. 빈태그<a></a> 사용으로 인한 웹표준 에러... div로 바꿈.
'web > HTML' 카테고리의 다른 글
| html 특수 문자 ( Special Characters in HTML ) (0) | 2012.12.06 |
|---|---|
| 구글에서 tilt를 검색하면?! 어떻게 표현한걸까? (0) | 2012.11.30 |
| JSON은 무엇일까? (JSON + jquery 예제) (5) | 2012.06.14 |
| HTML5 webDB 예제 (2) | 2012.06.11 |
| HTML5 LocalStorage 웹클라이언트에서 데이터 저장은 LocalStorage사용! (0) | 2012.06.05 |
