3. 자바스크립트
이제 마지막으로 웹 페이지에 자바스크립트를 적용하겠습니다. 모듈별로 나누어 설명하려고 [코드 14-10]처럼 script 태그를 세 부분으로 구성했습니다.
<코드 14-10> 자바스크립트 태그 기본 구성
<script>
// 풀다운 메뉴
$(document).ready(function () {
});
// 페이지
$(document).ready(function () {
});
// 라이트박스
$(document).ready(function () {
});
</script>
3.1 풀다운 메뉴 구성
풀다운 메뉴는 종합 예제에서 살펴보았으므로 어렵지 않을 것입니다. [코드 14-11]처럼 .outer-menu 태그에 hover() 메소드를 적용하고, 각 상황에 맞게 display 속성을 변경합니다.
<코드 14-11> 풀다운 메뉴 구성
// 풀다운 메뉴
$(document).ready(function () {
// 풀다운 메뉴
$('.outer-menu').hover(function () {
$(this).find('.inner-menu').css('display', 'block');
}, function () {
$(this).find('.inner-menu').css('display', 'none');
});
});
3.2 페이지 구성
페이지를 핀터레스트처럼 타일 형식으로 적용하려면 masonry 플러그인을 사용합니다. 하지만 이미지가 없는 상태에서는 해당 태그의 크기를 알 수 없으므로 masonry 플러그인이 적용되지 않습니다.
jQuery Image Loaded 플러그인을 사용해 이미지를 모두 불러온 후 masonry 플러그인을 실행하도록 코드를 작성합니다.
<코드 14-12> 페이지 구성
// 페이지
$(document).ready(function () {
// 이미지 로드 확인
$('#main-section').imagesLoaded(function () {
jQuery Masonry 플러그인 적용
$('#main-section').masonry({
itemSelector: '.paper
columnWidth: 230,
isAnimated: true
});
});
});
NOTE_ 완성 파일을 인터넷 익스플로러로 드래그해서 실행하면 [코드 14-12]에서 다룬 imageLoaded 플러그인이 작동하지 않습니다. 실제 웹 사이트처럼 서버에서 실행하면 인터넷 익스플로러에서도 아무 문제없으므로 걱정하지 마세요.
3.3 라이트박스 구성
마지막으로 페이지를 클릭했을 때 화면에 나타나는 라이트박스 기능을 구현합니다. 라이트박스 부분을 [코드 14-13]처럼 작성합니다.
<코드 14-13> 라이트박스 구성
// 라이트박스
$(document).ready(function () {
funciton showLightBox() {
// 라이트박스를 보이게 합니다.
$('#darken-background').show();
$('#darken-background').css('top', $(window).scrollTop());
// 스크롤을 못하게 합니다.
$('body').css('overflow', 'hidden');
}
function hideLightBox() {
// 라이트박스를 보이지 않게 합니다.
$('#darken-background').hide();
// 스크롤을 하게 합니다.
$('body').css('overflow', '');
}
// 라이트박스 제거 이벤트
$(#darken-background').click(function () {
hideLightBox();
});
// 클릭 이벤트 연결
$(',paper').click(function () { showLightBox(); });
// 라이트박스 제거 이벤트 보조
$('#lightbox').click(function (event) {
event.stopPropagation ()
});
});
#darken-background 태그를 클릭하면 라이트박스가 사라집니다. 그런데 #lightbox 태그는 #darken-background 태그 위에 있으므로 #lightbox 태그를 클릭하면 #darken-background 태그도 클릭됩니다. 이러한 이벤트 전파를 막으려면 위쪽에 위치하는 태그의 이벤트 객체에서 stopPropagation() 메소드를 호출합니다.
마지막으로 placehold.it/너비x높이를 placekitten.com/너비/높이로 바꿔 줍니다.
