colorbox 플러그인
컬러박스 사용법
1. JS 부분 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 $(document).ready(function(){ //Examples of how to assign the Colorbox event to elements $(".group..
slyeee.tistory.com
- rel : 그룹화
<link rel="stylesheet" href="css/colorbox.css">
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script src="js/jquery.colorbox.js"></script>
<script>
$(function(){
$('a[rel="colorbox"]').colorbox({
transition:'fade',
opacity:0.8,
onOpen:function(){ //창 뜰 때
alert('7월에 출시된 신제품입니다');
},
onClosed:function(){
alert('한정 재고 상품입니다');
}
});
});
</script>
</head>
<body>
<h1>칼라박스 플러그인</h1>
<a rel="colorbox" title="Chrysanthemum" href="../images/Chrysanthemum.jpg">Chrysanthemum</a>
<a rel="colorbox" title="Desert" href="../images/Desert.jpg">Desert</a>
<a rel="colorbox" title="Hydrangeas" href="../images/Hydrangeas.jpg">Hydrangeas</a>
<a rel="colorbox" title="Jellyfish" href="../images/Jellyfish.jpg">Jellyfish</a>
<a rel="colorbox" title="Koala" href="../images/Koala.jpg">Koala</a>
<a rel="colorbox" title="Lighthouse" href="../images/Lighthouse.jpg">Lighthouse</a>
<a rel="colorbox" title="Penguins" href="../images/Penguins.jpg">Penguins</a>
<a rel="colorbox" title="Tulips" href="../images/Tulips.jpg">Tulips</a>
</body>
- colorbox 알림창
<script>
$(function(){
$('#colorbox').colorbox({
inline:true, //href 정보 전달 -> #popup을 알림창으로 뜨게 함
width:400
}).trigger('click'); //바로 알림창 뜸
});
</script>
</head>
<body>
<a id="colorbox" href="#popup">알림창 보기</a>
<!-- 알림창 영역 -->
<div id="popup_area" style="display:none;">
<div id="popup">
<h2>공지사항</h2>
<p>다음주 월요일 ui 구현 평가</p>
<p>한글문서와 만든 홈페이지를 압축해서 제출</p>
<p>react와 nodejs 수업 진행 예정</p>
</div>
</div>
</body>
- 바로 알림창 open, 3초 후 자동 close
<script>
$(function(){
$('#colorbox').colorbox({
inline:true,
width:400
}).click(function(){
setTimeout(function(){
$.colorbox.close();
},3000);
}).trigger('click');
});
</script>
</head>
<body>
<a id="colorbox" href="#popup">알림창 보기</a>
<!-- 알림창 영역 -->
<div id="popup_area" style="display:none;">
<div id="popup">
<h2>공지사항</h2>
<p>다음주 월요일 ui 구현 평가</p>
<p>한글문서와 만든 홈페이지를 압축해서 제출</p>
<p>react와 nodejs 수업 진행 예정</p>
</div>
</div>
</body>
AJAX (Asynchronous Javascript And XML)
: 비동기식 자바스크립트 XML
웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신
https://dongribooth.tistory.com/12
Ajax 이해하기 - Ajax 란?
이전 포스트 dongribooth.tistory.com/11 에서 Promise 로 간단히 XMLHttpRequest 사용을 래핑하는 방법을 작성해두었는데, 이번에는 XMLHttpRequest 자체에 대해서 공부할 겸 Ajax 에 대한 전반적인 내용을 작성..
dongribooth.tistory.com
http://www.tcpschool.com/ajax/ajax_server_response
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
=> open with live server
※
비동기식
ex.자바스크립트
대기 시 다른 작업하고 있음
빠른 처리 / 한 작업 에러 -> 다른 작업에도 영향
동기식
ex. 자바
작업 받기 위해 기다림
느림 / 독립적 스레드 이용 -> 다른 작업에 영향 X
<script>
$(function(){
$.ajax({
url:'head.html', //다른 html 연결
success:function(data){ //url 연결 성공하면
$('body').prepend(data); //해당 html 내용을 body에 배치
}
});
});
</script>
</head>
<body>
<div id="content">
<h3>여기는 본문</h3>
<p>본문 내용</p>
</div>
</body>
- AJAX - 자바스크립트로 서버 구현 (제이쿼리X)
<script>
$(function(){
window.onload=function(){
var request=new XMLHttpRequest(); //ajax 사용하기 위한 객체
request.open('GET','head.html',false); //(http 요청 전달 방식, url, 동기식 여부)
var preDate=new Date();
request.send();
var nowDate=new Date();
alert(nowDate-preDate); //처리 경과 시간
}
});
</script>
</head>
<body>
<div id="content">
<h3>여기는 본문</h3>
<p>본문 내용</p>
</div>
</body>
<script>
window.onload=function(){
var request=new XMLHttpRequest();
request.onreadystatechange=function(){
//XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때마다 자동으로 호출되는 함수 설정
if(request.readyState==4){
document.body.innerHTML+=request.responseText;
}
}
request.open('GET','head.html',true);
var preDate=new Date();
request.send();
var nowDate=new Date();
alert(nowDate-preDate); //처리 경과 시간
}
</script>
</head>
<body>
<div id="content">
<h3>여기는 본문</h3>
<p>본문 내용</p>
</div>
</body>
※ readystate : XMLHttpRequest 객체의 상태
0. UNSENT : XMLHttpRequest 객체가 생성됨.
1. OPENED : open() 메소드가 성공적으로 실행됨.
2. HEADERS_RECEIVED : 모든 요청에 대한 응답이 도착함.
3. LOADING : 요청한 데이터를 처리 중임.
4. DONE : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.
- json 데이터 가져오기
json : 배열객체로 만들어진 단독 자료 / 개방형 표준 데이터 포맷
속성에도 "" 처리
- product.json
[
{
"name":"삼각김밥",
"price":1200
},
{
"name":"도시락",
"price":4500
},
{
"name":"감동란",
"price":1500
}
]
- html
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$.getJSON('product.json',function(data){ //제이슨 데이터를 함수에 전달
$.each(data,function(key,value){ //key=인덱스 value=제이슨 데이터값
$('#list').append('<h2>'+value.name+'=>'
+value.price+'</h2>');
})
});
});
</script>
</head>
<body>
<h1>편의점 물품리스트</h1>
<div id="list">
</div>
</body>
- XML 데이터 가져오기
XML : html 확장 버전
- product.xml
<?xml version="1.0" encoding="utf-8"?>
<products>
<product>
<name>콜라</name>
<price>2000</price>
</product>
<product>
<name>사이다</name>
<price>1800</price>
</product>
<product>
<name>환타</name>
<price>1500</price>
</product>
</products>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$.ajax({
url:'product.xml',
success:function(data){
$(data).find('product').each(function(){
var name=$(this).find('name').html();
var price=$(this).find('price').html();
$('<h2></h2>').html(name+'->'+price).appendTo('#list');
})
}
});
});
</script>
</head>
<body>
<h1>편의점 물품리스트</h1>
<div id="list">
</div>
</body>
- json 데이터 가져오기2
- 플리커 이미지 앨범 colorbox
<link rel="stylesheet" href="css/colorbox.css">
<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){ //데이터의 items 항목 가져옴
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" action="">
<input type="text" name="tags">
<!--name값 임의 X
(tags:검색하려는 사진 키워드 , format:가져올 데이터 형식 지정) -->
<input type="hidden" name="format">
<input type="submit" value="검색">
</form>
<div id="images">
</div>
</body>
=> 검색 기능 구현 안 됨
'Programming > 국비학원' 카테고리의 다른 글
| 220728 - 제이쿼리 - 플러그인 제작 (0) | 2022.07.29 |
|---|---|
| 220727 - 제이쿼리 - 플러그인 (Masonry, bxslider, cookie) (0) | 2022.07.28 |
| 220725 - 제이쿼리 - 예제, 플러그인 (ui, colorbox) (0) | 2022.07.26 |
| 220722 - 제이쿼리 - ui 플러그인 (0) | 2022.07.23 |
| 220721 - 제이쿼리 - 이미지 슬라이드 구현 (0) | 2022.07.22 |
