fancybox

fancybox介绍

1. 开始使用fancybox，它可能是世界上最受欢迎的灯箱脚本。
2. 首选jQuery 3+，但fancybox可与jQuery 1.9.1+和jQuery 2+一起使用
3. fancybox包括对触摸手势的支持，甚至支持缩放手势。它非常适合移动和桌面浏览器。

「注意」

• 确保在fancybox JS文件之前添加jQuery库
• 如果您的页面上已经有了jQuery，则不应第二次添加它
• 不要同时包含fancybox.js和fancybox.min.js文件
• 当您直接在浏览器中打开本地文件时，某些功能（ajax，iframe等）将无法使用，该代码必须在Web服务器上运行

「fancybox3.0以上文档地址」

fancyapps.com/fancybox/3/…

「fancybox3.0以上API文档地址」

www.fancybox.net/api

fancybox的相册图片顺序问题

fancybox的默认相册是依据html页面上写的先后顺序 看看核心方法

// Start new fancybox instance
$.fancybox.open( items, opts, index );

// Get refrence to currently active fancybox instance
$.fancybox.getInstance();

// Close currently active fancybox instance (pass `true` to close all instances) 
$.fancybox.close();
// Close all instances and unbind all events
$.fancybox.destroy();

重写下点击事件重新建个相册就ok

$("[data-fancybox]").click(function(){
       let index = $(this).attr('data-fancybox-index')-1;
       $.fancybox.open([
        {
         src  : response.data.photos[0],
         opts : {
          caption : 'First caption',
          thumb   : '1_s.jpg'
         }
        },
        {
         src  : response.data.photos[1],
         opts : {
          caption : 'Second caption',
          thumb   : '2_s.jpg'
         }
        },
        {
         src  : response.data.photos[2],
         opts : {
          caption : 'three caption',
          thumb   : '3_s.jpg'
         }
        },
        {
         src  : response.data.photos[3],
         opts : {
          caption : 'four caption',
          thumb   : '4_s.jpg'
         }
        },
        {
         src  : response.data.photos[4],
         opts : {
          caption : 'five caption',
          thumb   : '5_s.jpg'
         }
        },
        {
         src  : response.data.photos[5],
         opts : {
          caption : 'six caption',
          thumb   : '6_s.jpg'
         }
        },
        {
         src  : response.data.photos[6],
         opts : {
          caption : 'seven caption',
          thumb   : '7_s.jpg'
         }
        }
       ], {
        loop : false
       },index);
      })  

本文使用 mdnice 排版