유용한 라이브러리 모음

Front/Library

유용한 라이브러리 모음

oodada 2020. 4. 9. 07:10

이미지 갤러리

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>

http://fancybox.net/home

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

글쓰기 라이브러리

https://summernote.org/

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

저작자표시 비영리 동일조건

'Front > 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

현재글유용한 라이브러리 모음

odada