网站建设之用于移动响应的顶级图片展示效果

Lightbox是一种在网络上叠加图像的流行方式。当您单击图像时,灯箱会弹出某种形式的动画并使背景变暗,因此您的焦点在于图像本身。图像的比例也更大。我们多年来所知道的最流行的Lightbox JavaScript库让您可以在桌面上做到这一点,但在移动平台上却不是这么做。 忽视这一点,以及对响应性的需求,现在不 WP网站建设

Lightbox是一种在网络上叠加图像的流行方式。当您单击图像时,灯箱会弹出某种形式的动画并使背景变暗,因此您的焦点在于图像本身。图像的比例也更大。我们多年来所知道的最流行的Lightbox JavaScript库让您可以在桌面上做到这一点,但在移动平台上却不是这么做。

忽视这一点,以及对响应性的需求,现在不是一个好主意,这就是为什么必须检查这15个响应式Lightbox库的集合。

PhotoSwipe

WordPress网站建设

PhotoSwipe是我最喜欢的ligthbox插件。它具有轻巧,触控功能,最重要的是模块化设计,可以让我放弃一些不需要的部件。它在移动浏览器中运行良好。您可以像在本机应用程序中一样用手指轻扫图像,并且过渡运行非常顺畅。

  • 依赖性:无
  • 浏览器支持:IE8 +,Chrome,Firefox,Safari,Opera和几个移动浏览器。
  • 许可证:MIT许可证

MagnificPopup

WordPress网站建设

MagnificPopup是另一个灯箱插件,由给我们PhotoSwipe,Dmitry Semenov的同一个人开发。它以jQuery / Zepto插件的形式出现,并且还带来PhotoSwipe中缺少的功能,例如支持Video,Map和Ajax内容。对于那些喜欢手头有更多功能的人来说,这是一个很好的选择。

  • 依赖性:jQuery 1.9.1+或Zepto.js
  • 浏览器支持:IE7(部分),IE8 +,Chrome,Firefox,Safari和Opera。
  • 许可证:MIT许可证

SwipeBox

WordPress网站建设

Swipebox是一个jQuery插件,支持移动平台的触摸手势。除图像外,它还支持Youtube和Vimeo的视频。Swipebox也很容易实现,并且有一些选项可以自定义它的行为。我认为Swipebox是一款适用于JavaScript新手的精彩灯箱插件。

  • 依赖:jQuery
  • 浏览器支持:IE9 +,Chrome,Safari,Firefox,Opera,IOS4 +,Android和Windows Phone。
  • 许可证未定义

iLightbox

iLightbox

iLighbox是一个jQuery灯箱插件,提供广泛的媒体类型支持:包括视频,Flash / SWF,Ajax内容,iframe和地图。此插件还在媒体上添加了社交媒体按钮,允许您的用户将其分享到Facebook,Twitter或Reddit。另请查看高级部分,了解iLightbox如何在不同场景中应用。

  • 依赖:jQuery
  • 浏览器支持:IE7 +,Chrome,Firefox,Safari和Opera
  • 许可证未定义

Lightbox for Bootstrap

Lightbox for Bootstrap

Lightbox是Bootstrap中一个明显缺失的部分。这个插件修复了这个问题。如果您使用的是Bootstrap,我强烈建议您使用此库。该插件与Bootstrap的代码库完美集成。

  • 依赖:jQuery和Bootstrap Modal
  • 浏览器支持:IE8 +,Chrome,Firefox,Safari和Opera
  • 许可证:GNU许可证

Nivo灯箱

Nivo灯箱

Nivo Lightbox是一款灵活的灯箱插件。包含几个选项可将外观更改为您希望显示的方式,例如更改主题,过渡效果和切换导航。

  • 依赖:jQuery
  • 浏览器支持:IE9 +,Chrome,Firefox,Safari和Opera
  • 许可证:MIT许可证

ImageLightbox

ImageLightbox

ImageLightbox是一个没有膨胀的灯箱插件。它专门为图像而构建,因此给出了名称 – 不支持视频或其他媒体类型。它也不需要无关的HTML标记; 的<img>元件就足够了。该插件正常工作。

  • 依赖:jQuery
  • 浏览器支持:IE9 +,Chrome,Firefox,Safari和Opera
  • 许可证未定义

迷你灯箱

迷你灯箱

另一个没有臃肿的灯箱插件。该库只有2kb,仅适用于图像。如果您只指定最新的浏览器并且不需要覆盖其他媒体类型(如视频),那么这是一个完美的插件。

  • 依赖性:无
  • 浏览器支持:IE10 +,Chrome,Firefox,Safari和Opera
  • 许可证:MIT许可证

LightCase

LightCase

Lightcase是一个可爱的灯箱插件。它带有几个动画,使用户交互活跃,如淡入淡出,弹性缩放和滚动。此外,它还支持各种类型的媒体,包括Youtube嵌入,HTML视频,SWF和输入表单。该插件还可以正确处理无法访问的媒体或发现错误

  • 依赖:jQuery
  • 浏览器支持:IE9 +,Chrome,Firefox,Safari和Opera
  • 许可证:GPL许可证

Yalb

Yalb

Yalb代表Yet Another Lightbox – 但事实并非如此。Yalb附带了一些API,包括允许您识别灯箱状态的自定义事件,例如何时open以及何时close。Yalb有两个版本,Vanilla JavaScript和jQuery插件。

  • 依赖性:无
  • 浏览器支持:IE9 +,Chrome,Firefox,Safari和Opera
  • 许可证:MIT许可证

羽之

羽之

该6KB 羽之是精明的开发商裸插件,只携带必需品。例如,如果您需要在图库中对图像灯箱进行分组,则可以包含图库扩展。您还可以为此插件开发自己的扩展,以满足您的项目需求。

  • 依赖:jQuery
  • 浏览器支持:IE8 +,Chrome,Firefox,Safari和Opera
  • 许可证:MIT许可证

LightLayer

LightLayer

LightLayer是一个易于使用的灯箱插件。它有一些选项,自定义JavaScript方法和自定义事件。该插件适用于图像,视频,地图和外部内容。我们还能问什么呢。

  • 依赖:jQuery
  • 浏览器支持:IE9 +,Chrome,Firefox,Safari和Opera
  • 许可证:MIT许可证

LightGallery

LightGallery

LightGallery,另一个添加了许多功能的灯箱插件。它提供了20多种选项来定制灯箱最细微的细节。

  • 依赖:jQuery
  • 浏览器支持:IE7 +,Chrome,Firefox,Safari,Opera,iOS,Android和Windows Phone
  • 许可证:MIT许可证

FluidBox

FluidBox

Fluidbox是一款灵感来自Medium的图像灯箱插件。它适用于各种情况下的图像,包括浮动图像,具有absolute位置的图像,具有边框和填充的图像以及图库。看看它是如何构建的。如果你需要一个WordPress插件,那就有一个。

  • 依赖:jQuery
  • 浏览器支持:IE9 +,Chrome,Firefox,Safari,Opera
  • 许可证:MIT许可证

StripJS

StripJS

StripJS是一个独特的灯箱插件。插件不是覆盖图像,而是从侧面滑动图像,这样它就不会阻挡整个内容。StripJS支持图像和视频。

  • 依赖:jQuery
  • 浏览器支持:IE7 +,Chrome,Firefox,Safari,Opera,iOS 5+和Android 3+
  • 许可:Creative Commons BY-NC-ND 3.0许可

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/11721

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:itbound@sina.com

工作时间:周一至周六,9:30-18:30

 

QR code