爱编程

多用途响应式jQuery视频和图片画廊插件

阅读：49 时间：2018-02-03 03:17

Unite Gallery是一款功能强大的多用途响应式视频和图片画廊jQuery插件。它使用模块化技术，使用简单，易于定制。你可以通过CSS来改变画廊的皮肤，甚至可以自定义主题样式。它还支持移动触摸，支持图片缩放等。它的特点还有：

  • 可以在画廊中播放视频和音频文件。
  • 响应式-自动适配任何屏幕和容器，自动调整比例。
  • 可通过单独的CSS文件来更换画廊皮肤。
  • 多种主题-画廊提供了多种主题，每一种主题都有各自的特点。
  • 支持图片缩放-画廊中的大图可以进行缩放。
  • 提供各种功能按钮，移动设备中也能使用。
  • 画廊可以通过键盘的方向键进行控制。
  • 丰富的配置参数。
  • 强大的API支持。

在线预览    源码下载

使用方法

使用该图片画廊至少需要移入下面的文件。 

<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='unitegallery/js/unitegallery.min.js'></script> 

<link rel='stylesheet' href='unitegallery/css/unite-gallery.css' type='text/css' /> 
<script type='text/javascript' src='unitegallery/themes/default/ug-theme-default.js'></script> 
<link rel='stylesheet' href='unitegallery/themes/default/ug-theme-default.css' type='text/css' />
HTML结构

该图片画廊使用一个<div>元素来作为包裹元素，里面放置一组图片。 

<div id="gallery" style="display:none;">
  <img alt="Image 1 Title" src="thumbs/image1.jpg"
    data-image="images/image1.jpg"
    data-description="Image 1 Description">
    
  <img alt="Image 2 Title" src="thumbs/image2.jpg"
    data-image="images/image02.jpg"
    data-description="Image 2 Description">
</div>

如果是视频和音频文件，可以使用下面的HTML格式： 

<!--带图片预览的Youtube视频-->
<img alt="Youtube With Images"
   data-type="youtube"
   src="thumbs/youtube_thumb.jpg"
   data-image="images/youtube_image.jpg"     
   data-videoid="A3PDXmYoF5U"
   data-description="Youtube video description">

<!--不带图片预览的Youtube视频-->
<img alt="Youtube Without Images"
   data-type="youtube"
   data-videoid="A3PDXmYoF5U"
   data-description="Youtube video description">

<!--Vimeo视频-->
<img alt="Vimeo Video"
   data-type="vimeo"
   src="thumbs/vimeo_thumb.jpg"
   data-image="images/vimeo_image.jpg"     
   data-videoid="73234449"
   data-description="Vimeo Video Description">

<!--HTML5视频-->
<img alt="Html5 Video"
   src="thumbs/html5_video_thumb.png"
   data-type="html5video"
   data-image="thumbs/html5_video_image.png"
   data-videoogv="http://video-js.zencoder.com/oceans-clip.ogv"
   data-videowebm="http://video-js.zencoder.com/oceans-clip.webm"
   data-videomp4="http://video-js.zencoder.com/oceans-clip.mp4"
   data-description="Html5 Video Description">

<!--Wistia视频-->
<img alt="Wistia Video"      
   src="thumbs/wistia_thumb.jpg"
   data-image="images/wistia_image.jpg"    
   data-videoid="9oedgxuciv"
   data-description="Wistia video description!">

<!--音频-->
<img alt="Sound Cloud Track"     
   src="thumbs/sound_cloud_thumb.jpg"
   data-type="soundcloud"
   data-image="images/sound_cloud_image.jpg"
   data-trackid="8390970"
   data-description="SoundCloud track description">

在图片<img>元素中，各个属性代表的含义如下：

  • alt：图片的标题（可选）。
  • src：缩略图的URL地址。
  • data-image：大图的URL地址。
  • data-description：图片的描述信息（可选）。
初始化插件

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

<script type="text/javascript">   
  jQuery(document).ready(function(){ 
    jQuery("#gallery").unitegallery(); 
  }); 
</script>

修改画廊的皮肤

要改变画廊的皮肤非常简单。首先你需要引入相应的皮肤CSS文件（在skins文件夹中），例如需要引入“alexis”皮肤，你可以在页面中引入它： 

<link rel='stylesheet'  href='unitegallery/skins/alexis/alexis.css' type='text/css' />

然后你需要修改全局皮肤参数（gallery_skin）。你还可以局部修改皮肤，例如要修改幻灯片的按钮，可以通过设置slider_bullets_skin参数来实现： 

jQuery("gallery").unitegallery({
    gallery_skin:"alexis"       //it's the default skin
    slider_bullets_skin: "alexis"   //example how to change only skin for slider bullets
});

修改主题

图片画廊的主题在 unitegallery / themes 文件夹中。要改变主题，你需要在页面中引入相应的主题js文件。 

<script type='text/javascript' src='unitegallery/themes/compact/ug-theme-compact.js'></script>

然后你可以通过配置参数gallery_theme:"theme name" 来应用相应的主题。“theme name”是该主题文件夹的名称。 

jQuery("gallery").unitegallery({
    gallery_theme:"compact"   //example how to change skin to "compact"
});

需要注意的是，某些主题有它自己的一些图片文件，例如“default theme”，你不可以改变它们，只能够通过“slider”选项来禁用或添加它们。例如“default”主题中的slider播放按钮和全屏模式按钮。它们有主题的参数进行控制，而不是通过slider的参数进行控制。

如果你在一个页面中只引入了一个主题文件，你不必使用gallery_theme参数来指明它，插件会自动调用。

API

要使用这个图片画廊的API非常简单。首先，你可以创建一个API变量，注意这个变量要在ready()函数之外定义。 

<script type="text/javascript">
  var api;
  jQuery(document).ready(function(){
    api = jQuery("#gallery").unitegallery();
  });
</script>

然后你就可以使用这个api变量来操作画廊了。下面列出了一些可用的api调用方法： 

api.play()          //start play mode
api.stop()          //stop play mode
api.togglePlay()      //toggle play mode
api.enterFullscreen()   //enter fullscreen
api.exitFullscreen()    //exit fullscreen   
api.toggleFullscreen()    //toggle fullscreen
api.zoomIn()        //zoom in current image
api.zoomOut()       //zoom out current image
api.resetZoom()       //reset zoom to fit zoom mode
api.nextItem()        //next item
api.prevItem()        //previous item
api.selectItem(numItem)   //go to some item by index (0-numItems)
api.resize(width, height) //resize the gallery to some width. Height is optionary.
api.getItem(numItem)    //get data object of the item by some index.
api.getNumItems()     //get number of items in the gallery

下面是一些可用的api事件： 

api.on("item_change",function(num, data){   //on item change, get item number and item data
  //do something
});

api.on("resize",function(){       //on gallery resize
  //do something
});

api.on("enter_fullscreen",function(){ //on enter fullscreen
  //do something
});

api.on("exit_fullscreen",function(){  //on exit fulscreen
  //do something
});

api.on("play",function(){       //on start playing
  //do something
});

api.on("stop",function(){       //on stop playing
  //do something
});

api.on("pause",function(){        //on pause playing
  //do something
});

api.on("continue",function(){     //on continue playing
  //do something
});

在某些api事件和方法中有一个data对象，注意，你可以添加自定义的data-*属性，例如：<img src="thumbs/thumb1.jpg" data-yourfield="yourvalue" ...>，然后你可以像获取其他data属性的值一样来获取自定义data属性的值： 

data.index       
    data.title       
    data.description
    data.urlImage
    data.urlThumb
    
    //that taken from <img... data-custom="value" ... > from gallery markup
    
    data.custom   //item custom field passed.

关于该图片响应式画廊更详细的介绍请参考：http://unitegallery.net/

via：http://www.w2bc.com/article/responsive-jquery-image-and-video-gallery-plugin

在线预览    源码下载

爱编程-编程爱好者经验分享平台
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3