본문 바로가기

광고

Design

Reference

Tutorial

웹 표준 사이트 만들기
반응형 웹 사이트 만들기

CSS

NEWS

SITE

Coding


광고

웹 퍼블리셔/실무에서 쓰는 mark up

[Tutorial][Gallery] 클릭하면 변하는 이미지 슬라이드4 [Gallery] 클릭하면 변하는 이미지 슬라이드 실무에서 쓰는 마크업 - webstoryboy 자동으로 이미지를 전환하기 효과입니다. 마우스를 오바하면 이미지 전환이 멈춤니다. sample jQuery html CSS #fadeShow { width:600px; height:380px; text-align:left; } #fadeShow img { position:absolute; /* 이미지에 절대값을 설정하여 한 곳에서 나오게 합니다. */ } #fadeShow .active { z-index:1; /* z-index값을 설정하여 맨 위로 올립니다 */ }
[Tutorial][Gallery] 클릭하면 변하는 이미지 슬라이드3 [Gallery] 클릭하면 변하는 이미지 슬라이드 실무에서 쓰는 마크업 - webstoryboy 썸네일 이미지를 클릭하면 자막을 보여주는 갤러리입니다. sample 제주도 아쿠리아움에서1 제주도 아쿠리아움에서2 제주도 아쿠리아움에서3 제주도 아쿠리아움에서4 제주도 아쿠리아움에서5 jQuery html 제주도 아쿠리아움에서1 제주도 아쿠리아움에서2 제주도 아쿠리아움에서3 제주도 아쿠리아움에서4 제주도 아쿠리아움에서5 CSS #gallery { width:600px; } #largeImg { width:600px; height:380px; overflow:hidden; margin-bottom:10px; } #thumbImg li { display:inline; margin-right:3px; } #thum..
[Tutorial][Gallery] 클릭하면 변하는 이미지 슬라이드2 [Gallery] 클릭하면 변하는 이미지 슬라이드 실무에서 쓰는 마크업 - webstoryboy 썸네일 이미지를 클릭하면 이미지가 효과를 내면서 바뀌는 갤러리입니다. Rseult jQuery jQuery(document).ready(function(e) { /* 제이쿼리 선언 */ $("#thumbImg a").click(function(){ /* 작은 이미지를 클릭 했을 때 동작 설정 */ var path = $(this).attr("href"); /* 변수 설정 : attr 속성을 이용해 href 첨부 */ $("#largeImg > img").attr({ src: path }); /* 큰 이미지 속성에 path 변수 첨부 */ $("#largeImg > img").css("opacity","0")...
[Tutorial][Gallery] 클릭하면 변하는 이미지 갤러리 [Gallery] 클릭하면 변하는 이미지 슬라이드 실무에서 쓰는 마크업 - webstoryboy 썸네일 이미지를 클릭하면 이미지가 바뀌는 갤러리입니다. Result jQuery jQuery(document).ready(function(e) { /* 제이쿼리 문서 선언 */ $("#thumbImg a").click(function(){ /* 작은 이미지를 클릭 했을 때 동작 설정 */ var path = $(this).attr("href"); /* 변수 설정 : attr 속성을 이용해 href 첨부 */ $("#largeImg > img").attr({ src: path }); /* 큰 이미지 속성에 path 변수 첨부 */ return false; }); }); html /* 큰 이미지 설정 */ /* ..