jgallery是一款移动优先的jQuery响应式图片画廊插件。该图片画廊插件提供大量的参数和动画效果,可以灵活的组合这些参数制作出不同的图片画廊效果。它的特点有:

  • 移动优先,支持移动触摸事件。
  • 灵活,易于配置。
  • 支持67种动画过渡效果。
  • 可自由缩放尺寸。
  • 支持CSS3和缩略图格式。
  • 兼容所有现代浏览器(IE8及以下浏览器不支持)

安装

可以通过nmp来安装该图片画廊插件。

npm install jgallery                
              

在页面中引入需要的插件依赖文件。

<link rel="stylesheet" type="text/css" media="all" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/jgallery.min.css?v=1.5.3" />
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/jgallery.min.js?v=1.5.3"></script>                
              

如果需要支持移动触摸事件,需要引入touchswipe.js文件。

<script type="text/javascript" src="js/touchswipe.min.js"></script>                
              

使用方法

HTML结构

该图片画廊的最基本HTML结构如下,在一个<div>元素中放置你需要的图片。

<div id="gallery">
    <a href="images/large/1.jpg"><img src="images/thumbs/1.jpg" alt="Photo 1" /></a>
    <a href="images/large/2.jpg"><img src="images/thumbs/2.jpg" alt="Photo 2" /></a>
    <a href="images/large/3.jpg"><img src="images/thumbs/3.jpg" alt="Photo 3" /></a>
</div>                
              
初始化插件

在DOM元素加载完毕之后,可以通过下面的方法来初始化该图片画廊插件。

$( function() {
    $( '#gallery' ).jGallery();
} );                
              

配置参数

参数 类型 默认值 描述
autostart Boolean true 设置为true时图片画廊在页面加载之后就自动播放
autostartAtImage Number 1 在页面加载之后自动播放模式下从第几张图片开始播放
autostartAtAlbum Number 1 在页面加载之后自动播放模式下从第几个专辑(相册)开始播放
backgroundColor String '#fff' 图片画廊容器的背景颜色
browserHistory Boolean true 设置为true时,激活的图片会被保存到浏览器历史中
canChangeMode Boolean true 设置为true时,可以修改显示模式
canClose Boolean true 设置为true时,可以关闭图片画廊
canMinimalizeThumbnails Boolean true 设置为true时,可以最小化图片画廊
canZoom Boolean true 设置为true时,可以放大缩小(Zoom)图片画廊
disabledOnIE8AndOlder Boolean true 设置为true时,在IE8及以下浏览器不能使用该图片画廊插件
draggableZoom Boolean true 设置为true时,可以拖动激活的图片
draggableZoomHide
NavigationOnMobile
Boolean true 设置为true时,拖动导航在窗口宽度小于等于maxMobileWidth参数是隐藏(默认值为767px)
height String '600px' 图片画廊容器的高度
hideThumbnailsOnInit Boolean false 设置为true时,缩略图在初始化时被隐藏
maxMobileWidth Number 767 图片画廊在移动手机中的最大宽度
mode String 'standard' 显示模式,可选值有:'full-screen','standard','slider'
preloadAll Boolean false 设置为true时,会预加载所有的图片
slideshow Boolean false 设置为true时,slideshow会在页面加载之后立刻运行
slideshowCanRandom Boolean true 设置为true时,可以随机切换slideshow的图片
slideshowInterval String '8s' slideshow切换图片的时间间隔
slideshowRandom Boolean false 设置为true时,slideshow中的图片会随机播放
swipeEvents Boolean true 设置为true时,你可以使用swipe事件来切换前一张或后一张图片
textColor String '#000' 图片画廊文字和图标的颜色
thumbnails Boolean true 是否显示缩略图
thumbHeight Number 75 缩略图的高度
thumbHeightOnFullScreen Number 100 全屏显示时的缩略图高度
thumbnailsFullScreen Boolean true 在全屏模式中是否显示缩略图
thumbnailsHideOnMobile Boolean true 如果设置为true,缩略图会在窗口宽度小于等于maxMobileWidth参数时隐藏(默认值为767px)
thumbnailsPosition String 'bottom' 缩略图的显示位置,可选值有:'top','bottom','left','right'
thumbType String 'image' 缩略图的类型,可选值有:'image','square','number'
thumbWidth Number 75 缩略图的宽度
thumbWidthOnFullScreen Number 100 全屏模式中缩略图的宽度
title Boolean true 如果设置为true,图片的alt属性会被显示
titleExpanded Boolean flase 如果设置为true,在缩放图片区域下方会显示图片alt属性的文字
tooltipClose String 'Close' 图片画廊关闭按钮的tooltip显示的文字
tooltipFullScreen String 'Full screen' 切换模式图标上tooltip显示的文字
tooltipRandom String 'Random' 随机图标上tooltip显示的文字内容
tooltips String 'See all photos' “查看所有图片”图标上tooltip显示的文字内容
tooltipSeeOtherAlbums String 'See other albums' “其它相册”图标上tooltip显示的文字内容
tooltipSlideshow String 'Slideshow' 播放/暂停Slideshow图标上tooltip显示的文字内容
tooltipToggleThumbnails String 'Toggle thumbnails' “切换缩略图”图标上tooltip显示的文字内容
tooltipZoom String 'Zoom' 缩放图片图标上tooltip显示的文字内容
transition String 'moveToLeft_
moveFromRight'
激活图片的过渡动画效果,可选值有:'moveToLeft_moveFromRight' 'moveToRight_moveFromLeft' 'moveToTop_moveFromBottom' 'moveToBottom_moveFromTop' 'fade_moveFromRight' 'fade_moveFromLeft' 'fade_moveFromBottom' 'fade_moveFromTop' 'moveToLeftFade_moveFromRightFade' 'moveToRightFade_moveFromLeftFade' 'moveToTopFade_moveFromBottomFade' 'moveToBottomFade_moveFromTopFade' 'moveToLeftEasing_moveFromRight' 'moveToRightEasing_moveFromLeft' 'moveToTopEasing_moveFromBottom' 'moveToBottomEasing_moveFromTop' 'scaleDown_moveFromRight' 'scaleDown_moveFromLeft' 'scaleDown_moveFromBottom' 'scaleDown_moveFromTop' 'scaleDown_scaleUpDown' 'scaleDownUp_scaleUp' 'moveToLeft_scaleUp' 'moveToRight_scaleUp' 'moveToTop_scaleUp' 'moveToBottom_scaleUp' 'scaleDownCenter_scaleUpCenter' 'rotateRightSideFirst_moveFromRight' 'rotateLeftSideFirst_moveFromLeft' 'rotateTopSideFirst_moveFromTop' 'rotateBottomSideFirst_moveFromBottom' 'flipOutRight_flipInLeft' 'flipOutLeft_flipInRight' 'flipOutTop_flipInBottom' 'flipOutBottom_flipInTop' 'rotateFall_scaleUp' 'rotateOutNewspaper_rotateInNewspaper' 'rotatePushLeft_moveFromRight' 'rotatePushRight_moveFromLeft' 'rotatePushTop_moveFromBottom' 'rotatePushBottom_moveFromTop' 'rotatePushLeft_rotatePullRight' 'rotatePushRight_rotatePullLeft' 'rotatePushTop_rotatePullBottom' 'rotatePushBottom_page' 'rotateFoldLeft_moveFromRightFade' 'rotateFoldRight_moveFromLeftFade' 'rotateFoldTop_moveFromBottomFade' 'rotateFoldBottom_moveFromTopFade' 'moveToRightFade_rotateUnfoldLeft' 'moveToLeftFade_rotateUnfoldRight' 'moveToBottomFade_rotateUnfoldTop' 'moveToTopFade_rotateUnfoldBottom' 'rotateRoomLeftOut_rotateRoomLeftIn' 'rotateRoomRightOut_rotateRoomRightIn' 'rotateRoomTopOut_rotateRoomTopIn' 'rotateRoomBottomOut_rotateRoomBottomIn' 'rotateCubeLeftOut_rotateCubeLeftIn' 'rotateCubeRightOut_rotateCubeRightIn' 'rotateCubeTopOut_rotateCubeTopIn' 'rotateCubeBottomOut_rotateCubeBottomIn' 'rotateCarouselLeftOut_rotateCarouselLeftIn' 'rotateCarouselRightOut_rotateCarouselRightIn' 'rotateCarouselTopOut_rotateCarouselTopIn' 'rotateCarouselBottomOut_rotateCarouselBottomIn' 'rotateSidesOut_rotateSidesInDelay' 'rotateSlideOut_rotateSlideIn' 'random'
transitionBackward String 'auto' 当用户选择前一张图片时的过渡动画效果。可选值有与transition参数相同
transitionCols Number 1 将图像分为列的列数
transitionDuration String '0.7s' 动画过渡的持续时间
transitionRows Number 1 将图像分为行的行数
transitionTimingFunction String 'cubic-bezier(0,1,1,1)' 显示图片的Timig函数,可选值有:'linear' 'ease' 'ease-in' 'ease-out' 'ease-in-out' 'cubic-bezier(0.5,-0.5,0.5,1.5)' 'cubic-bezier(0,1,1,1)'
transitionWaveDirection String 'forward' 动画的方向(只有在transitionCols>1或transitionRows>1).可选值'forward' 'backward'
width String '100%' 图片画廊容器的宽度
zoomSize String 'fit' 缩放图片的尺寸,可选值有:fit','original','fill'
afterLoadPhoto Function function() {} 加载图片之后的回调函数
beforeLoadPhoto Function function() {} 加载图片之前的回调函数
closeGallery Function function() {} 隐藏图片画廊时的回调函数
initGallery Function function() {} 图片画廊初始化之前的回调函数
showGallery Function function() {} 图片画廊显示之后的回调函数
showPhoto Function function() {} 图片画廊显示图片之前的回调函数

方法

  • getOptions:返回当前对象参数。$( '#gallery' ).jGallery().getOptions();
  • getDefaults:返回默认参数。$( '#gallery' ).jGallery().getDefaults();
  • restoreDefaults:存储默认参数。$( '#gallery' ).jGallery().restoreDefaults();
  • getTransitions:返回动画过渡效果列表。$( '#gallery' ).jGallery().getTransitions();
  • destroy:销毁图片画廊。$( '#gallery' ).jGallery().destroy();