建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

simplelightbox 响应式触控图像JS灯箱画廊插件

来源:易助科技网浏览量:23收藏

简介


simplelightbox是一个灵活、响应迅速、移动友好的 JS 插件,可以帮助您在PC端和移动网站上创建图像灯箱和图库灯箱。


更多灯箱画廊插件:👉  [ 详情 ]


simplelightbox 响应式触控图像JS灯箱画廊插件


插件特点


插件特点

响应迅速

支持触屏

翻页图标支持

易于安装,易于使用

极简主义

只包含一些css。你可以随心所欲地改变风格!

有很多选择

预加载下一个和上一个图像

Android、iOs和Windows手机支持

CSS3对旧浏览器的回退转换

可以使用jQuery 1.x、2.x和3.x

键盘支持

收缩以缩放

双击缩放


浏览器支持情况


适用于所有现代浏览器,甚至包括IE 11。



使用


1. 引入


安装


// YARN
yarn add simplelightbox



//NPM
npm install simplelightbox

//Module with Babel tranformation
import SimpleLightbox from "simplelightbox";

//Plain ES Module without Babel
import SimpleLightbox from "simplelightbox/dist/simple-lightbox.esm";


html中引入文件


<link href="dist/simple-lightbox.min.css" rel="stylesheet" />
<!-- As A Vanilla JavaScript Plugin -->
<script src="dist/simple-lightbox.min.js"></script>
<!-- For legacy browsers -->
<script src="dist/simple-lightbox.legacy.min.js"></script>
<!-- As A jQuery Plugin -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="dist/simple-lightbox.jquery.min.js"></script>



2. HTML


将所有图像插入到图库容器中。该插件将自动从 img 标签的 alt 属性生成标题。要对图像进行分组,只需将 rel 属性添加到链接中,如下所示:


<div class="gallery"> 

  <a href="1.jpg" class="big" rel="rel1">
    <img src="thumb1.jpg" alt="" title="Image 1">
  </a>

  <a href="2.jpg" class="big" rel="rel1">
    <img src="thumb2.jpg" alt="" title="Image 2">
  </a>

  <a href="3.jpg" class="big" rel="rel2">
    <img src="thumb3.jpg" alt="" title="Image 3">
  </a>

  <a href="4.jpg" class="big" rel="rel2">
    <img src="thumb4.jpg" alt="" title="Image 4">
  </a>
  
</div>



3. 调用


// As A Vanilla JavaScript Plugin
var gallery = new SimpleLightbox('.gallery a', { 
    /* options */ 
});

// As A jQuery Plugin -->
var gallery = $('.gallery a').simpleLightbox({
    /* options */
});


如果你给它们不同的选择器,你可以在一个页面上有多个灯箱。下面是一个小例子:


var lightbox1 = $('.lighbox-1 a').simpleLightbox();
var lightbox2 = $('.lighbox-2 a').simpleLightbox();


您可以通过更改Simplelightbox.css中的样式来自定义Simplelightbox。如果使用SASS,可以使用以下变量自定义Simplelightbox


$sl-font-family: Arial, Baskerville, monospace;
$sl-overlay-background: #fff;
$sl-navigation-color: #000;
$sl-caption-color: #fff;
$sl-caption-background: #000;

$sl-counter-fontsize: 1rem;
$sl-caption-fontsize: 1rem;
$sl-close-fontsize: 3rem;

$sl-breakpoint-medium: 35.5em; // 568px, when 1rem == 16px
$sl-breakpoint-large:  50em;   // 800px, when 1rem == 16px

$sl-arrow-fontsize-small:  2rem;
$sl-arrow-fontsize-medium: 3rem;
$sl-arrow-fontsize-large:  3rem;
$sl-img-border-small:  0 none;
$sl-img-border-medium: 0 none;
$sl-img-border-large:  0 none;
$sl-iframe-border-small:  0 none;
$sl-iframe-border-medium: 0 none;
$sl-iframe-border-large:  0 none;

$add-vendor-prefixes: true !default;



4. 配置


PropertyDefaultTypeDescription
sourceAttrhrefstringthe attribute used for large images
overlaytrueboolshow an overlay or not
overlayOpacity0.7floatthe opacity of the overlay
spinnertrueboolshow spinner or not
navtrueboolshow arrow-navigation or not
navText['←','→']arraytext or html for the navigation arrows
captionstrueboolshow captions if availabled or not
captionSelector'img'string or functionset the element where the caption is. Set it to "self" for the A-Tag itself or use a callback which returns the element
captionType'attr'stringhow to get the caption. You can choose between attr, data or text
captionsDatatitlestringget the caption from given attribute
captionPosition'bottom'stringthe position of the caption. Options are top, bottom or outside (note that outside can be outside the visible viewport!)
captionDelay0intadds a delay before the caption shows (in ms)
captionClass''stringadds an additional class(es) to the sl-caption use space or comma to add multiple classes.
closetrueboolshow the close button or not
closeText'×'stringtext or html for the close button
swipeClosetrueboolswipe up or down to close gallery
showCountertrueboolshow current image index or not
fileExt'png|jpg|jpeg|gif'regexp or falselist of fileextensions the plugin works with or false for disable the check
animationSpeed250inthow long takes the slide animation
animationSlidetrueboolweather to slide in new photos or not, disable to fade
preloadingtrueboolallows preloading next und previous images
enableKeyboardtrueboolallow keyboard arrow navigation and close with ESC key
looptrueboolenables looping through images
relfalsemixedgroup images by rel attribute of link with same selector.
docClosetrueboolcloses the lightbox when clicking outside
swipeTolerance50inthow much pixel you have to swipe, until next or previous image
className'simple-lightbox'stringadds a class to the wrapper of the lightbox
widthRatio0.8floatRatio of image width to screen width
heightRatio0.9floatRatio of image height to screen height
scaleImageToRatiofalseboolscales the image up to the defined ratio size
disableRightClickfalsebooldisable rightclick on image or not
disableScrolltrueboolstop scrolling page if lightbox is opened
alertErrortrueboolshow an alert, if image was not found. If false error will be ignored
alertErrorMessage'Image not found, next image will be loaded'stringthe message displayed if image was not found
additionalHtmlfalsestringAdditional HTML showing inside every image. Usefull for watermark etc. If false nothing is added
downloadfalsestringText for a download link below the image. If false nothing is added
historytrueboolenable history back closes lightbox instead of reloading the page
throttleInterval0inttime to wait between slides
doubleTapZoom2intzoom level if double tapping on image
maxZoom10intmaximum zoom level on pinching
htmlClasshas-lightboxstringadds class to html element if lightbox is open. If empty or false no class is set
rtlfalseboolchange direction to rigth-to-left
fixedClasssl-fixedstringelements with this class are fixed and get the right padding when lightbox opens
fadeSpeed300intthe duration for fading in and out in milliseconds. Used for caption fadein/out too. If smaller than 100 it should be used with animationSlide:false
uniqueImagestrueboolwhether to uniqualize images or not
focustrueboolfocus the lightbox on open to enable tab control
scrollZoomtrueboolCan zoom image with mousewheel scrolling
scrollZoomFactor0.5floatHow much zoom when scrolling via mousewheel



5. 事件


NameDescription
show.simplelightboxthis event fires before the lightbox opens
shown.simplelightboxthis event fires after the lightbox was opened
close.simplelightboxthis event fires before the lightbox closes
closed.simplelightboxthis event fires after the lightbox was closed
change.simplelightboxthis event fires before image changes
changed.simplelightboxthis event fires after image was changed
next.simplelightboxthis event fires before next image arrives
nextDone.simplelightboxthis event fires after next image was arrived
prev.simplelightboxthis event fires before previous image arrives
prevDone.simplelightboxthis event fires after previous image was arrived
nextImageLoaded.simplelightboxthis event fires after next image was loaded (if preload activated)
prevImageLoaded.simplelightboxthis event fires after previous image was loaded (if preload activated)
error.simplelightboxthis event fires on image load error


示例


let gallery = new SimpleLightbox('.gallery a');
gallery.on('show.simplelightbox', function () {
	// do something…
});

gallery.on('error.simplelightbox', function (e) {
	console.log(e); // some usefull information
});

// with jQuery nearly the same
let gallery = $('.gallery a').simpleLightbox();
gallery.on('show.simplelightbox', function () {
	// do something…
});



6. 公共方法


NameDescription
openOpens the lightbox with an given Element
closeCloses current openend Lightbox
nextGo to next image
prevGo to previous image
destroyDestroys the instance of the lightbox
refreshDestroys and reinitilized the lightbox, needed for eg. Ajax Calls, or after dom manipulations


示例


var gallery = $('.gallery a').simpleLightbox();

gallery.next(); // Next Image



相关链接


官网地址 : https://simplelightbox.com/

GitHub 地址 :  https://github.com/andreknieriem/simplelightbox

易助科技效果演示地址1:  http://demo.easyzone.net.cn/plugin/simplelightbox/demo/index.html

易助科技效果演示地址2:  http://demo.easyzone.net.cn/plugin/simplelightbox/demo/onlyImages.html