이미지 갤러리

jQuery Images Gallery

이번 포스팅에서는 이미지 갤러리를 만들어볼까 합니다.

쇼핑몰이나 이런곳에서 자주 등장하는 이미지 갤러리 인데요.

자 진행하기에 앞서 이미지를 3장 저는 준비 했는데요

이미지 갤러리이다 보니 이미지는 필수 겠죠?

---

저는 한효주씨를 모델로 jQuery Gallery를 만들어 보았는데요.

생각보다 어렵지 않습니다.

---

See the Pen JpKmMR by uicode (@uicode) on CodePen.

---

네 상단의 코드를 보시면 .. 원래는 RESULT 부분에 결과값이 나오게 되어있는데요

이부분이 사정없이 깨지는 모습을 볼 수 있을거에요^^

왜냐면... 제가 이미지를 담아야 하는 공간이 없기 때문에

저 부분은 직접 이미지를 만들어서 넣어보시기 바랍니다.

아래는 제가 만든 이미지 갤러리 실행 결과 화면입니다.

간단하게 설명을 드리자면 버튼 즉 작은 이미지를 클릭하면

this 즉, 나 자신을 클릭할때이니 클릭한 이미지가 되겠죠?

그 이미지에서서 갖고있는 src를 변수에 담았습니다.

그럼 클릭할때마다 그 고유의 이미지의 src값을 갖고 있을텐데요

그 값을 하단에 이미지를 변경해주는 방식입니다.