Responsive-Lightbox - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #rust #deep-learning #macos #nodejs #windows #cli #awesome-list #vue #pytorch #ios #openai #open-source

Responsive-Lightbox

(★ 112)

Lightweight, image only responsive, jQuery lightbox plugin

파일 탐색기

최종 버전 다운로드 (.zip)

- - sample_a.jpg
  - sample_a_thumb.jpg
  - sample_b.jpg
  - sample_b_thumb.jpg
  - sample_c.jpg
  - sample_c_thumb.jpg
  - sample_d.jpg
  - sample_d_thumb.jpg
- demo.css
- disabled_on_mobile.html
- groups.html
- index.html
- index_button_define.html
- index_with_captions.html
- jquery.lightbox.less
- jquery.lightbox.scss
.gitignore
close.png
Gruntfile.js
jquery.lightbox.css
jquery.lightbox.js
jquery.lightbox.min.css
jquery.lightbox.min.js
loading.gif
next.png
package-lock.json
package.json
previous.png
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/duncanmcdougall/Responsive-Lightbox

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd Responsive-Lightbox

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. 공식 설치 스크립트

쉬움 추천

사전 준비물

Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다.

npm install -g grunt-cli

npm 레지스트리에 배포된 패키지를 전역으로 설치합니다. 소스 클론이 필요 없습니다.

✅ 설치 후 새 터미널을 열고, 프로그램의 버전 확인 명령(예: --version)으로 정상 설치됐는지 확인하세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

3. Node.js

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install -g grunt-cli

npm 레지스트리에 배포된 패키지를 전역으로 설치합니다. 소스 클론이 필요 없습니다.

cd Responsive-Lightbox && npm install

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Responsive-Lightbox
===================
by [Duncan McDougall](https://www.belter.io) | [@duncanmcdougall](http://www.twitter.com/duncanmcdougall)

jQuery responsive lightbox plugin.

Shrinks the image to the width & height of the browser. Only handles images so it's nice and lightweight.

Demonstration
-------------
[Responsive Lightbox Demo](https://lightbox.belter.io/)

Dependencies
-------------
Requires jQuery >= 1.4 and < 3

Browser Support
-------------
IE7+

Usage
------

```html
<html>
<head>
<link rel="stylesheet" href="lightbox.css" />
</head>
<body>

<div class="gallery">
<a href="photo1.jpg">Image 1</a>
<a href="photo2.jpg">Image 2</a>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="lightbox.min.js"></script>

<script>
 $(function()
 {
    $('.gallery a').lightbox(); 
	
	// If you want seperate galleries on the same page
	// just specify different class names. 
	$('.gallery-2 a').lightbox();
 });
</script>
</body>

```

Options
------

```bash
    $('.gallery').lightbox({ margin: 20, nav: false, blur: true, minSize: 480 });
```

* margin - int - default 50. Minimum margin around the image
* nav - bool - default true. enable navigation
* blur - bool - default true. Blur other content when open using css filter
* minSize - int - default 0. Min window width or height to open lightbox. Below threshold will open image in a new tab.

Captions
------

Add your captions as a data attribute to the anchor. e.g.

```html
    <a href="myimage.jpg" data-caption="This is a picture of a cat" >
```

Installing with Bower
------

If bower is your thing you can install using the following command

```bash
bower install responsive-lightbox
```

Contributing
------

First, clone a copy of using the GUI or the main git repo by running:

```bash
git clone git://github.com/duncanmcdougall/Responsive-Lightbox.git
```

I'm using GruntJS to do all the minification and linting as build tasks.

Install the grunt-cli package so that you will have the correct version of grunt available from any project that needs it. This should be done as a global install:

```bash
npm install -g grunt-cli
```

Enter the jquery directory and install the Node dependencies, this time *without* specifying a global install:

```bash
cd Responsive-Lightbox && npm install
```

Make sure you have `grunt` installed by testing:

```bash
grunt -version
```

Then, to get a complete, minified (w/ Uglify.js), linted (w/ JSHint) version of the plugin, type the following:

```bash
grunt
```

The built version of the plugin will be saved to .min versions.

Next Steps
------
* Options: { loop }
* Faster image switching
* Light and dark simple themes

Thanks To
--------
I'd like to thank [Matthew Hartman](http://www.matthewhartman.com.au/), [imiric](https://github.com/imiric) et all for contributing a number of improvements to the lightbox.

MIT License
--------
This plugin is released under the [MIT License](http://duncanmcdougall.mit-license.org/). Enjoy.