이미지 갤러리
fancybox - Touch enabled, responsive and fully customizable jQuery lightbox script
Combination of jQuery, CSS transitions to spice up the way modal window opens. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor nibh eu nibh scelerisque malesuada. Morbi mollis eleifend turpis. Mauris consequat convallis volutpa
fancyapps.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fancybox</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<style>
img {
display: inline-block;
width: 500px; height: 500px;
object-fit: cover;
}
</style>
</head>
<body>
<a data-fancybox="gallery" data-caption="Caption for single image" href="https://source.unsplash.com/lSXpV8bDeMA/1536x2304"><img src="https://source.unsplash.com/lSXpV8bDeMA/1536x2304"></a>
<a data-fancybox="gallery" data-caption="산이미지" href="https://source.unsplash.com/ty4X72BSsXY/1279x853"><img src="https://source.unsplash.com/ty4X72BSsXY/1279x853"></a>
<a data-fancybox="gallery" data-caption="산이미지" href="https://source.unsplash.com/QkPb5g9p338/1279x719"><img src="https://source.unsplash.com/QkPb5g9p338/1279x719"></a>
<a data-fancybox="gallery" data-caption="산이미지" href="https://source.unsplash.com/z55CR_d0ayg/1279x853"><img src="https://source.unsplash.com/z55CR_d0ayg/1279x853"></a>
<a data-fancybox="gallery" data-caption="산이미지" href="https://source.unsplash.com/IbLZjKcelpM/1020x858"><img src="https://source.unsplash.com/IbLZjKcelpM/1020x858"></a>
<a data-fancybox="gallery" data-caption="산이미지" href="https://source.unsplash.com/KgCbvOWYuU0/1279x870"><img src="https://source.unsplash.com/KgCbvOWYuU0/1279x870"></a>
</body>
</html>
Fancybox - Fancy jQuery lightbox alternative
What is it? FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. It was built using the jQuery library. Licensed under both MIT and GPL licenses Features Can display images, HTML
fancybox.net
-prefix-free
-prefix-free를 사용하면 어디에서나 접두사가없는 CSS 속성 만 사용할 수 있습니다.
https://leaverou.github.io/prefixfree/
Prefix free: Break free from CSS vendor prefix hell!
-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. Test drive Test the prefixing that -prefix-free would do for this browser, by writi
leaverou.github.io
gauge.js
그래프 라이브러리
http://bernii.github.io/gauge.js/
gauge.js
Features No images, no external CSS - pure canvas No dependencies (jQuery is supported, but not required) Highly configurable Resolution independent Animated guage value changes (!) Works in all major browsers MIT License Usage var opts = { angle: 7, // Th
bernii.github.io
Bootstrap-select
https://developer.snapappointments.com/bootstrap-select/
Getting Started | bootstrap-select · SnapAppointments Developer
Getting Started Quick start Bootstrap-select requires jQuery v1.9.1+, Bootstrap’s dropdown.js component, and Bootstrap's CSS. If you're not already using Bootstrap in your project, a precompiled version of the Bootstrap v3.3.7 minimum requirements can be d
developer.snapappointments.com
Datepicker
데이터 테이블 라이브러리
https://vitalets.github.io/bootstrap-datepicker/
Datepicker for Bootstrap
language string en The two-letter code of the language to use for month and day names. These will also be used as the input's value (and subsequently sent to the server in the case of form submissions). Currently ships with English ('en'), German ('de'), B
vitalets.github.io
Summernote
글쓰기 라이브러리
Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
summernote.org
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>
<body>
<div id="summernote"><p>Hello Summernote</p></div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
</body>
</html>
Custom Content Scroller
사용자 스크롤 라이브러리
https://manos.malihu.gr/jquery-custom-content-scroller/
jQuery custom content scroller – malihu | web design
Last updated on Jul 11, 2016 Originally published on August 1, 2010 by malihu, under Plugins. Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQue
manos.malihu.gr
'Skill > Library' 카테고리의 다른 글
| GaugeMeter (0) | 2020.10.13 |
|---|---|
| 무료 템플릿 사이트 (0) | 2020.10.13 |
| css Animate (0) | 2020.09.22 |
| 원페이지 애니메이션 스크롤링 (onepage animation scroll) (0) | 2020.08.25 |
| scrollUp jQuery plugin (0) | 2020.08.25 |