Lightcase.js如何在document ready函数中实现画廊式系列图片弹窗展示

你可以直接修改原有JS逻辑，按lightcase的画廊数据规则构造参数即可，完整修改后的代码如下：

<html>
  <head>
    <title>Lightcase Lightbox plugin test</title>
    <link href="css/lightcase.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="js/lightcase.js"></script>
    <script src="js/jquery.events.touch.js"></script>   
    <script>
        $(document).ready(function(){
          // 你的图片地址列表，可自行增减项
          var imgURLs = [
            'https://www.google.com.ua/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
            "https://s.yimg.com/rz/p/yahoo_frontpage_en-US_s_f_p_205x58_frontpage_2x.png"
          ];
          
          // 构造lightcase画廊所需的数据集
          var galleryItems = imgURLs.map(url => {
            return {
              href: url,
              type: 'image'
            }
          });

          setTimeout(function(){
              lightcase.start({
                // 传入画廊数据集
                gallery: galleryItems,
                // 指定从第1张（索引0）开始展示，也可替换为随机索引
                currentIndex: 0,
                // 可选：开启自动轮播，单位为毫秒，注释后则关闭自动播放
                slideshow: 3000,
                // 其他你需要的宽高等自定义配置
              });
           },1000); // 页面加载后1秒弹出画廊
          
        });
    </script>   
  </body>
</html>

改动说明 #

• 移除了原有的随机取单张图片的逻辑，将所有图片地址转换为lightcase支持的画廊对象数组，每个对象指定资源地址和类型为图片
• 调用lightcase.start时新增gallery参数传入构造好的图片数组，配置currentIndex指定起始展示位置
• 可选添加slideshow参数实现自动依次切换图片，数值为每张图片的停留毫秒数
• 画廊加载后可通过lightcase自带的前后切换按钮手动切换所有图片

内容的提问来源于stack exchange，提问作者gomesh munda