[jQuery Plugin ] magnify - 이미지 확대 | 축소 등
- 📕 Programing/jQuery
- 2021. 10. 18. 11:20
목표 : 이미지를 팝업창으로 열어서 확대/축소 등 기능 적용
소스
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Magnify Examples</title>
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="../dist/jquery.magnify.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.magnify-modal {
box-shadow: 0 0 6px 2px rgba(0, 0, 0, .3);
}
.magnify-header .magnify-toolbar {
background-color: rgba(0, 0, 0, .5);
}
.magnify-stage {
top: 0;
right: 0;
bottom: 0;
left: 0;
border-width: 0;
}
.magnify-footer .magnify-toolbar {
background-color: rgba(0, 0, 0, .5);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.magnify-header,
.magnify-footer {
pointer-events: none;
}
.magnify-button {
pointer-events: auto;
}
</style>
</head>
<body dir="ltr">
<div class="container">
<div class="image-set">
<a data-magnify="gallery" data-caption="Rémi Bizouard triple champion du monde by malainxx24"
href="https://farm5.staticflickr.com/4267/34162425794_1430f38362_z.jpg">
<img src="https://farm5.staticflickr.com/4267/34162425794_1430f38362_s.jpg" alt="">
</a>
<a data-magnify="gallery" data-caption="Audi RS 5 DTM by Lyudmila Izmaylova"
href="https://farm1.staticflickr.com/4160/34418397675_18de1f7b9f_z.jpg">
<img src="https://farm1.staticflickr.com/4160/34418397675_18de1f7b9f_s.jpg" alt="">
</a>
<a data-magnify="gallery"
data-caption="Paraglider flying over Aurlandfjord, Norway by framedbythomas"
href="https://farm1.staticflickr.com/512/32967783396_a6b4babd92_z.jpg">
<img src="https://farm1.staticflickr.com/512/32967783396_a6b4babd92_s.jpg" alt="">
</a>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../dist/jquery.magnify.js"></script>
<script>
$('[data-magnify]').magnify({
headerToolbar: [
'close'
],
footerToolbar: [
'zoomIn',
'zoomOut',
'prev',
'fullscreen',
'next',
'actualSize',
'rotateRight'
],
title: false
});
</script>
</body>
</html>
결과
참고 URL
https://github.com/nzbin/magnify
GitHub - nzbin/magnify: 🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+!
🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+! - GitHub - nzbin/magnify: 🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+!
github.com
참고 URL
'📕 Programing > jQuery' 카테고리의 다른 글
| [jQuery] match() 함수(특정 문자 포함 여부) (0) | 2023.02.09 |
|---|---|
| [jQuery] checkbox에 체크된 값들만 가져오기 / 전체 선택|해제 (0) | 2023.02.03 |
| [jQuery] 해당 요소의 상위요소 탐색 (0) | 2021.10.13 |
| [jQuery] 테이블의 선택한 열 값 가져오는 방법 (0) | 2021.08.24 |
| [jQuery] selecbox option값 자동 체크 (0) | 2020.05.25 |