导航菜单中实现lightbox2多图灯箱且不影响布局的方法

lightbox2的同组图片识别逻辑很明确：所有data-lightbox属性值完全相同的<a>标签，都会被归为同一组支持左右切换浏览，只要标签能被jQuery正常选中、没有被事件拦截，就能正常生效。之前把第二张图的链接移入li内失效，基本是两个原因：一是Bootstrap导航的默认样式会把li内的a标签渲染成可见菜单项，破坏原有布局的同时可能造成事件冲突；二是标签嵌套不规范导致DOM解析结构出错。

不改动原有页面布局的实现方式如下：

• 保留导航栏内原有的Menu入口链接不动，不要在导航的li标签内追加其他a标签，避免打乱导航原有样式结构。
• 所有需要加入同组灯箱的额外图片链接，统一放在nav标签外部，添加内联样式设置为完全隐藏、不占据页面文档流空间，既不会对页面布局产生任何影响，也能被lightbox2正常识别为同组资源。
• 确认资源加载顺序：必须先引入jQuery 2.2.4，再引入lightbox2的CSS和JS文件，顺序错误会直接导致灯箱功能失效。

可直接替换使用的代码示例：

<div class="row align-items-center justify-content-center d-flex">          
  <nav>
    <ul class="nav-menu">
      <li><a href="index.html">Home</a></li>
      <li><a href="img/img1.jpg" data-lightbox="menu" data-title="Restaurant Menu">Menu</a></li>                         
    </ul>
  </nav>
  <!-- 以下为灯箱同组隐藏图片，新增图片直接按相同格式追加即可 -->
  <a href="img/img2.jpg" data-lightbox="menu" data-title="Restaurant Menu" style="display: none !important; width: 0; height: 0; overflow: hidden; position: absolute;"></a>
  <a href="img/img3.jpg" data-lightbox="menu" data-title="Restaurant Menu" style="display: none !important; width: 0; height: 0; overflow: hidden; position: absolute;"></a>                 
</div>

注意：不要给这些隐藏的a标签加任何可见内容，设置的隐藏样式要确保元素不会占据页面空间，也不会被正常浏览的用户感知到。配置完成后点击Menu入口弹出灯箱，就能看到左右切换按钮，正常浏览所有加入组内的图片。

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