使用JQuery插件Pinto 和Lightbox 制作带网格布局的响应式(Responsible)画廊(gallery)

Pinto(使用方法:http://www.jqueryscript.net/layout/Pinterest-Like-Responsive-Dynamic-Grid-Layout-Plugin-Pinto.html)用于制作网格化画廊布局,特点如下:

Features:

Super simple and lightweight.

Auto rearrange images with a smooth CSS3 transition on window resize.

Fluid item width based on the viewport size.

效果如:http://www.jqueryscript.net/demo/Pinterest-Like-Responsive-Dynamic-Grid-Layout-Plugin-Pinto/

但是Pinto 不自带响应效果,因此结合Lightbox使用.

Lightbox(使用方法:http://www.jqueryscript.net/lightbox/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin.html)也具有布局效果,但是可以用Pinto
的布局,其自带的图片放大和幻灯片试展示效果不错,其特点如下:

Features:

Responsive and touch friendly.

Image preloading and loading spinner.

CSS3 powered animations.

Keyboard / Touch swipe navigation.

Custom image aspect ratio.

效果如:http://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/.

Thank you so much for looking over my blog and hopefully you found this useful!