16 AJAX 갤러리
jQuery load()는 특정 URL의 리소스를 요청하고, 응답을 HTML로 변환하여 지정된 DOM 요소에 로드합니다.
💡 ajax (Asynchronous JavaScript and XML) (에이싱크러너스 자바스크립트 앤 xml) 비동기 방식의 자바스크립트와 xml
💡Ajax(Asynchronous Javascript and XML)는 클라이언트 가 비동기방식으로 자바스크립트를 이용하여 > 화면 전환 없이 서버측에 자료(XML,HTML,JSON,텍스트…)를 요청할때 사용
- 동기방식: 서버에 신호를 보냈을때 응답이 돌아와야 다음 동작을 수행
- 비동기방식: 신호를 보냈을때 응답여부와 상관없이 다음 동작 실행
- 예제
- HTML
- CSS
- JQ
- Vanilla
- SUB
1<!DOCTYPE html>2<html lang="ko">3 <head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 <title>Document</title>7 <link rel="stylesheet" href="1.css" />8 </head>9
10 <body>11 <div class="row">12 <ul>13 <li><img src="http://qwerew.cafe24.com/images/1.jpg" data-src="gallery/1.html" class="pic" /></li>14 <li><img src="http://qwerew.cafe24.com/images/2.jpg" data-src="gallery/2.html" class="pic" /></li>15 <li><img src="http://qwerew.cafe24.com/images/3.jpg" data-src="gallery/3.html" class="pic" /></li>16 </ul>17 </div>18 <div id="lightbox">19 <div id="lightboxImage"></div>20 </div>21 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>22 <script src="jq.js"></script>23 </body>24</html>1.row {2 width: 420px;3 margin: 0 auto;4}5
6.row ul {7 list-style: none;8 margin: 0;9 padding: 0;10}11
12.row ul li {13 display: inline-table;14 width: 30%;15}16.row ul li img {17 width: 100%;18}19/* 라이트 박스 스타일 */20#lightbox {21 position: fixed;22 width: 100%;23
24 height: 100%;25 background-color: rgba(0, 0, 0, 0.7);26 top: 0;27 left: 0;28 display: none;29}30
31/* 라이트 박스 안의 이미지 */32#lightbox {33 position: fixed;34 top: 50%;35 left: 50%;36 transform: translate(-50%, -50%);37 border: 5px solid #eee;38 overflow: hidden;39 z-index: 100;40}41
42.all_scrollFixed {43 overflow: hidden;44}45.all_scrollFixed::before {46 position: fixed;47 top: 0;48 left: 50%;49 width: 1000%;50 height: 10000%;51 background-color: rgba(0, 0, 0, 0.2);52 transform: translateX(-50%);53 content: '';54 z-index: 95;55}56#lightboxImage {57 left: 50%;58 transform: translateX(-50%);59 position: fixed;60 width: 80%;61 height: 80vh;62 overflow-y: auto;63 top: 100px;64}1const pics = $('.pic');2const lightbox = $('#lightbox');3const lightboxImage = $('#lightboxImage');4
5pics.on('click', function () {6 const bigLocation = $(this).attr('data-src');7 lightboxImage.load(bigLocation);8 $('html').addClass('all_scrollFixed');9 lightbox.css('display', 'block');10});11
12lightbox.on('click', function () {13 lightbox.css('display', 'none');14 $('html').removeClass('all_scrollFixed');15});1const pics = document.getElementsByClassName('pic'); // .pic인 요소들을 가져와 pics 라는 변수에 저장. querySelectorAll(".pic")도 가능2const lightbox = document.getElementById('lightbox'); // 라이트 박스. querySelector("#lightbox")도 가능3const lightboxImage = document.getElementById('lightboxImage'); // 라이트 박스 안의 이미지. querySelector("#lightboxImage")도 가능4
5for (i = 0; i < pics.length; i++) {6 pics[i].addEventListener('click', showLightbox);7}8
9async function showLightbox() {10 const bigLocation = this.getAttribute('data-src'); // bigLocation = this.data-src; 도 가능.11 try {12 const response = await fetch(bigLocation);13 console.log(response);//응답결과확인14 if (!response.ok) {15 throw new Error(`HTTP error! status: ${response.status}`);16 }17 const htmlContent = await response.text();18 lightboxImage.innerHTML = htmlContent;19 lightbox.style.display = 'block'; // 라이트박스 이미지를 화면에 표시20 document.querySelector('html').style.overflow = 'hidden';21 } catch (error) {22 console.log(error);23 }24}25
26lightbox.onclick = function () {27 //click 이벤트가 발생했을 때 실행할 함수 선언28 lightbox.style.display = 'none'; // lightbox 요소를 화면에서 감춤29 document.querySelector('html').style.overflow = 'visible';30};#9: 이 함수는 비동기적으로 작동하며, async 키워드를 사용하여 선언되었다. async는 함수내부에셔 await 키워드를 사용할 수 있게 해준다. await는 프로미스(Promise)가 처리될 때까지 함수 실행을 일시적으로 중지시키고, 프로미스의 결과가 반환되면 함수를 실행한다.
#11: try ~ catch 통신 성공시 try를 실행하고 에러 발생시 catch를 실행한다.
#17: response 에 저장된 값을 text 로 변환한다
1<!DOCTYPE html>2<html lang="ko">3 <head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 <title>Document</title>7 <style>8 body {9 text-align: center;10 font-size: 2em;11 color: white;12 }13 .col {14 display: grid;15 grid-template-columns: 1fr 1fr;16 gap: 1rem;17 }18 </style>19 </head>20
21 <body>22 <h1>h1</h1>23 <div class="col">24 <img src="http://qwerew.cafe24.com/images/1.jpg" alt="" />25 <img src="http://qwerew.cafe24.com/images/1.jpg" alt="" />26 <img src="http://qwerew.cafe24.com/images/1.jpg" alt="" />27 <img src="http://qwerew.cafe24.com/images/1.jpg" alt="" />28 <img src="http://qwerew.cafe24.com/images/1.jpg" alt="" />29 </div>30 </body>31</html>