幻灯片/轮播

手风琴效果谷歌图片画廊jQuery插件

创客主机


mg-space是一款仿谷歌图片画廊的响应式手风琴效果图片画廊jQuery插件。该图片画廊插件使用简单,可以点击某个主题图片以手风琴的方式展开一组相关的图片,也可以将相关图片制作为幻灯片的形式。

使用方法:

使用该图片画廊插件需要在页面中引入style.css、mg-space.css、jquery以及jquery.mg-space.js文件,如果要制作幻灯片,还需要引入slick.css、slick-theme.css和slick.js文件。

  1. <link rel="stylesheet" href="css/style.css">
  2. <link rel="stylesheet" href="src/mg-space.css">
  3. <link href="js/slick/slick.css" rel="stylesheet" />
  4. <link href="js/slick/slick-theme.css" rel="stylesheet" />
  5. <script src="src/jquery.min.js"></script>
  6. <script src="src/jquery.mg-space.js"></script>
  7. <script src="js/slick/slick.js"></script>

HTML结构:

该图片画廊的基本HTML结构如下:

  1. <div class="mg-space-init">
  2.     <div class="mg-rows">
  3.         <div>
  4.             <a href="#" title="trigger element" class="mg-trigger"></a>
  5.         </div>
  6.         <div>
  7.             <a href="#" title="trigger element" class="mg-trigger"></a>
  8.         </div>
  9.         <div>
  10.             <a href="#" title="trigger element" class="mg-trigger"></a>
  11.         </div>
  12.         ...
  13.     </div>
  14.     <div class="mg-targets">
  15.         <div></div>
  16.         <div></div>
  17.         <div></div>
  18.         ...
  19.     </div>        
  20. </div>

初始化插件:

使用该插件最基本的功能,你只需要引入mg-space.css, jquery, jquery.mg-space.js文件,然后在页面DOM元素加载完毕之后,调用mgSpace()方法来初始化插件。

  1. $(function(){
  2.     $('.mg-space-init').mgSpace();
  3. });

配置参数:

mg-space插件的默认配置参数如下:

  1. defaults = {
  2.  
  3.     // Breakpoints at which the accordian changes # of columns
  4.     breakpointColumns: [
  5.         {
  6.             breakpoint: 0,
  7.             column: 1
  8.         },
  9.         {
  10.             breakpoint: 568,
  11.             column: 2
  12.         },
  13.         {
  14.             breakpoint: 768,
  15.             column: 3
  16.         },
  17.         {
  18.             breakpoint: 1200,
  19.             column: 4
  20.         }
  21.     ],
  22.  
  23.     // 默认的选择器
  24.     rowWrapper: ".mg-rows",
  25.     row: ".mg-row",
  26.     targetWrapper: ".mg-targets",
  27.     target: ".mg-target",
  28.     trigger: ".mg-trigger",
  29.     close: ".mg-close",
  30.  
  31.     // 默认的padding和margin值
  32.     rowMargin: 25, // Set to zero for gridless
  33.     targetPadding: 120, // Padding top/bottom inside target gets divided by 2
  34.  
  35.     useHash: false, // Set to true for history
  36.     useOnpageHash: false, // Set true for onpage history
  37.     hashTitle: "#/item-", // Must include `#` hash symbol
  38.  
  39.     // MISC          
  40.     useIndicator: true
  41. }

github地址:https://github.com/Mad-Genius/mg-space

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!