我帮你搞定这个问题！你之前尝试模拟点击内部元素没效果，是因为lightGallery的事件绑定逻辑比较特殊，直接trigger点击没法触发它内部的处理流程。不过别担心，lightGallery本身就提供了原生API来直接控制画廊的打开，完全不需要刷新页面，这才是最优解。

具体实现步骤： #

1. 初始化时保存画廊实例
   原来的代码只是直接调用lightGallery()，现在我们需要把初始化后的实例保存下来，这样才能调用它的控制方法：

   // 初始化lightGallery并保存实例
   const lgInstance = lightGallery(document.getElementById('lightgallery'));
   

2. 给外部元素绑定点击事件，调用API打开画廊
   针对你页面上的#magic_start元素，直接调用实例的openGallery()方法就行，还能指定从哪一张幻灯片开始（索引从0开始）：

   $("#magic_start").click(function(e) {
       e.preventDefault();
       // 打开画廊，从第1张（索引0）开始
       lgInstance.openGallery(0);
   });
   

   如果你的项目不用jQuery，原生JS写法也很简单：

   document.getElementById('magic_start').addEventListener('click', function(e) {
       e.preventDefault();
       lgInstance.openGallery(0);
   });
   

为什么这个方法有效？ #

lightGallery的官方API是专门为这类外部控制场景设计的，openGallery()方法会直接触发画廊的打开流程，和点击内部缩略图的效果完全一致，而且不会有任何兼容性问题，也不需要刷新页面，完美解决你的用户体验问题。

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