---
# System prepended metadata

title: npm Lightbox 使用

---

# npm Lightbox 使用

## 官網
https://lokeshdhakar.com/projects/lightbox2/#getting-started

## 安裝

```
npm install lightbox2 --save
```
required ： jquery 1.7以上的版本, 載入css

## 使用方式
attribube
    required : data-lightbox 
    options : data-title , data-alt

```
<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>
```

## 調整

positionFromTop 設定成 window.scrollY 圖片才不會在最上面
```
<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true,
      'positionFromTop' : window.scrollY
    })
</script>
```

