jQuery Gallerybox是一款可以制作全屏响应式效果的jQuery图片画廊插件

jQuery Gallerybox是一款可以制作全屏响应式效果的jQuery图片画廊插件。该图片画廊带缩略图导航，支持半透明背景色，使用淡入淡出的动画过渡效果。它使用简单，而且效果非常不错。

JavaScript 图片展示处理

访问GitHub主页

共3Star

详细介绍

jQuery Gallerybox

Demo: https://rcus.github.io/jquery-gallerybox/

Set up

1. Install via NPM

This is the easiest way to get Gallerybox.

npm install jquery-gallerybox

2. Include files in HTML

Add stylesheet with this line in your <header>-section:

<link rel="stylesheet" href="path/to/gallerybox.css">

Add jQuery (if you haven't) and Gallerybox with these lines at the end of your document, just before the </body>-tag:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="path/to/jquery-gallerybox.js"></script>

Usage

1. Select images

For each image you want to add to the Gallerybox, just add a class. How about gbox?

<img src="image1.jpg" class="gbox">
<img src="image2.jpg" class="gbox">
...

2. Attach with plugin

Bind images with jQuery:

<script>
  $('.gbox').gallerybox();
</script>

Settings

You can use your own settings, just add them when you bind images with jQuery:

<script>
  $('.gbox').gallerybox({
    bgColor: 'blue',
    bgOpacity: 0.5,
    closeText: 'EXIT'
  });
</script>
Option Default Description
bgColor #000 Set backgroundcolor for gallerybox. Use values like '#001f00', 'darkgrey' or 'rgb(21, 21, 14)'.
bgOpacity 0.95 Let you adjust the transparency of the backgroundcolor. Use values from 0 to 1.
closeText CLOSE Use your own text in the top-right corner.

License

Released under the MIT license, see LICENSE.

推荐源码