220727 - 제이쿼리 - 플러그인 (Masonry, bxslider, cookie)
- 오류 해결
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.colorbox.js"></script>
<script>
$(function(){
$('#searchForm').submit(function(event){ //submit하면 함수 수행
//ajax 실행(제이슨 데이터 가져와 html에 연결)
var url='http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?';
$.getJSON(url,$(this).serialize(),function(data){ //serialize:외부데이터 요청
$('#images').empty(); //객체 내용 비움 (본인 삭제 X)
$.each(data.items,function(index, item){ //?
var $image=$('<img />').attr({
src:item.media.m
}); //제이쿼리 변수
$('<a></a>').attr({
class:'flickr-image',
href:item.media.m,
rel:'colorbox'
}).html($image).appendTo('#images');
});
$('a.flickr-image').colorbox();
});
//이벤트전달, 기본이벤트 제거 => return false
return false;
});
});
</script>
</head>
<body>
<h1>칼라박스 활용한 플리커 이미지 앨범</h1>
<form id="searchForm">
<input type="text" name="tags">
<!--name값 임의 X
(tags:검색하려는 사진 키워드 , format:가져올 데이터 형식 지정) -->
<input type="hidden" name="format" value="json">
<input type="submit" value="검색">
</form>
<div id="images">
</div>
</body>
=> 지난번 검색 기능 구현 안 된 건 input에 json값을 안 줘서 발생한 거였다
Masonry 플러그인
: 화면 크기에 따라 요소 간 공백 채워줌
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #525252;
}
.item{
margin: 5px;
width: 100px;
height: 100px;
background-color: white;
border-radius: 10px;
float: left;
}
.big{
width: 210px;
height: 430px;
}
.normal{
width: 210px;
height: 210px;
}
.small{
width: 100px;
height: 100px;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script src="js/masonry.pkgd.min.js"></script>
<script>
$(function(){
$('#masonry-container').masonry({
itemSelector:'.item',
columnWidth:110
});
});
</script>
</head>
<body>
<div id="masonry-container">
<div class="item small"></div>
<div class="item big"></div>
<div class="item normal"></div>
<div class="item small"></div>
<div class="item small"></div>
<div class="item small"></div>
<div class="item normal"></div>
<div class="item normal"></div>
<div class="item small"></div>
<div class="item small"></div>
</div>
</body>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #525252;
}
.item{
margin: 5px;
width: 100px;
height: 100px;
background-color: white;
border-radius: 10px;
float: left;
}
.big{
width: 210px;
height: 430px;
}
.normal{
width: 210px;
height: 210px;
}
.small{
width: 100px;
height: 100px;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script src="js/masonry.pkgd.min.js"></script>
<script>
$(function(){
$('#masonry-container').masonry({
itemSelector:'.item',
columWidth:110,
isAnimated:true
});
$(document).on('click','.item',function(){
//미래 객체에 이벤트 연결 //item 클릭 시 실행
if(event.shiftKey){
$('#masonry-container').masonry('remove',$(this));
//(실행할 메소드,실행될 객체) $('#masonry-container').masonry('layout');
//레이아웃 새로고침 }else{
var item=$(this).clone();
$('#masonry-container').append(item);
//클릭한 객체 클론을 영역에 추가 $('#masonry-container').masonry('addItems',item);
//masonry 플러그인과 연결해 플러그인 영역에 추가 $('#masonry-container').masonry('layout');
}
});
});
</script>
</head>
<body>
<div id="masonry-container">
<img src="../images/Chrysanthemum.jpg" class="item small">
<img src="../images//Desert.jpg" class="item big">
<img src="../images/Hydrangeas.jpg" class="item normal">
<img src="../images/Jellyfish.jpg" class="item normal">
<img src="../images/Koala.jpg" class="item small">
<img src="../images/Lighthouse.jpg" class="item big">
<img src="../images/Penguins.jpg" class="item small">
<img src="../images/Tulips.jpg" class="item big">
<img src="../images/coffee-blue.jpg" class="item small">
<img src="../images/umbrella.jpg" class="item normal">
</div>
</body>
|
cs |
애니메이션 실습 테스트
- 클릭 시 이미지가 왼쪽으로 사라짐 -> 오른쪽에서 다시 들어옴
<style>
div{
width: 100px;
height: 150px;
border: 1px solid blue;
margin: 0 auto;
overflow: hidden;
}
img{
width: 100px;
height: 150px;
position: relative;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script>
$(function(){
$('img').click(function(){
$(this).animate({
left:-100
},'fast',function(){ //callback
$(this).css('left',200);
$(this).animate({
left:0
},'fast');
});
});
});
</script>
</head>
<body>
<div>
<img src="../images/Koala.jpg" alt="">
</div>
</body>
bxslider 플러그인
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<style>
.slider img{
width: 500px;
}
li{
list-style: none;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script src="js/jquery.bxslider.min.js"></script>
<script>
$(function(){
$('.slider').bxSlider();
});
</script>
</head>
<body>
<div id="ani">
<ul class="slider">
<li><img src="../images/Chrysanthemum.jpg" alt=""></li>
<li><img src="../images//Desert.jpg" alt=""></li>
<li><img src="../images/Hydrangeas.jpg" alt=""></li>
<li><img src="../images/Jellyfish.jpg" alt=""></li>
<li><img src="../images/Koala.jpg" alt=""></li>
<li><img src="../images/Lighthouse.jpg" alt=""></li>
<li><img src="../images/Penguins.jpg" alt=""></li>
</ul>
</div>
</body>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<link rel="stylesheet" href="css/jquery.bxslider.css">
<style>
.ani{
width: 500px;
overflow: hidden;
}
.slider img{
width: 500px;
}
li{
list-style: none;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script src="js/jquery.bxslider.js"></script>
<script>
$(function(){
$('.slider').bxSlider({
auto:true, //자동 슬라이드
autoControls:true, //시작, 정지 버튼
stopAutoOnClick:true, //사진 양옆 화살표
pager:true //동그란 버튼
});
});
</script>
</head>
<body>
<div id="ani">
<ul class="slider">
<li><img src="../images/Chrysanthemum.jpg" alt=""></li>
<li><img src="../images//Desert.jpg" alt=""></li>
<li><img src="../images/Hydrangeas.jpg" alt=""></li>
<li><img src="../images/Jellyfish.jpg" alt=""></li>
<li><img src="../images/Koala.jpg" alt=""></li>
<li><img src="../images/Lighthouse.jpg" alt=""></li>
<li><img src="../images/Penguins.jpg" alt=""></li>
</ul>
</div>
</body>
|
cs |
- 동그란 버튼을 썸네일 버튼으로 대체
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<link rel="stylesheet" href="css/jquery.bxslider.css">
<style>
#ani{
width: 500px;
overflow: hidden;
}
.slider img{
width: 500px;
margin: 0 auto;
}
li{
list-style: none;
}
.sliderPager li{
float: left;
margin-right: 10px;
}
.sliderPager img{
width: 50px;
height: 50px;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script src="js/jquery.bxslider.js"></script>
<script>
$(function(){
$('.slider').bxSlider({
pagerCustom:'.sliderPager', //작은 이미지 집합과 연결, 동그란 버튼 대체
});
});
</script>
</head>
<body>
<div id="ani">
<ul class="slider">
<li><img src="../images/Chrysanthemum.jpg" alt=""></li>
<li><img src="../images//Desert.jpg" alt=""></li>
<li><img src="../images/Hydrangeas.jpg" alt=""></li>
<li><img src="../images/Jellyfish.jpg" alt=""></li>
<li><img src="../images/Koala.jpg" alt=""></li>
<li><img src="../images/Lighthouse.jpg" alt=""></li>
<li><img src="../images/Penguins.jpg" alt=""></li>
</ul>
<ul class="sliderPager">
<li><a href="#" data-slide-index="0">
<img src="../images/Chrysanthemum.jpg" alt="">
</a></li>
<li><a href="#" data-slide-index="1">
<img src="../images/Desert.jpg" alt="">
</a></li>
<li><a href="#" data-slide-index="2">
<img src="../images/Hydrangeas.jpg" alt="">
</a></li>
<li><a href="#" data-slide-index="3">
<img src="../images/Jellyfish.jpg" alt="">
</a></li>
<li><a href="#" data-slide-index="4">
<img src="../images/Koala.jpg" alt="">
</a></li>
<li><a href="#" data-slide-index="5">
<img src="../images/Lighthouse.jpg" alt="">
</a></li>
<li><a href="#" data-slide-index="6">
<img src="../images/Penguins.jpg" alt="">
</a></li>
</ul>
</div>
</body>
|
cs |
- imageSlider.html에 썸네일 버튼 적용
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
|
<link rel="stylesheet" href="css/jquery.bxslider.css">
<style>
.ani_canvas{
position: relative;
width: 600px;
overflow: hidden;
}
.slider_panel{
position: relative;
width: 3000px;
}
.slider_image{
width: 600px;
height: 400px;
float: left;
}
.slider_panel2 img{
width: 50px;
height: 50px;
margin-top: 10px;
margin-left: 10px;
cursor: pointer;
}
.slider_panel2{
width: 600px;
text-align: center;
}
.slider_text_panel{
position: absolute;
top: 200px;
left: 50px;
}
.slider_text{
position: absolute;
width: 300px;
height: 200px;
color: #ff0;
}
.control_panel{
position: absolute;
top: 380px;
left: 270px;
height: 13px;
overflow: hidden;
}
.control_button{
position: relative;
cursor: pointer;
background: url(../images/point_button.png);
width: 12px;
height: 46px;
float: left;
}
.control_button:hover{
top:-16px;
}
.control_button.active{ /*두 클래스 모두 가지면*/
top:-31px
}
.l_control{
position: absolute;
top: 150px;
left: 0;
cursor: pointer;
}
.r_control{
position: absolute;
top: 150px;
right: 0;
cursor: pointer;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script src="js/jquery.bxslider.js"></script>
<script>
$(function(){
//초기 화면 - 0번째 이미지 설정
var i=0;
var i2;
// var on=false;
// var auto;
imgSlider(i);
// autoSlider();
//5 버튼 클릭
$('.control_button').click(function(){
i=$(this).index(); //본인 인덱스 얻어와야 함
imgSlider(i);
});
//썸네일 클릭
$('.slider_image2').click(function(){
i2=$(this).index();
imgSlider(i2);
});
//left
$('.l_control').click(function(){
i--;
if(i<0){i=0;}
imgSlider(i);
});
//right
$('.r_control').click(function(){
i++;
if(i>4){i=4;}
imgSlider(i);
});
// $('.slider_panel').bxSlider({
// pagerCustom:'.slider_panel2'
// });
//애니메이션 캔버스 영역 이벤트 (자동 슬라이드 중지)
// $('.ani_canvas').hover(function(){
// clearInterval(auto);
// },function(){
// autoSlider();
// });
//자동 이미지 슬라이드
// function autoSlider(){
// auto=setInterval(function(){
// if(i<4 &&on==false){
// $('.r_control').trigger('click');
// } else{
// on=true;
// }
// if(i>0 &&on==true){
// $('.l_control').trigger('click');
// }else{
// on=false;
// }
// },1000);
// }
//이미지 슬라이드 구현 함수
function imgSlider(i){
//두가지 조건 충족해야 하면 1순위로 작성
if (i<4 && i>0){
$('.r_control').fadeIn('fast');
$('.l_control').fadeIn('fast');
}
if (i==4){
$('.r_control').fadeOut('fast');
$('.l_control').fadeIn('fast');
}
if (i==0){
$('.l_control').fadeOut('fast');
$('.r_control').fadeIn('fast');
}
$('.slider_panel').animate({
left:(-600)*i //인덱스별 좌측이동
},'fast');
$('.control_button').removeClass('active'); //기존 addclass 초기화
$('.control_button').eq(i).addClass('active'); //지금 선택한 버튼에 addclass
$('.slider_text').hide(); //기존 다른 사진 설명 hide
$('.slider_text').eq(i).fadeIn('slow'); //지금 선택한 사진 show
}
});
</script>
</head>
<body>
<h1>이미지 슬라이더</h1>
<!-- 이미지 슬라이더 영역 -->
<div class="ani_canvas">
<!-- 슬라이더 패널 : 움직이는 이미지가 전환되는 효과 -->
<div class="slider_panel"> <!--다섯 이미지 일렬로 담음-->
<img class="slider_image" src="../images/Koala.jpg" alt="">
<img class="slider_image" src="../images/Desert.jpg" alt="">
<img class="slider_image" src="../images/Lighthouse.jpg" alt="">
<img class="slider_image" src="../images/Jellyfish.jpg" alt="">
<img class="slider_image" src="../images/Penguins.jpg" alt="">
</div>
<!-- 각 이미지에 대한 설명을 담는 패널 -->
<div class="slider_text_panel">
<div class="slider_text">
<h2>Koala</h2>
</div>
<div class="slider_text">
<h2>Desert</h2>
</div>
<div class="slider_text">
<h2>Lighthouse</h2>
</div>
<div class="slider_text">
<h2>Jellyfish</h2>
</div>
<div class="slider_text">
<h2>Penguins</h2>
</div>
</div>
<!-- 컨트롤 버튼 패널 -->
<div class="control_panel">
<div class="control_button"></div>
<div class="control_button"></div>
<div class="control_button"></div>
<div class="control_button"></div>
<div class="control_button"></div>
</div>
<!-- 좌우 컨트롤 버튼 패널 -->
<div class="lr_control_panel">
<img class="l_control" src="../images/leftArrow.png" alt="">
<img class="r_control" src="../images/rightArrow.png" alt="">
</div>
</div>
<div class="slider_panel2"> <!--다섯 이미지 일렬로 담음-->
<img class="slider_image2" src="../images/Koala.jpg" alt="">
<img class="slider_image2" src="../images/Desert.jpg" alt="">
<img class="slider_image2" src="../images/Lighthouse.jpg" alt="">
<img class="slider_image2" src="../images/Jellyfish.jpg" alt="">
<img class="slider_image2" src="../images/Penguins.jpg" alt="">
</div>
</body>
|
cs |
쿠키 플러그인
<style>
#notice_wrap{
position: absolute;
border: 1ps solid blue;
z-index: 100;
left: 200px;
top: 100px;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script>
$(function(){
if($.cookie('popup')=='none'){ //popup 쿠키가 none이면 숨김
$('#notice_wrap').hide();
}
var $expChk=$('#expiresChk'); //input 박스 객체 정보를 제이쿼리 변수에 전달
$('.closeBtn').on('click',function(){
if($expChk.is(':checked')){ //input 박스 객체 정보가 체크돼있으면
$.cookie('popup','none',{ //popup을 none으로
expires:3, //3일동안 저장
path:"/"
});
}
$('#notice_wrap').hide();
});
});
</script>
</head>
<body>
<h1>여기는 메인</h1>
<div id="notice_wrap">
<p>월요일은 UI 구현 평가일</p>
<img src="../images/first.jpg" alt="">
<p class="closeWrap">
<input type="checkbox" name="expiresChk" id="expiresChk">
<label for="expiresChk">3일 동안 열지 않기</label> <!--default 3일-->
<button class="closeBtn">닫기</button>
</p>
</div>
</body>
※ 크롬 디버깅
f12
f11 => breakpoint 지정, 포인트 전까지 실행시켜둠