본문 바로가기

광고

Design

Reference

Tutorial

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

CSS

NEWS

SITE

Coding


광고

이미지 슬라이드

[Gallery] Owl Carousel의 갤러리 슬라이더 두번째 버젼이 나왔네요^^ | 모든 버젼의 호환성과 모듈을 보충하여 두번째 버젼을 출시하였네요^^요즘 이 제이쿼리를 너무 많이 써서쉽게 볼 수가 있는데요~기존의 부족을 점을 보완하여 더 좋은 제이쿼리 슬라이더를 발표했네요^^구 버젼의 브라우저까지 지원을 하네요^^ [바로가기] 요건 초창기 버젼입니다.이것도 쓸만해요^^ [바로가기]
[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] 클릭하면 변하는 이미지 슬라이드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 /* 큰 이미지 설정 */ /* 작..